@oiz/stzh-components 2.5.0-alpha-carousel → 2.5.0-alpha

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

@@ -42,22 +42,24 @@ const Template = (args) => (
     <stzh-carousel {...args}>
       <stzh-ratio slot="actions">
         <stzh-hspace justify="end" items="end" size="none">
-          <stzh-button
-            data-stzh-carousel-previous
-            variant="secondary"
-            size="small"
-            icon="angle-left"
-            label="Previous slide"
-            icon-only
-          ></stzh-button>
-          <stzh-button
-            data-stzh-carousel-next
-            variant="secondary"
-            size="small"
-            icon="angle-right"
-            label="Next slide"
-            icon-only
-          ></stzh-button>
+          <stzh-buttongroup>
+            <stzh-button
+              data-stzh-carousel-previous
+              variant="secondary"
+              size="small"
+              icon="angle-left"
+              label="Previous slide"
+              icon-only
+            ></stzh-button>
+            <stzh-button
+              data-stzh-carousel-next
+              variant="secondary"
+              size="small"
+              icon="angle-right"
+              label="Next slide"
+              icon-only
+            ></stzh-button>
+          </stzh-buttongroup>
         </stzh-hspace>
       </stzh-ratio>
 
@@ -92,7 +94,7 @@ const TemplateCards = (args) => (
     <stzh-carousel {...args}>
       <stzh-hspace slot="actions" justify="end" items="center" size="medium">
         <stzh-text curve="p2" data-stzh-carousel-navigation-text>7 Offers</stzh-text>
-        <div>
+        <stzh-buttongroup>
           <stzh-button
             data-stzh-carousel-previous
             variant="secondary"
@@ -109,7 +111,7 @@ const TemplateCards = (args) => (
             label="Next slide"
             icon-only
           ></stzh-button>
-        </div>
+        </stzh-buttongroup>
       </stzh-hspace>
 
       {Card({ heading: "Lorem ipsum", href: '/', 'hide-header-border': true, 'hide-elevation': true })}

package/dist/collection/components/stzh-cell/stzh-cell.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-chart/stzh-chart.css

@@ -96,6 +96,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);
 }
 
 /**
@@ -829,4 +831,6 @@ stzh-chart *,
 stzh-chart *::before,
 stzh-chart *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }

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

@@ -95,11 +95,12 @@
 :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 {
   display: inline-block;
-  border-radius: var(--stzh-form-input-border-radius);
 }
 :host ::slotted(stzh-text) {
   --color: inherit;
@@ -204,6 +205,10 @@
   z-index: -1;
   opacity: 0;
   pointer-events: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: var(--stzh-form-input-border-radius);
 }
 .stzh-checkbox__mark {
   border: 0.0625rem solid var(--stzh-color-grey61);

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
@@ -12,6 +12,7 @@ let checkboxCounter = 0;
  */
 export class StzhCheckbox {
   constructor() {
+    this.focusedByInput = false;
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -21,7 +22,14 @@ export class StzhCheckbox {
         checked: this.checked
       });
     };
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent('focus', {
         view: window,
         bubbles: false,
@@ -105,12 +113,12 @@ export class StzhCheckbox {
       "stzh-checkbox--is-invalid": this.invalid,
       "stzh-checkbox--is-disabled": this.disabled
     };
-    return (h("div", { class: classes }, h("label", { class: "stzh-checkbox__field-wrapper" }, h("input", { class: "stzh-checkbox__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-checkbox__mark" }, h("div", { class: "stzh-checkbox__check", innerHTML: Check })), h("div", { class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("label", { class: "stzh-checkbox__field-wrapper" }, h("input", { class: "stzh-checkbox__input", ref: (el) => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-checkbox__mark" }, h("div", { class: "stzh-checkbox__check", innerHTML: Check })), h("div", { class: "stzh-checkbox__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
       h("span", { class: "stzh-checkbox__marker" }, h("span", { class: "stzh-checkbox__marker-symbol", "aria-hidden": "true" }, this.required
         ? this.localization.$globals.requiredFieldMarker
         : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-checkbox__marker-text" }, this.required
         ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
+        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-checkbox", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
   }
   static get is() { return "stzh-checkbox"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-checkboxgroup/stzh-checkboxgroup.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([direction=vertical]) ::slotted(stzh-checkbox:not(:last-child)) {

package/dist/collection/components/stzh-chip/stzh-chip.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 {
@@ -117,7 +119,6 @@
   --hover-icon-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-counter-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   display: inline-flex;
-  border-radius: var(--border-radius);
 }
 @media (forced-colors: active), (-ms-high-contrast: active) {
   :host {
@@ -270,8 +271,10 @@
   border-style: solid;
   border-color: var(--border-color);
   background-color: var(--background-color);
-  transition: all var(--stzh-base-transition-animation-speed);
-  text-decoration: none;
+  transition-duration: var(--stzh-base-transition-animation-speed);
+  transition-property: color, background-color, border-color;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 .stzh-chip__button.is-button, .stzh-chip__button.is-link {
   cursor: pointer;
@@ -314,7 +317,8 @@
   align-items: center;
   margin-left: var(--stzh-space-xxsmall);
   color: var(--remove-color);
-  transition: all var(--stzh-base-transition-animation-speed);
+  transition-duration: var(--stzh-base-transition-animation-speed);
+  transition-property: color, background-color, border-color;
   cursor: pointer;
 }
 .stzh-chip__remove:hover {
@@ -329,10 +333,10 @@
   background-color: var(--hover-background-color);
   border-color: var(--hover-border-color);
 }
-.stzh-chip__button:hover .stzh-chip__counter {
+.stzh-chip__button:hover .stzh-chip__counter, .stzh-chip__remove:hover + .stzh-chip__button .stzh-chip__counter {
   color: var(--hover-counter-color);
 }
-.stzh-chip__button:hover .stzh-chip__icon-wrapper {
+.stzh-chip__button:hover .stzh-chip__icon-wrapper, .stzh-chip__remove:hover + .stzh-chip__button .stzh-chip__icon-wrapper {
   color: var(--hover-icon-color);
 }
 .stzh-chip--size-small .stzh-chip__button {

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

@@ -5,7 +5,15 @@ import { Host, h, Fragment } from "@stencil/core";
  */
 export class StzhChip {
   constructor() {
+    this.focusedByInput = false;
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent("focus", {
         view: window,
         bubbles: false,
@@ -83,7 +91,7 @@ export class StzhChip {
     };
     const Chip = this.nonInteractive ? "div" :
       this.href ? "a" : "button";
-    return (h(Host, null, h("div", { class: classes }, this.removable &&
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, 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(Chip, { ref: (el) => (this.chip = el), class: {
           "stzh-chip__button": true,

package/dist/collection/components/stzh-chip-select/stzh-chip-select.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-chip-select__marker-symbol {

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

@@ -9,8 +9,9 @@ export class StzhChipSelect {
   constructor() {
     this._data = [];
     this._dataDropdown = [];
-    this.handleChipClick = (data) => {
+    this.handleChipClick = (data, index) => {
       this.value = data.value;
+      this.activeFocusOptionIndex = index;
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
@@ -18,6 +19,9 @@ export class StzhChipSelect {
     };
     this.handleDropdownChange = (event) => {
       this.value = event.detail.value;
+      this.activeFocusOptionIndex = this._data.findIndex(data => {
+        return data.value === this.value;
+      });
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
@@ -25,23 +29,21 @@ export class StzhChipSelect {
     };
     this.handleKeydown = (event) => {
       let newActiveIndex = null;
+      const activeOptionIndex = this.activeFocusOptionIndex;
       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") {
         event.preventDefault();
-        const activeOptionIndex = this.activeFocusOptionIndex;
         this.value = this._data[activeOptionIndex].value;
         this.stzhChange.emit({
           component: "stzh-chip-select",
@@ -123,10 +125,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.activeFocusOptionIndex}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, i) => (h("stzh-chip", { role: "option", class: {
+    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, index) => (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 }))));
+        "is-focused": this.activeFocusOptionIndex === index
+      }, 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-${index}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data, index) })))), 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"; }

package/dist/collection/components/stzh-clamp/stzh-clamp.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-clamp {
@@ -120,6 +122,8 @@ stzh-clamp *,
 stzh-clamp *::before,
 stzh-clamp *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 @media screen and (min-width: 600px) {
   stzh-clamp {

package/dist/collection/components/stzh-contact/stzh-contact.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([slot=image]) {

package/dist/collection/components/stzh-container/stzh-container.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-cspace/stzh-cspace.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-datalist/stzh-datalist.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-datalist/stzh-datalist.js

@@ -249,7 +249,7 @@ export class StzhDatalist {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Items in datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `leadingIcon`, `label`, `meta`, `icon`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`"
+          "text": "Items in datalist\nArray of objects that must at least include `value` attribute.\nCan optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n`[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`"
         },
         "attribute": "items",
         "reflect": false,

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

@@ -50,6 +50,7 @@ Default.args = {
       "label": "Label",
       "value": "Value 1",
       "icon": "delete",
+      "iconTooltip": "Remove Item",
       "statusLabel": "Status",
       "statusType": "error"
     },
@@ -58,6 +59,7 @@ Default.args = {
       "label": "Really Long Label",
       "value": "Value 2",
       "icon": "question-help",
+      "iconTooltip": "Help",
       "statusLabel": "Status",
       "statusType": "success"
     },
@@ -79,7 +81,8 @@ Default.args = {
       "label": "Label",
       "value": "Value 5",
       "meta": "Metainfo",
-      "icon": "delete"
+      "icon": "delete",
+      "iconTooltip": "Remove Item"
     }
   ]
 };

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.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 {
@@ -119,9 +121,9 @@
 
 .stzh-datalist-item {
   position: relative;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   /* Button variant */
-  /* Link variant */
   /* Interactive variant */
   /* Vertical variant */
   /* Horizontal variant */
@@ -154,7 +156,8 @@
   background: transparent;
   border: none;
   padding: 0;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 .stzh-datalist-item__leading.is-button, .stzh-datalist-item__leading.is-link, .stzh-datalist-item__value.is-button, .stzh-datalist-item__value.is-link, .stzh-datalist-item__label.is-button, .stzh-datalist-item__label.is-link, .stzh-datalist-item__meta.is-button, .stzh-datalist-item__meta.is-link, .stzh-datalist-item__action-list.is-button, .stzh-datalist-item__action-list.is-link {
   cursor: pointer;
@@ -249,20 +252,12 @@
 .stzh-datalist-item--is-button.stzh-datalist-item--is-expanded .stzh-datalist-item__icon.is-open {
   display: inline-flex;
 }
-.stzh-datalist-item--is-link .stzh-datalist-item__icon.is-external {
-  display: none;
-}
-.stzh-datalist-item--is-link .stzh-datalist-item__action-list[rel*=external] .stzh-datalist-item__icon.is-internal {
-  display: none;
-}
-.stzh-datalist-item--is-link .stzh-datalist-item__action-list[rel*=external] .stzh-datalist-item__icon.is-external {
-  display: inline-flex;
-}
 .stzh-datalist-item--is-interactive:hover .stzh-datalist-item__value, .stzh-datalist-item--is-interactive:hover .stzh-datalist-item__icon {
   color: var(--hover-color);
 }
 .stzh-datalist-item--is-interactive:hover .stzh-datalist-item__value {
-  text-decoration: underline;
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
 }
 .stzh-datalist-item--is-interactive:hover .stzh-datalist-item__leading-icon-container, .stzh-datalist-item--is-interactive:focus-within .stzh-datalist-item__leading-icon-container {
   color: var(--hover-leading-icon-color);

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.js

@@ -25,6 +25,8 @@ export class StzhDatalistItem {
     this.download = undefined;
     this.leadingIcon = undefined;
     this.icon = undefined;
+    this.iconLabel = undefined;
+    this.iconTooltip = undefined;
     this.label = "";
     this.value = "";
     this.meta = "";
@@ -33,6 +35,10 @@ export class StzhDatalistItem {
     this.hideBorder = false;
     this.a11yExpanded = undefined;
     this.a11yControls = undefined;
+    this.external = false;
+  }
+  externalWatcher() {
+    this.external = this.rel && this.rel.includes("external");
   }
   renderInner(isButton) {
     const Item = isButton ? "button" : (this.href ? "a" : "div");
@@ -45,7 +51,7 @@ export class StzhDatalistItem {
         "is-button": isButton,
         "is-link": !!this.href
       }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-        ? (this.a11yExpanded ? "true" : "false") : null }, this.rel && this.rel.includes('external') && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.downloadLinkLabel), this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        ? (this.a11yExpanded ? "true" : "false") : null }, this.external && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.downloadLinkLabel), this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
         "stzh-datalist-item__meta": true,
         "is-button": isButton,
         "is-link": !!this.href
@@ -78,6 +84,7 @@ export class StzhDatalistItem {
     }
   }
   async componentWillLoad() {
+    this.externalWatcher();
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "datalist-item");
     }
@@ -95,6 +102,12 @@ export class StzhDatalistItem {
       [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction
     };
     const Item = isButton ? "button" : (this.href ? "a" : "div");
+    const ActionButton = () => {
+      return (h("stzh-button", { class: {
+          "stzh-datalist-item__action": true,
+          "is-button": true
+        }, variant: "tertiary", size: "tiny", "aria-label": this.iconLabel || (`${this.label} ${this.value}`), iconOnly: true, icon: this.icon, onClick: this.actionClick }));
+    };
     return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.direction === "horizontal" ?
       h(Fragment, null, this.renderLeadingIcon(isButton), this.renderInner(isButton))
       :
@@ -106,12 +119,12 @@ export class StzhDatalistItem {
       (this.download ?
         h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : "download" }))
         :
-          h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-internal", name: this.icon ? this.icon : "arrow-right" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-external", name: this.icon ? this.icon : "external-link" }))), isButton &&
-      h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), !this.href && this.icon &&
-      h("stzh-button", { class: {
-          "stzh-datalist-item__action": true,
-          "is-button": true
-        }, variant: "tertiary", size: "tiny", "aria-label": this.value, iconOnly: true, icon: this.icon, onClick: this.actionClick }))), h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null)))));
+          h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : (this.external ? "external-link" : "arrow-right") }))), isButton &&
+      h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), (!this.href && this.icon) &&
+      (this.iconTooltip ?
+        h("stzh-tooltip", { content: this.iconTooltip }, ActionButton())
+        :
+          ActionButton()))), h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null)))));
   }
   static get is() { return "stzh-datalist-item"; }
   static get encapsulation() { return "scoped"; }
@@ -267,6 +280,40 @@ export class StzhDatalistItem {
         "attribute": "icon",
         "reflect": false
       },
+      "iconLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Overwrite aria-label of action button (default aria label is `label` and `value`)."
+        },
+        "attribute": "icon-label",
+        "reflect": false
+      },
+      "iconTooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button."
+        },
+        "attribute": "icon-tooltip",
+        "reflect": false
+      },
       "label": {
         "type": "string",
         "mutable": false,
@@ -411,6 +458,11 @@ export class StzhDatalistItem {
       }
     };
   }
+  static get states() {
+    return {
+      "external": {}
+    };
+  }
   static get events() {
     return [{
         "method": "stzhItemActionClick",
@@ -435,4 +487,10 @@ export class StzhDatalistItem {
       }];
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "rel",
+        "methodName": "externalWatcher"
+      }];
+  }
 }

package/dist/collection/components/stzh-datamessagelist/stzh-datamessagelist.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(*:not(:last-child)) {

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

@@ -59,7 +59,6 @@ const Template = (args) => (
           "label": "2 Attachments"
         }
       ]'
-      external-href="http://example.com"
     ></stzh-datamessagelist-item>
 
     <stzh-datamessagelist-item
@@ -129,6 +128,8 @@ const Template = (args) => (
     <stzh-datamessagelist-item
       heading="Lorem ipsum dolor"
       href="#message4"
+      rel="external nofollow"
+      target="_blank"
       description="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."
       meta='[
         {