@duetds/components 6.9.1 → 6.9.3

package/lib/collection/components/duet-list-item/duet-list-item.css

@@ -20,8 +20,8 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  flex-direction: column;
   display: flex;
-  flex-flow: row;
   width: 100%;
   overflow: visible;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -32,13 +32,19 @@
   line-height: 1.25;
   color: rgb(0, 41, 77);
 }
-@media (max-width: 35.9375em) {
-  :host {
-    flex-wrap: wrap;
-  }
+:host dt {
+  padding-bottom: 4px;
+}
+:host dd {
+  padding-top: 0;
 }
 :host dt,
 :host dd {
+  flex-basis: 100%;
+}
+:host dt,
+:host dd {
+  width: 100%;
   margin-inline-start: 0;
   -webkit-hyphens: auto;
   hyphens: auto;
@@ -46,55 +52,58 @@
   word-break: break-all;
   word-break: break-word;
 }
-@media (max-width: 35.9375em) {
-  :host dt,
-  :host dd {
-    flex: inherit;
-    flex-basis: 100% !important;
-    width: 100%;
-    padding-bottom: 4px !important;
-  }
-}
 :host dt {
-  padding: 16px !important;
   font-weight: 600;
 }
-@media (max-width: 35.9375em) {
-  :host dt {
-    padding-bottom: 4px !important;
-  }
-}
 .duet-theme-turva :host dt {
   font-weight: 700;
 }
 :host dd {
-  padding: 16px !important;
   margin-left: auto;
-  text-align: left;
 }
-@media (max-width: 35.9375em) {
-  :host dd {
-    padding-top: 0 !important;
-  }
+
+:host(.duet-list-striped) dt,
+:host(.duet-list-striped) dd {
+  padding: 16px;
+}
+:host(.duet-list-striped) dt {
+  padding-bottom: 4px;
+}
+:host(.duet-list-striped) dd {
+  padding-top: 0;
 }
 
-:host(:not(.duet-list-striped)) dt {
-  padding: 8px !important;
-  padding-left: 0 !important;
+:host(.duet-list-striped.duet-no-stacking) dt,
+:host(.duet-list-striped.duet-no-stacking) dd {
+  padding: 16px;
 }
-@media (max-width: 35.9375em) {
-  :host(:not(.duet-list-striped)) dt {
-    padding-bottom: 4px !important;
-  }
+
+:host(:not(.duet-list-striped)) dt,
+:host(:not(.duet-list-striped)) dd {
+  padding: 8px;
+  padding-inline: 0;
+}
+:host(:not(.duet-list-striped)) dt {
+  padding-bottom: 4px;
 }
 :host(:not(.duet-list-striped)) dd {
-  padding: 8px !important;
-  padding-left: 0 !important;
+  padding-top: 0;
 }
-@media (max-width: 35.9375em) {
-  :host(:not(.duet-list-striped)) dd {
-    padding-top: 0 !important;
-  }
+
+:host(:not(.duet-list-striped).duet-no-stacking) dt,
+:host(:not(.duet-list-striped).duet-no-stacking) dd {
+  padding: 8px;
+  padding-inline: 0;
+}
+
+:host(.duet-p-0) dt,
+:host(.duet-p-0) dd {
+  padding: 0 !important;
+}
+
+:host(.duet-list-mobile-center) dt,
+:host(.duet-list-mobile-center) dd {
+  text-align: center;
 }
 
 :host(.duet-theme-turva) {
@@ -136,63 +145,291 @@
   border-block-end: 1px solid rgb(228, 228, 230);
 }
 
-:host(.duet-list-width-30) dt {
+:host(.duet-no-stacking) {
+  flex-direction: row;
+}
+
+:host(.duet-list-mobile-center.duet-no-stacking) dt,
+:host(.duet-list-mobile-center.duet-no-stacking) dd {
+  text-align: left;
+}
+
+:host(.duet-no-stacking.duet-list-width-30) dt {
   flex-basis: 33%;
 }
-:host(.duet-list-width-30) dd {
+:host(.duet-no-stacking.duet-list-width-30) dd {
   flex-basis: 67%;
 }
 
-:host(.duet-list-width-50) dt {
+:host(.duet-no-stacking.duet-list-width-50) dt {
   flex-basis: 47%;
 }
-:host(.duet-list-width-50) dd {
+:host(.duet-no-stacking.duet-list-width-50) dd {
   flex-basis: 53%;
 }
 
-:host(.duet-list-width-70) dt {
+:host(.duet-no-stacking.duet-list-width-70) dt {
   flex-basis: 65%;
 }
-:host(.duet-list-width-70) dd {
+:host(.duet-no-stacking.duet-list-width-70) dd {
   flex-basis: 35%;
 }
 
-:host(.duet-p-0) dt,
-:host(.duet-p-0) dd {
-  padding-top: 0 !important;
-  padding-bottom: 4px !important;
+:host(.duet-list-item-breakpoint-x-small) {
+  flex-direction: row;
+}
+
+:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt,
+:host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd {
+  padding: 16px;
+}
+
+:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt,
+:host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd {
+  padding: 8px;
+  padding-inline: 0;
+}
+
+:host(.duet-list-item-breakpoint-x-small.duet-p-0) dt,
+:host(.duet-list-item-breakpoint-x-small.duet-p-0) dd {
+  padding: 0 !important;
+}
+
+:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dt,
+:host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dd {
+  text-align: left;
+}
+
+:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dt {
+  flex-basis: 33%;
+}
+:host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dd {
+  flex-basis: 67%;
 }
 
-@media (max-width: 35.9375em) {
-  :host(.duet-list-mobile-center) dt,
-  :host(.duet-list-mobile-center) dd {
+:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dt {
+  flex-basis: 47%;
+}
+:host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dd {
+  flex-basis: 53%;
+}
+
+:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dt {
+  flex-basis: 65%;
+}
+:host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dd {
+  flex-basis: 35%;
+}
+
+@media (max-width: 22.5em) {
+  :host(.duet-list-item-breakpoint-x-small) {
+    flex-direction: column;
+  }
+  :host(.duet-list-item-breakpoint-x-small) dt {
+    padding-bottom: 4px;
+  }
+  :host(.duet-list-item-breakpoint-x-small) dd {
+    padding-top: 0;
+  }
+  :host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt,
+  :host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd {
+    padding: 16px;
+  }
+  :host(.duet-list-item-breakpoint-x-small.duet-list-striped) dt {
+    padding-bottom: 4px;
+  }
+  :host(.duet-list-item-breakpoint-x-small.duet-list-striped) dd {
+    padding-top: 0;
+  }
+  :host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt,
+  :host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd {
+    padding: 8px;
+    padding-inline: 0;
+  }
+  :host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dt {
+    padding-bottom: 4px;
+  }
+  :host(.duet-list-item-breakpoint-x-small:not(.duet-list-striped)) dd {
+    padding-top: 0;
+  }
+  :host(.duet-list-item-breakpoint-x-small.duet-p-0) dt,
+  :host(.duet-list-item-breakpoint-x-small.duet-p-0) dd {
+    padding: 0 !important;
+  }
+  :host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dt,
+  :host(.duet-list-item-breakpoint-x-small.duet-list-mobile-center) dd {
     text-align: center;
   }
+  :host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dt,
+  :host(.duet-list-item-breakpoint-x-small.duet-list-width-30) dd {
+    flex-basis: 100%;
+  }
+  :host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dt,
+  :host(.duet-list-item-breakpoint-x-small.duet-list-width-50) dd {
+    flex-basis: 100%;
+  }
+  :host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dt,
+  :host(.duet-list-item-breakpoint-x-small.duet-list-width-70) dd {
+    flex-basis: 100%;
+  }
 }
-
-@media (max-width: 61.9375em) {
-  :host(.duet-list-breakpoint-large) {
-    flex-wrap: wrap;
+@media (min-width: 36em) {
+  :host(.duet-list-item-breakpoint-small) {
+    flex-direction: row;
+  }
+  :host(.duet-list-item-breakpoint-small.duet-list-striped) dt,
+  :host(.duet-list-item-breakpoint-small.duet-list-striped) dd {
+    padding: 16px;
+  }
+  :host(.duet-list-item-breakpoint-small:not(.duet-list-striped)) dt,
+  :host(.duet-list-item-breakpoint-small:not(.duet-list-striped)) dd {
+    padding: 8px;
+    padding-inline: 0;
+  }
+  :host(.duet-list-item-breakpoint-small.duet-p-0) dt,
+  :host(.duet-list-item-breakpoint-small.duet-p-0) dd {
+    padding: 0 !important;
+  }
+  :host(.duet-list-item-breakpoint-small.duet-list-mobile-center) dt,
+  :host(.duet-list-item-breakpoint-small.duet-list-mobile-center) dd {
+    text-align: left;
+  }
+  :host(.duet-list-item-breakpoint-small.duet-list-width-30) dt {
+    flex-basis: 33%;
+  }
+  :host(.duet-list-item-breakpoint-small.duet-list-width-30) dd {
+    flex-basis: 67%;
+  }
+  :host(.duet-list-item-breakpoint-small.duet-list-width-50) dt {
+    flex-basis: 47%;
   }
-  :host(.duet-list-breakpoint-large) dt,
-  :host(.duet-list-breakpoint-large) dd {
-    flex: inherit;
-    flex-basis: 100% !important;
-    width: 100%;
-    padding-bottom: 4px !important;
+  :host(.duet-list-item-breakpoint-small.duet-list-width-50) dd {
+    flex-basis: 53%;
   }
-  :host(.duet-list-breakpoint-large) dd {
-    padding-top: 0 !important;
+  :host(.duet-list-item-breakpoint-small.duet-list-width-70) dt {
+    flex-basis: 65%;
+  }
+  :host(.duet-list-item-breakpoint-small.duet-list-width-70) dd {
+    flex-basis: 35%;
   }
 }
-
-:host(.duet-list-breakpoint-large.duet-list-striped) dd {
-  padding-bottom: 16px !important;
+@media (min-width: 48em) {
+  :host(.duet-list-item-breakpoint-medium) {
+    flex-direction: row;
+  }
+  :host(.duet-list-item-breakpoint-medium.duet-list-striped) dt,
+  :host(.duet-list-item-breakpoint-medium.duet-list-striped) dd {
+    padding: 16px;
+  }
+  :host(.duet-list-item-breakpoint-medium:not(.duet-list-striped)) dt,
+  :host(.duet-list-item-breakpoint-medium:not(.duet-list-striped)) dd {
+    padding: 8px;
+    padding-inline: 0;
+  }
+  :host(.duet-list-item-breakpoint-medium.duet-p-0) dt,
+  :host(.duet-list-item-breakpoint-medium.duet-p-0) dd {
+    padding: 0 !important;
+  }
+  :host(.duet-list-item-breakpoint-medium.duet-list-mobile-center) dt,
+  :host(.duet-list-item-breakpoint-medium.duet-list-mobile-center) dd {
+    text-align: left;
+  }
+  :host(.duet-list-item-breakpoint-medium.duet-list-width-30) dt {
+    flex-basis: 33%;
+  }
+  :host(.duet-list-item-breakpoint-medium.duet-list-width-30) dd {
+    flex-basis: 67%;
+  }
+  :host(.duet-list-item-breakpoint-medium.duet-list-width-50) dt {
+    flex-basis: 47%;
+  }
+  :host(.duet-list-item-breakpoint-medium.duet-list-width-50) dd {
+    flex-basis: 53%;
+  }
+  :host(.duet-list-item-breakpoint-medium.duet-list-width-70) dt {
+    flex-basis: 65%;
+  }
+  :host(.duet-list-item-breakpoint-medium.duet-list-width-70) dd {
+    flex-basis: 35%;
+  }
 }
-
-@media (max-width: 61.9375em) {
-  :host(.duet-list-breakpoint-large.duet-list-mobile-center) dt,
-  :host(.duet-list-breakpoint-large.duet-list-mobile-center) dd {
-    text-align: center !important;
+@media (min-width: 62em) {
+  :host(.duet-list-item-breakpoint-large) {
+    flex-direction: row;
+  }
+  :host(.duet-list-item-breakpoint-large.duet-list-striped) dt,
+  :host(.duet-list-item-breakpoint-large.duet-list-striped) dd {
+    padding: 16px;
+  }
+  :host(.duet-list-item-breakpoint-large:not(.duet-list-striped)) dt,
+  :host(.duet-list-item-breakpoint-large:not(.duet-list-striped)) dd {
+    padding: 8px;
+    padding-inline: 0;
+  }
+  :host(.duet-list-item-breakpoint-large.duet-p-0) dt,
+  :host(.duet-list-item-breakpoint-large.duet-p-0) dd {
+    padding: 0 !important;
+  }
+  :host(.duet-list-item-breakpoint-large.duet-list-mobile-center) dt,
+  :host(.duet-list-item-breakpoint-large.duet-list-mobile-center) dd {
+    text-align: left;
+  }
+  :host(.duet-list-item-breakpoint-large.duet-list-width-30) dt {
+    flex-basis: 33%;
+  }
+  :host(.duet-list-item-breakpoint-large.duet-list-width-30) dd {
+    flex-basis: 67%;
+  }
+  :host(.duet-list-item-breakpoint-large.duet-list-width-50) dt {
+    flex-basis: 47%;
+  }
+  :host(.duet-list-item-breakpoint-large.duet-list-width-50) dd {
+    flex-basis: 53%;
+  }
+  :host(.duet-list-item-breakpoint-large.duet-list-width-70) dt {
+    flex-basis: 65%;
+  }
+  :host(.duet-list-item-breakpoint-large.duet-list-width-70) dd {
+    flex-basis: 35%;
+  }
+}
+@media (min-width: 64.0625em) {
+  :host(.duet-list-item-breakpoint-x-large) {
+    flex-direction: row;
+  }
+  :host(.duet-list-item-breakpoint-x-large.duet-list-striped) dt,
+  :host(.duet-list-item-breakpoint-x-large.duet-list-striped) dd {
+    padding: 16px;
+  }
+  :host(.duet-list-item-breakpoint-x-large:not(.duet-list-striped)) dt,
+  :host(.duet-list-item-breakpoint-x-large:not(.duet-list-striped)) dd {
+    padding: 8px;
+    padding-inline: 0;
+  }
+  :host(.duet-list-item-breakpoint-x-large.duet-p-0) dt,
+  :host(.duet-list-item-breakpoint-x-large.duet-p-0) dd {
+    padding: 0 !important;
+  }
+  :host(.duet-list-item-breakpoint-x-large.duet-list-mobile-center) dt,
+  :host(.duet-list-item-breakpoint-x-large.duet-list-mobile-center) dd {
+    text-align: left;
+  }
+  :host(.duet-list-item-breakpoint-x-large.duet-list-width-30) dt {
+    flex-basis: 33%;
+  }
+  :host(.duet-list-item-breakpoint-x-large.duet-list-width-30) dd {
+    flex-basis: 67%;
+  }
+  :host(.duet-list-item-breakpoint-x-large.duet-list-width-50) dt {
+    flex-basis: 47%;
+  }
+  :host(.duet-list-item-breakpoint-x-large.duet-list-width-50) dd {
+    flex-basis: 53%;
+  }
+  :host(.duet-list-item-breakpoint-x-large.duet-list-width-70) dt {
+    flex-basis: 65%;
+  }
+  :host(.duet-list-item-breakpoint-x-large.duet-list-width-70) dd {
+    flex-basis: 35%;
   }
 }

package/lib/collection/components/duet-list-item/duet-list-item.js

@@ -7,12 +7,23 @@ import { h, Host } from "@stencil/core";
  * @slot value - The list item component’s value content. Use this to put content into description list’s dd element.
  */
 export class DuetListItem {
+  constructor() {
+    this.responsive = false;
+    this.breakpoint = "small";
+  }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("dt", null, h("slot", { name: "label" })), h("dd", null, h("slot", { name: "value" }))));
+    return (h(Host, { class: {
+        "duet-no-stacking": !this.responsive,
+        "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
+        "duet-list-item-breakpoint-small": this.breakpoint === "small",
+        "duet-list-item-breakpoint-medium": this.breakpoint === "medium",
+        "duet-list-item-breakpoint-large": this.breakpoint === "large",
+        "duet-list-item-breakpoint-x-large": this.breakpoint === "x-large",
+      } }, h("dt", null, h("slot", { name: "label" })), h("dd", null, h("slot", { name: "value" }))));
   }
   static get is() { return "duet-list-item"; }
   static get encapsulation() { return "shadow"; }
@@ -26,4 +37,55 @@ export class DuetListItem {
       "$": ["duet-list-item.css"]
     };
   }
+  static get properties() {
+    return {
+      "responsive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Enable or disable the automatic responsive behaviour of the list item.\nThis property is used internally by List, and should not be set by the developer."
+            }],
+          "text": ""
+        },
+        "attribute": "responsive",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "breakpoint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetListBreakpoint",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+          "references": {
+            "DuetListBreakpoint": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Switch the breakpoint used to trigger the content stacking.\nThis property is used internally by List, and should not be set by the developer."
+            }],
+          "text": ""
+        },
+        "attribute": "breakpoint",
+        "reflect": false,
+        "defaultValue": "\"small\""
+      }
+    };
+  }
 }

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.js

@@ -20,6 +20,7 @@ export class DuetMenuBarDropdownLink {
     this.theme = "";
     this.href = "#";
     this.icon = undefined;
+    this.accessibleLabel = undefined;
   }
   /**
    * Component lifecycle events.
@@ -43,7 +44,7 @@ export class DuetMenuBarDropdownLink {
         "duet-menu-bar-dropdown-link": true,
         [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
         "duet-theme-turva": this.theme === "turva",
-      }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", null))));
+      }, href: this.href, role: "menuitem", onKeyUp: e => this.handleEscape(e), "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", null))));
   }
   static get is() { return "duet-menu-bar-dropdown-link"; }
   static get encapsulation() { return "shadow"; }
@@ -117,6 +118,23 @@ export class DuetMenuBarDropdownLink {
         "attribute": "icon",
         "reflect": true,
         "defaultValue": "undefined"
+      },
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
       }
     };
   }

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

@@ -24,6 +24,7 @@ export class DuetMenuBarLink {
     this.active = false;
     this.href = "#";
     this.icon = undefined;
+    this.accessibleLabel = undefined;
   }
   /**
    * Component lifecycle events.
@@ -60,7 +61,7 @@ export class DuetMenuBarLink {
         "duet-menu-bar-link": true,
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
-      }, href: this.href, "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { theme: this.theme, size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));
+      }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { theme: this.theme, size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));
   }
   static get is() { return "duet-menu-bar-link"; }
   static get encapsulation() { return "shadow"; }
@@ -152,6 +153,23 @@ export class DuetMenuBarLink {
         "attribute": "icon",
         "reflect": true,
         "defaultValue": "undefined"
+      },
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
       }
     };
   }

package/lib/collection/components/duet-multiselect/duet-multiselect.js

@@ -94,6 +94,19 @@ export class DuetMultiselect {
     this.getOptionIdentifier = (key) => {
       return `${this.identifier}-option-${key}`;
     };
+    this.getDescribedBy = () => {
+      const describedBy = [];
+      if (this.isCaptionVisible && this.topCaptionId) {
+        describedBy.push(this.topCaptionId);
+      }
+      if (this.accessibleDescribedBy) {
+        describedBy.push(this.accessibleDescribedBy);
+      }
+      if (this.error) {
+        describedBy.push(this.errorId);
+      }
+      return describedBy.length > 0 ? describedBy.join(" ") : null;
+    };
     this.processedItems = [];
     this.checkboxesVisible = false;
     this.activeDescendant = "";
@@ -110,6 +123,7 @@ export class DuetMultiselect {
     this.items = undefined;
     this.disabled = false;
     this.label = "label";
+    this.accessibleDescribedBy = undefined;
     this.tooltip = "";
     this.tooltipDirection = "auto";
   }
@@ -162,7 +176,7 @@ export class DuetMultiselect {
         "duet-theme-turva": this.theme === "turva",
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
-      }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes` }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { role: "img", class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+      }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes` }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { role: "img", class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
         "duet-multiselect-checkboxes": true,
         "duet-multiselect-checkboxes-active": this.checkboxesVisible,
       }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems &&
@@ -417,6 +431,23 @@ export class DuetMultiselect {
         "reflect": false,
         "defaultValue": "\"label\""
       },
+      "accessibleDescribedBy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the id of a component that describes the input."
+        },
+        "attribute": "accessible-described-by",
+        "reflect": false
+      },
       "tooltip": {
         "type": "string",
         "mutable": false,