@duetds/components 6.9.2 → 6.9.4

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

@@ -13,6 +13,7 @@ export class DuetList {
     this.breakpoint = "small";
     this.variation = "default";
     this.labelWidth = "30";
+    this.responsive = true;
   }
   /**
    * Component lifecycle events.
@@ -47,6 +48,8 @@ export class DuetList {
   async updateListItems() {
     const items = Array.from(this.element.querySelectorAll("duet-list-item"));
     items.forEach(item => {
+      item.responsive = this.responsive;
+      item.breakpoint = this.responsive ? this.breakpoint || "small" : undefined;
       // Use classes to apply styles for SSR compatibility
       item.classList.add(`duet-list-width-${this.labelWidth}`);
       item.classList.add(`duet-list-variation-${this.variation}`);
@@ -54,8 +57,6 @@ export class DuetList {
       this.toggleClass(item, "duet-p-0", this.padding === "none");
       // If text is centered for mobile
       this.toggleClass(item, "duet-list-mobile-center", this.mobile === "center");
-      // If breakpoint is adjusted
-      this.toggleClass(item, "duet-list-breakpoint-large", this.breakpoint === "large");
       // Create zebra striping if striped variation is used
       this.toggleClass(item, "duet-list-striped", this.variation === "striped");
       // Create borders if bordered variation is used
@@ -184,11 +185,11 @@ export class DuetList {
         "mutable": false,
         "complexType": {
           "original": "DuetListBreakpoint",
-          "resolved": "\"large\" | \"small\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
           "references": {
             "DuetListBreakpoint": {
-              "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
+              "location": "import",
+              "path": "../../common-types"
             }
           }
         },
@@ -230,7 +231,7 @@ export class DuetList {
         "mutable": false,
         "complexType": {
           "original": "DuetListLabelWidth",
-          "resolved": "\"30\" | \"50\" | \"70\"",
+          "resolved": "\"100\" | \"30\" | \"50\" | \"70\"",
           "references": {
             "DuetListLabelWidth": {
               "location": "local",
@@ -247,6 +248,24 @@ export class DuetList {
         "attribute": "label-width",
         "reflect": false,
         "defaultValue": "\"30\""
+      },
+      "responsive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable the automatic responsive behaviour of the list\ncomponent. Setting this option to \"true\"\nmakes sure that contents are stacked vertically on mobile.\nWhen \"false\" is set, contents are always shown in a single row."
+        },
+        "attribute": "responsive",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }
@@ -261,6 +280,9 @@ export class DuetList {
       }, {
         "propName": "mobile",
         "methodName": "updateListItems"
+      }, {
+        "propName": "responsive",
+        "methodName": "updateListItems"
       }, {
         "propName": "breakpoint",
         "methodName": "updateListItems"

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-multiselect/duet-multiselect.js

@@ -113,6 +113,7 @@ export class DuetMultiselect {
     this.language = getLanguage();
     this.margin = "auto";
     this.error = "";
+    this.accessibleLiveError = "polite";
     this.expand = false;
     this.value = [];
     this.theme = "";
@@ -183,7 +184,7 @@ export class DuetMultiselect {
       this.processedItems.map((item, key) => {
         var _a, _b;
         return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-      }))), h("span", { class: "duet-multiselect-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+      }))), h("span", { class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
   }
   static get is() { return "duet-multiselect"; }
   static get encapsulation() { return "shadow"; }
@@ -240,6 +241,24 @@ export class DuetMultiselect {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "accessibleLiveError": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"off\" | \"polite\" | \"assertive\"",
+          "resolved": "\"assertive\" | \"off\" | \"polite\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
+        },
+        "attribute": "accessible-live-error",
+        "reflect": false,
+        "defaultValue": "\"polite\""
+      },
       "expand": {
         "type": "boolean",
         "mutable": false,

package/lib/collection/components/duet-select/duet-select.css

@@ -177,6 +177,9 @@ duet-tooltip {
   border-color: rgb(245, 245, 247) !important;
   -webkit-text-fill-color: rgb(23, 28, 58) !important;
 }
+.duet-select-wrapper span.duet-keep-container-height {
+  opacity: 0;
+}
 
 .duet-select {
   position: absolute;