@oiz/stzh-components 2.7.0 → 2.8.0-alpha

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

@@ -99,14 +99,6 @@
   text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
-:host {
-  clear: both;
-}
-:host::after {
-  content: "";
-  display: table;
-  clear: both;
-}
 :host ::slotted(*) stzh-header {
   margin-left: -1.25rem;
   margin-right: -1.25rem;

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

@@ -99,14 +99,6 @@
   text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
-:host {
-  clear: both;
-}
-:host::after {
-  content: "";
-  display: table;
-  clear: both;
-}
 :host ::slotted(stzh-input),
 :host ::slotted(stzh-datepicker),
 :host ::slotted(stzh-dropdown),
@@ -114,10 +106,10 @@
 :host ::slotted(stzh-fieldset),
 :host ::slotted(stzh-actions),
 :host ::slotted(stzh-upload),
-:host ::slotted(stzh-checkbox),
+:host ::slotted(stzh-saptcha),
 :host ::slotted(stzh-checkboxgroup),
-:host ::slotted(stzh-radio),
-:host ::slotted(stzh-radiogroup) {
+:host ::slotted(stzh-radiogroup),
+:host ::slotted(stzh-message) {
   margin-top: var(--stzh-space-large);
   margin-bottom: var(--stzh-space-large);
 }
@@ -184,7 +176,6 @@
 }
 :host ::slotted(p),
 :host ::slotted(stzh-text),
-:host ::slotted(stzh-contact),
 :host ::slotted(ul),
 :host ::slotted(ol),
 :host ::slotted(dl),
@@ -195,7 +186,6 @@
 @media screen and (min-width: 1024px) {
   :host ::slotted(p),
 :host ::slotted(stzh-text),
-:host ::slotted(stzh-contact),
 :host ::slotted(ul),
 :host ::slotted(ol),
 :host ::slotted(dl),
@@ -206,7 +196,6 @@
 @media screen and (min-width: 1260px) {
   :host ::slotted(p),
 :host ::slotted(stzh-text),
-:host ::slotted(stzh-contact),
 :host ::slotted(ul),
 :host ::slotted(ol),
 :host ::slotted(dl),
@@ -217,7 +206,6 @@
 @media screen and (min-width: 1024px) {
   :host ::slotted(p),
 :host ::slotted(stzh-text),
-:host ::slotted(stzh-contact),
 :host ::slotted(ul),
 :host ::slotted(ol),
 :host ::slotted(dl),
@@ -228,7 +216,6 @@
 @media screen and (min-width: 1260px) {
   :host ::slotted(p),
 :host ::slotted(stzh-text),
-:host ::slotted(stzh-contact),
 :host ::slotted(ul),
 :host ::slotted(ol),
 :host ::slotted(dl),
@@ -357,247 +344,236 @@
     margin-bottom: var(--stzh-space-large);
   }
 }
-:host ::slotted(*) .section,
 :host ::slotted(.section),
+:host ::slotted(stzh-accordion),
 :host ::slotted(stzh-anchornav),
 :host ::slotted(stzh-audio),
 :host ::slotted(stzh-microsite-teaserlist),
-:host ::slotted(stzh-olmap),
 :host ::slotted(stzh-textandimage),
 :host ::slotted(stzh-figure),
 :host ::slotted(stzh-chart),
 :host ::slotted(stzh-sitemap),
-:host ::slotted(stzh-datalist),
-:host ::slotted(stzh-richtext),
-:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
   margin-top: var(--stzh-space-xxlarge);
   margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*) .section,
-:host ::slotted(.section),
+  :host ::slotted(.section),
+:host ::slotted(stzh-accordion),
 :host ::slotted(stzh-anchornav),
 :host ::slotted(stzh-audio),
 :host ::slotted(stzh-microsite-teaserlist),
-:host ::slotted(stzh-olmap),
 :host ::slotted(stzh-textandimage),
 :host ::slotted(stzh-figure),
 :host ::slotted(stzh-chart),
 :host ::slotted(stzh-sitemap),
-:host ::slotted(stzh-datalist),
-:host ::slotted(stzh-richtext),
-:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*) .section,
-:host ::slotted(.section),
+  :host ::slotted(.section),
+:host ::slotted(stzh-accordion),
 :host ::slotted(stzh-anchornav),
 :host ::slotted(stzh-audio),
 :host ::slotted(stzh-microsite-teaserlist),
-:host ::slotted(stzh-olmap),
 :host ::slotted(stzh-textandimage),
 :host ::slotted(stzh-figure),
 :host ::slotted(stzh-chart),
 :host ::slotted(stzh-sitemap),
-:host ::slotted(stzh-datalist),
-:host ::slotted(stzh-richtext),
-:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-top: var(--stzh-space-xxxxlarge);
   }
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*) .section,
-:host ::slotted(.section),
+  :host ::slotted(.section),
+:host ::slotted(stzh-accordion),
 :host ::slotted(stzh-anchornav),
 :host ::slotted(stzh-audio),
 :host ::slotted(stzh-microsite-teaserlist),
-:host ::slotted(stzh-olmap),
 :host ::slotted(stzh-textandimage),
 :host ::slotted(stzh-figure),
 :host ::slotted(stzh-chart),
 :host ::slotted(stzh-sitemap),
-:host ::slotted(stzh-datalist),
-:host ::slotted(stzh-richtext),
-:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*) .section,
-:host ::slotted(.section),
+  :host ::slotted(.section),
+:host ::slotted(stzh-accordion),
 :host ::slotted(stzh-anchornav),
 :host ::slotted(stzh-audio),
 :host ::slotted(stzh-microsite-teaserlist),
-:host ::slotted(stzh-olmap),
 :host ::slotted(stzh-textandimage),
 :host ::slotted(stzh-figure),
 :host ::slotted(stzh-chart),
 :host ::slotted(stzh-sitemap),
-:host ::slotted(stzh-datalist),
-:host ::slotted(stzh-richtext),
-:host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
-:host ::slotted(*) .contextparsys,
-:host ::slotted(*) .section.has-invert {
-  margin-top: var(--stzh-space-xxxlarge);
-  margin-bottom: var(--stzh-space-xxxlarge);
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) .contextparsys,
-:host ::slotted(*) .section.has-invert {
-    margin-top: var(--stzh-space-xxxxlarge);
-  }
+:host ::slotted(stzh-olmap),
+:host ::slotted(stzh-anchornav) {
+  margin-top: var(--stzh-space-xlarge);
+  margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*) .contextparsys,
-:host ::slotted(*) .section.has-invert {
-    margin-top: var(--stzh-space-big);
+  :host ::slotted(stzh-olmap),
+:host ::slotted(stzh-anchornav) {
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*) .contextparsys,
-:host ::slotted(*) .section.has-invert {
-    margin-top: var(--stzh-space-xbig);
-  }
-}
-@media screen and (min-width: 600px) {
-  :host ::slotted(*) .contextparsys,
-:host ::slotted(*) .section.has-invert {
-    margin-bottom: var(--stzh-space-xxxxlarge);
+  :host ::slotted(stzh-olmap),
+:host ::slotted(stzh-anchornav) {
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*) .contextparsys,
-:host ::slotted(*) .section.has-invert {
-    margin-bottom: var(--stzh-space-big);
+  :host ::slotted(stzh-olmap),
+:host ::slotted(stzh-anchornav) {
+    margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*) .contextparsys,
-:host ::slotted(*) .section.has-invert {
-    margin-bottom: var(--stzh-space-xbig);
+  :host ::slotted(stzh-olmap),
+:host ::slotted(stzh-anchornav) {
+    margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
-:host ::slotted(*) .section.has-invert stzh-invert stzh-container {
-  padding-top: var(--stzh-space-xxlarge);
-  padding-bottom: var(--stzh-space-xxlarge);
+:host ::slotted(stzh-contact),
+:host ::slotted(stzh-card) {
+  margin-top: var(--stzh-space-medium);
+  margin-bottom: var(--stzh-space-medium);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*) .section.has-invert stzh-invert stzh-container {
-    padding-top: var(--stzh-space-xxxlarge);
+  :host ::slotted(stzh-contact),
+:host ::slotted(stzh-card) {
+    margin-top: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*) .section.has-invert stzh-invert stzh-container {
-    padding-top: var(--stzh-space-xxxxlarge);
+  :host ::slotted(stzh-contact),
+:host ::slotted(stzh-card) {
+    margin-top: var(--stzh-space-xlarge);
   }
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*) .section.has-invert stzh-invert stzh-container {
-    padding-bottom: var(--stzh-space-xxxlarge);
+  :host ::slotted(stzh-contact),
+:host ::slotted(stzh-card) {
+    margin-bottom: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*) .section.has-invert stzh-invert stzh-container {
-    padding-bottom: var(--stzh-space-xxxxlarge);
+  :host ::slotted(stzh-contact),
+:host ::slotted(stzh-card) {
+    margin-bottom: var(--stzh-space-xlarge);
   }
 }
-:host ::slotted(*) .section.has-sticky {
-  display: contents;
-}
-:host ::slotted(*) .section.has-pagetitle,
-:host ::slotted(stzh-pagetitle),
-:host ::slotted(*) .section.has-table,
 :host ::slotted(stzh-table),
-:host ::slotted(*) .section.has-datatable,
 :host ::slotted(stzh-datatable) {
   margin-top: var(--stzh-space-medium);
   margin-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*) .section.has-pagetitle,
-:host ::slotted(stzh-pagetitle),
-:host ::slotted(*) .section.has-table,
-:host ::slotted(stzh-table),
-:host ::slotted(*) .section.has-datatable,
+  :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
     margin-top: var(--stzh-space-large);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*) .section.has-pagetitle,
-:host ::slotted(stzh-pagetitle),
-:host ::slotted(*) .section.has-table,
-:host ::slotted(stzh-table),
-:host ::slotted(*) .section.has-datatable,
+  :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
     margin-top: var(--stzh-space-xlarge);
   }
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*) .section.has-pagetitle,
-:host ::slotted(stzh-pagetitle),
-:host ::slotted(*) .section.has-table,
-:host ::slotted(stzh-table),
-:host ::slotted(*) .section.has-datatable,
+  :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
     margin-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*) .section.has-pagetitle,
-:host ::slotted(stzh-pagetitle),
-:host ::slotted(*) .section.has-table,
-:host ::slotted(stzh-table),
-:host ::slotted(*) .section.has-datatable,
+  :host ::slotted(stzh-table),
 :host ::slotted(stzh-datatable) {
     margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
-:host ::slotted(*) .section.has-anchornav,
-:host ::slotted(stzh-anchornav) {
+:host ::slotted(stzh-pagetitle) {
+  margin-top: var(--stzh-space-xxlarge);
+  margin-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(stzh-pagetitle) {
+    margin-top: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-pagetitle) {
+    margin-top: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(stzh-pagetitle) {
+    margin-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-pagetitle) {
+    margin-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+:host ::slotted(stzh-pagebottom) {
   margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  :host ::slotted(*) .section.has-anchornav,
-:host ::slotted(stzh-anchornav) {
+  :host ::slotted(stzh-pagebottom) {
     margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(*) .section.has-anchornav,
-:host ::slotted(stzh-anchornav) {
+  :host ::slotted(stzh-pagebottom) {
     margin-top: var(--stzh-space-xxxlarge);
   }
 }
-:host ::slotted(*) .section.has-actions,
+:host ::slotted(stzh-progressbar) {
+  margin-top: var(--stzh-space-xxxlarge);
+}
+@media screen and (min-width: 600px) {
+  :host ::slotted(stzh-progressbar) {
+    margin-top: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(stzh-progressbar) {
+    margin-top: var(--stzh-space-big);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-progressbar) {
+    margin-top: var(--stzh-space-xbig);
+  }
+}
+:host ::slotted(stzh-pagination) {
+  margin-top: var(--stzh-space-medium);
+  margin-bottom: var(--stzh-space-medium);
+}
 :host ::slotted(stzh-actions) {
   margin-top: var(--stzh-space-xxlarge);
 }
-:host ::slotted(*) .section.has-actions[variant=process],
 :host ::slotted(stzh-actions)[variant=process] {
   margin-top: var(--stzh-space-large);
 }
-:host ::slotted(*) .section.has-fieldset,
 :host ::slotted(stzh-fieldset) {
   margin-top: var(--stzh-space-large);
   margin-bottom: var(--stzh-space-large);
 }
-:host ::slotted(*) .section.has-fieldset[legend],
 :host ::slotted(stzh-fieldset)[legend] {
   margin-top: var(--stzh-space-xxlarge);
 }
@@ -605,19 +581,13 @@
 :host ::slotted(stzh-heading[curve=h4] + stzh-datalist) {
   margin-top: 0;
 }
-:host ::slotted(*) .section:first-child,
-:host ::slotted(*) .section[no-cspace-top],
-:host ::slotted(*) .contextparsys:first-child,
-:host ::slotted(*) .contextparsys[no-cspace-top],
-:host ::slotted(:first-child),
-:host ::slotted([no-cspace-top]) {
+
+:host([remove-first-margin]:not([remove-first-margin=false])) ::slotted(:first-child),
+:host([remove-first-margin]:not([remove-first-margin=false])) ::slotted([no-cspace-top]) {
   margin-top: 0 !important;
 }
-:host ::slotted(*) .section:last-child,
-:host ::slotted(*) .section[no-cspace-bottom],
-:host ::slotted(*) .contextparsys:last-child,
-:host ::slotted(*) .contextparsys[no-cspace-bottom],
-:host ::slotted(:last-child),
-:host ::slotted([no-cspace-bottom]) {
+
+:host([remove-last-margin]:not([remove-last-margin=false])) ::slotted(:last-child),
+:host([remove-last-margin]:not([remove-last-margin=false])) ::slotted([no-cspace-bottom]) {
   margin-bottom: 0 !important;
 }

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

@@ -1,8 +1,12 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 /**
  * @slot - Slot for any elements that should be vertically spaced
  */
 export class StzhCspace {
+  constructor() {
+    this.removeFirstMargin = true;
+    this.removeLastMargin = true;
+  }
   render() {
     const classes = {
       "stzh-cspace": true
@@ -10,7 +14,7 @@ export class StzhCspace {
     return (h(Host, null, h("div", { class: classes }, h("slot", null))));
   }
   static get is() { return "stzh-cspace"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["stzh-cspace.scss"]
@@ -21,5 +25,45 @@ export class StzhCspace {
       "$": ["stzh-cspace.css"]
     };
   }
+  static get properties() {
+    return {
+      "removeFirstMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether first top margin of first child component should be set to 0."
+        },
+        "attribute": "remove-first-margin",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "removeLastMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether last bottom margin of last child component should be set to 0."
+        },
+        "attribute": "remove-last-margin",
+        "reflect": true,
+        "defaultValue": "true"
+      }
+    };
+  }
 }
 //# sourceMappingURL=stzh-cspace.js.map

package/dist/collection/components/stzh-cspace/stzh-cspace.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-cspace.js","sourceRoot":"","sources":["../../../src/components/stzh-cspace/stzh-cspace.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACF,MAAM,eAAe,CAAC;AAEvB;;GAEG;AAMH,MAAM,OAAO,UAAU;EACrB,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-cspace\",\n  styleUrl: \"stzh-cspace.scss\",\n  scoped: true\n})\nexport class StzhCspace {\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-cspace.js","sourceRoot":"","sources":["../../../src/components/stzh-cspace/stzh-cspace.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB;;GAEG;AAMH,MAAM,OAAO,UAAU;;6BAEiC,IAAI;4BAGL,IAAI;;EAEzD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-cspace\",\n  styleUrl: \"stzh-cspace.scss\",\n  shadow: true\n})\nexport class StzhCspace {\n  /** Whether first top margin of first child component should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean = true;\n\n  /** Whether last bottom margin of last child component should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean = true;\n\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -239,6 +239,11 @@
 .stzh-datalist-item__value, .stzh-datalist-item__icon {
   transition: color var(--stzh-base-transition-animation-speed);
 }
+.stzh-datalist-item__richtext {
+  color: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+}
 .stzh-datalist-item__interactive {
   position: absolute;
   top: 0;

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

@@ -1,7 +1,9 @@
 import { Host, h, Fragment } from "@stencil/core";
 import { fetchTranslations } from "../../utils/translation-utils";
+let datalistItemCounter = 0;
 /**
  * @slot - Slot for nested datalist
+ * @slot value - Slot for value (or use value slot instead)
  */
 export class StzhDatalistItem {
   constructor() {
@@ -42,16 +44,16 @@ export class StzhDatalistItem {
   }
   renderInner(isButton) {
     const Item = isButton ? "button" : (this.href ? "a" : "div");
-    return (h(Fragment, null, h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+    return (h(Fragment, null, h(Item, { "aria-hidden": this.label ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-label`, class: {
         "stzh-datalist-item__label": true,
         "is-button": isButton,
         "is-link": !!this.href
-      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { class: {
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { id: `${this.datalistItemId}-value`, class: {
         "stzh-datalist-item__value": true,
         "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.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: {
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-labelledby": Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+        ? (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), h("stzh-richtext", { class: "stzh-datalist-item__richtext", innerHTML: this.value }, h("slot", { name: "value" }))), h(Item, { "aria-hidden": this.statusLabel || this.meta ? null : "true", tabindex: "-1", id: `${this.datalistItemId}-meta`, class: {
         "stzh-datalist-item__meta": true,
         "is-button": isButton,
         "is-link": !!this.href
@@ -60,7 +62,7 @@ export class StzhDatalistItem {
   }
   renderLeadingIcon(isButton) {
     const Item = isButton ? "button" : (this.href ? "a" : "div");
-    return (h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+    return (h(Item, { role: "presentation", "aria-hidden": "true", tabindex: "-1", class: {
         "stzh-datalist-item__leading": true,
         "is-button": isButton,
         "is-link": !!this.href
@@ -84,6 +86,7 @@ export class StzhDatalistItem {
     }
   }
   async componentWillLoad() {
+    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;
     this.externalWatcher();
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "datalist-item");
@@ -92,6 +95,7 @@ export class StzhDatalistItem {
   render() {
     const isButton = typeof this.a11yExpanded !== "undefined"
       || typeof this.a11yControls !== "undefined";
+    const hasActionButton = !this.href && this.icon;
     const classes = {
       "stzh-datalist-item": true,
       "stzh-datalist-item--is-interactive": !!this.href || isButton,
@@ -111,7 +115,7 @@ export class StzhDatalistItem {
     return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.direction === "horizontal" ?
       h(Fragment, null, this.renderLeadingIcon(isButton), this.renderInner(isButton))
       :
-        h(Fragment, null, this.renderLeadingIcon(isButton), h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton))), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        h(Fragment, null, this.renderLeadingIcon(isButton), h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton))), h(Item, { role: hasActionButton ? null : "presentation", "aria-hidden": hasActionButton ? null : "true", tabindex: "-1", class: {
         "stzh-datalist-item__action-list": true,
         "is-button": isButton,
         "is-link": !!this.href
@@ -120,7 +124,7 @@ export class StzhDatalistItem {
         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", 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) &&
+      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" })), hasActionButton &&
       (this.iconTooltip ?
         h("stzh-tooltip", { content: this.iconTooltip }, ActionButton())
         :
@@ -344,7 +348,7 @@ export class StzhDatalistItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Value"
+          "text": "Value (or use value slot instead)"
         },
         "attribute": "value",
         "reflect": false,