@oiz/stzh-components 2.4.0 → 2.5.0-alpha

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='[
         {

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-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);
 }
 
 .stzh-datamessagelist-item {
@@ -126,6 +128,12 @@
     padding-right: var(--stzh-space-xlarge);
   }
 }
+.stzh-datamessagelist-item:hover .stzh-datamessagelist-item__action.is-non-interactive {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-datamessagelist-item:hover .stzh-datamessagelist-item__action-popover-button {
+  --color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
 .stzh-datamessagelist-item__vhidden {
   border: 0;
   clip: rect(0 0 0 0);
@@ -170,16 +178,14 @@
 }
 .stzh-datamessagelist-item__heading-link {
   color: inherit;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   transition: color var(--stzh-base-transition-animation-speed);
   border-radius: var(--stzh-button-border-radius);
 }
 .stzh-datamessagelist-item__heading-link:hover, .stzh-datamessagelist-item__heading-link:focus {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
-.stzh-datamessagelist-item__heading-link::before {
-  transition: all var(--stzh-base-transition-animation-speed);
-}
 .stzh-datamessagelist-item__heading-link::before, .stzh-datamessagelist-item__heading-link::after {
   content: "";
   display: block;
@@ -189,6 +195,12 @@
   width: 100%;
   height: 100%;
 }
+.stzh-datamessagelist-item__heading-link::before {
+  transition: all var(--stzh-base-transition-animation-speed);
+}
+.stzh-datamessagelist-item__heading-link::after {
+  z-index: 1;
+}
 .stzh-datamessagelist-item__heading-link:hover::before, .stzh-datamessagelist-item__heading-link:focus::before {
   background-color: var(--stzh-color-primary4);
 }
@@ -307,10 +319,22 @@
     justify-content: center;
   }
 }
+.stzh-datamessagelist-item__action.is-non-interactive {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--stzh-form-input-tiny-height);
+  height: var(--stzh-form-input-tiny-height);
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
 .stzh-datamessagelist-item__action-popover {
   --width: auto;
   --min-width: 12.5rem;
 }
+.stzh-datamessagelist-item__action-popover-button {
+  position: relative;
+  z-index: 2;
+}
 .stzh-datamessagelist-item--is-unread .stzh-datamessagelist-item__heading-link {
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }

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

@@ -21,12 +21,18 @@ export class StzhDatamessagelistItem {
     this.heading = "";
     this.unread = false;
     this.href = "";
+    this.rel = undefined;
+    this.target = undefined;
     this.description = "";
-    this.externalHref = "";
+    this.icon = undefined;
     this.loadingStatus = undefined;
     this.meta = undefined;
     this.actions = undefined;
     this.tags = undefined;
+    this.external = false;
+  }
+  externalWatcher() {
+    this.external = this.rel && this.rel.includes("external");
   }
   loadingStatusWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -65,6 +71,7 @@ export class StzhDatamessagelistItem {
     this.metaWatcher(this.meta);
     this.actionsWatcher(this.actions);
     this.tagsWatcher(this.tags);
+    this.externalWatcher();
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "datamessagelist-item");
     }
@@ -74,14 +81,15 @@ export class StzhDatamessagelistItem {
       "stzh-datamessagelist-item": true,
       "stzh-datamessagelist-item--is-unread": this.unread
     };
-    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, onClick: this.itemClick }, this.unread &&
+    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, rel: this.rel, target: this.target, onClick: this.itemClick }, this.unread &&
       h("span", { class: "stzh-datamessagelist-item__vhidden" }, this.localization.unread, ","), this.heading)), this.description &&
       h("div", { class: "stzh-datamessagelist-item__description" }, h("stzh-clamp", { lines: 2, linesMedium: 1 }, this.description)), this._meta && this._meta.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__meta-wrapper" }, h("ul", { class: "stzh-datamessagelist-item__meta" }, this._meta.map((meta) => h("li", { class: "stzh-datamessagelist-item__meta-item" }, h("span", { class: "stzh-datamessagelist-item__meta-item-label" }, meta.label), h("span", { class: "stzh-datamessagelist-item__meta-item-value" }, meta.value)))))), this._loadingStatus &&
       h("stzh-status", { class: "stzh-datamessagelist-item__status", label: this._loadingStatus.label, percent: this._loadingStatus.percent, type: this._loadingStatus.type, withLoadingbar: true }), this._tags && this._tags.length > 0 &&
-      h("div", { class: "stzh-datamessagelist-item__tags-wrapper" }, h("div", { class: "stzh-datamessagelist-item__tags" }, this._tags.map((tag) => h("stzh-chip", { class: "stzh-datamessagelist-item__tag", variant: "tag", size: "small", type: tag.type, icon: tag.icon, label: tag.label }))))), h("div", { class: "stzh-datamessagelist-item__actions" }, this.externalHref &&
-      h("stzh-button", { href: this.externalHref, variant: "tertiary", icon: "external-link", size: "tiny", iconOnly: true }), this._actions && this._actions.length > 0 &&
-      h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: "stzh-datamessagelist-item__action-popover" }, h("stzh-button", { variant: "tertiary", size: "tiny", icon: "more-horizontal", iconOnly: true }), h("stzh-menu", { slot: "content" }, this._actions.map((action) => h("stzh-menu-item", { icon: action.icon, badge: action.badge, onClick: (event) => { this.actionClick(action, event); } }, action.label))))))));
+      h("div", { class: "stzh-datamessagelist-item__tags-wrapper" }, h("div", { class: "stzh-datamessagelist-item__tags" }, this._tags.map((tag) => h("stzh-chip", { class: "stzh-datamessagelist-item__tag", variant: "tag", size: "small", type: tag.type, icon: tag.icon, label: tag.label }))))), h("div", { class: "stzh-datamessagelist-item__actions" }, (this._actions && this._actions.length > 0) ?
+      h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: "stzh-datamessagelist-item__action-popover" }, h("stzh-button", { class: "stzh-datamessagelist-item__action-popover-button", variant: "tertiary", size: "tiny", icon: "more-horizontal", iconOnly: true }), h("stzh-menu", { slot: "content" }, this._actions.map((action) => h("stzh-menu-item", { icon: action.icon, badge: action.badge, onClick: (event) => { this.actionClick(action, event); } }, action.label))))
+      :
+        h("div", { class: "stzh-datamessagelist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datamessagelist-item__action-icon", name: this.icon ? this.icon : (this.external ? "external-link" : "arrow-right") }))))));
   }
   static get is() { return "stzh-datamessagelist-item"; }
   static get encapsulation() { return "scoped"; }
@@ -171,6 +179,40 @@ export class StzhDatamessagelistItem {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Rel (if href is used)"
+        },
+        "attribute": "rel",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Target (if href is used)"
+        },
+        "attribute": "target",
+        "reflect": false
+      },
       "description": {
         "type": "string",
         "mutable": false,
@@ -189,7 +231,7 @@ export class StzhDatamessagelistItem {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "externalHref": {
+      "icon": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -201,11 +243,10 @@ export class StzhDatamessagelistItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "External href"
+          "text": "Icon (`arrow-right` by default or `external-link` if rel=\"*external*\" is used)"
         },
-        "attribute": "external-href",
-        "reflect": false,
-        "defaultValue": "\"\""
+        "attribute": "icon",
+        "reflect": false
       },
       "loadingStatus": {
         "type": "string",
@@ -297,6 +338,11 @@ export class StzhDatamessagelistItem {
       }
     };
   }
+  static get states() {
+    return {
+      "external": {}
+    };
+  }
   static get events() {
     return [{
         "method": "stzhClick",
@@ -343,6 +389,9 @@ export class StzhDatamessagelistItem {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "rel",
+        "methodName": "externalWatcher"
+      }, {
         "propName": "loadingStatus",
         "methodName": "loadingStatusWatcher"
       }, {

package/dist/collection/components/stzh-datatable/stzh-datatable.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-datatable {
@@ -116,6 +118,8 @@ stzh-datatable *,
 stzh-datatable *::before,
 stzh-datatable *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 stzh-datatable[disable-min-width]:not([disable-min-width=false]) {
   --min-width: none;

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

@@ -39,6 +39,12 @@ export class StzhDatatable {
         }
       });
     };
+    this.handleResize = () => {
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(this.updateScrollStates);
+    };
     this.handleScroll = () => {
       if (this.debounceScroll) {
         window.cancelAnimationFrame(this.debounceScroll);
@@ -92,9 +98,6 @@ export class StzhDatatable {
     }
     this.buildSearchIndex();
   }
-  handleResize() {
-    this.updateScrollStates();
-  }
   buildSearchIndex() {
     if (!this._rows || this._rows.length === 0
       || !this._columns || this._columns.length === 0) {
@@ -153,6 +156,15 @@ export class StzhDatatable {
       });
     }
   }
+  connectedCallback() {
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.element);
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
   render() {
     const classes = {
       "stzh-datatable": true,
@@ -414,13 +426,4 @@ export class StzhDatatable {
         "methodName": "columnsWatcher"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
 }

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

@@ -7,6 +7,11 @@ import { createGlobalAdapter } from "../../utils/date-adapter";
  */
 export class StzhDatepicker {
   constructor() {
+    this.onRootFocus = () => {
+      if (this.input) {
+        this.input.setFocus();
+      }
+    };
     this.onInputChange = () => {
       const parsedDate = this.dateAdapter.parse(this.input.value, "inputdate");
       if (this.input.value === "" || parsedDate) {
@@ -116,7 +121,7 @@ export class StzhDatepicker {
       "stzh-datepicker": true,
       "stzh-datepicker--inline": this.inline
     };
-    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
       h(Fragment, null, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))), !this.inline &&
       h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, size: this.size }, h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { slot: "content" }, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))))))));
   }

package/dist/collection/components/stzh-details/stzh-details.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-dialog/stzh-dialog.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 {
@@ -181,8 +183,8 @@
 .stzh-dialog__backdrop {
   z-index: 1;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 0px;
+  left: 0px;
   width: 100%;
   height: 100%;
   overflow-x: hidden;

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

@@ -1,6 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { setPropsIfNull } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
+import { createBaseFocusTrapOptions } from "../../utils/overlay-utils";
 import { createFocusTrap } from 'focus-trap';
 const keyCode = {
   ESC: 27
@@ -129,6 +130,18 @@ export class StzhDialog {
       this.localization = await fetchTranslations(this.element, "dialog");
     }
   }
+  componentDidRender() {
+    this.open ? this.dialogShown() : this.dialogHidden();
+  }
+  componentDidUpdate() {
+    this.trap.updateContainerElements(this.element);
+  }
+  componentDidLoad() {
+    this.trap = createFocusTrap(this.element, Object.assign({ fallbackFocus: this.dialogElement }, createBaseFocusTrapOptions()));
+    if (this.open) {
+      this.dialogShown();
+    }
+  }
   connectedCallback() {
     if (!this.stay && this.element.parentElement !== document.body) {
       document.body.appendChild(this.element);
@@ -141,23 +154,11 @@ export class StzhDialog {
       subtree: true
     });
   }
-  componentDidRender() {
-    this.open ? this.dialogShown() : this.dialogHidden();
-  }
-  componentDidUpdate() {
-    this.trap.updateContainerElements(this.element);
-  }
-  componentDidLoad() {
-    this.trap = createFocusTrap(this.element, {
-      fallbackFocus: this.dialogElement,
-      returnFocusOnDeactivate: true
-    });
-    if (this.open) {
-      this.dialogShown();
-    }
-  }
   disconnectedCallback() {
     this.dialogHidden();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: {

package/dist/collection/components/stzh-dropdown/stzh-dropdown.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-dropdown {
@@ -129,6 +131,8 @@ stzh-dropdown *,
 stzh-dropdown *::before,
 stzh-dropdown *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 stzh-dropdown[variant=plain] {
   --background-color: transparent;
@@ -281,7 +285,6 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
 }
 .stzh-dropdown .ts-control:hover, .stzh-dropdown .ts-control:focus-within {
   border-color: var(--hover-border-color);
-  outline: none;
 }
 .stzh-dropdown .ts-control > * {
   vertical-align: baseline;
@@ -431,7 +434,7 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   left: 0;
   top: 50%;
   height: 0.125rem;
-  margin-top: -0.03125rem;
+  margin-top: -0.5px;
 }
 .stzh-dropdown__option, .stzh-dropdown__create {
   font-size: var(--stzh-font-micro-font-size);
@@ -443,7 +446,8 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
      -moz-appearance: none;
           appearance: none;
   font-family: inherit;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   outline: none;
   border: none;
   padding: var(--stzh-space-xsmall) var(--stzh-space-medium);
@@ -614,7 +618,8 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   top: 50%;
   right: -0.0625rem;
   transform: translateY(-50%);
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 1.5rem;