@duetds/components 6.9.2 → 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-select/duet-select.js

@@ -131,7 +131,7 @@ export class DuetSelect {
     return item ? item.label : this.placeholder || "";
   }
   renderOption(option) {
-    return (h("option", { value: option.value, key: option.value, selected: this.value === option.value, disabled: option.disabled }, option.label));
+    return (h("option", { "aria-label": option.ariaLabel, value: option.value, key: option.value, selected: this.value === option.value, disabled: option.disabled }, option.label));
   }
   renderOptionGroup(group) {
     return (h("optgroup", { key: group.label, label: group.label, disabled: group.disabled }, group.options.map(option => this.renderOption(option))));

package/lib/collection/components/duet-tab-group/duet-tab-group.css

@@ -53,9 +53,9 @@
 
 .duet-tab-variation-checked .duet-tab-group-tabs {
   display: flex;
-  gap: 8px;
-  padding-right: 16px;
-  padding-left: 16px;
+  gap: 4px;
+  padding-right: 12px;
+  padding-left: 12px;
   overflow-x: scroll;
   /* Hide scrollbar for IE, Edge and Firefox */
   -ms-overflow-style: none; /* IE and Edge */
@@ -67,6 +67,9 @@
 }
 @media (min-width: 36em) {
   .duet-tab-variation-checked .duet-tab-group-tabs {
+    gap: 8px;
+    padding-right: 16px;
+    padding-left: 16px;
     overflow: visible;
   }
 }
@@ -226,7 +229,7 @@
   flex-grow: 1;
   width: 200px;
   min-width: 200px;
-  padding: 16px;
+  padding: 8px 4px;
   border-color: rgb(207, 210, 212);
   border-bottom-color: rgb(0, 119, 179);
   border-radius: 4px 4px 0 0;
@@ -240,6 +243,7 @@
 @media (min-width: 36em) {
   .duet-tab-variation-checked .duet-tab-button {
     min-width: 0;
+    padding: 16px;
   }
 }
 .duet-tab-variation-checked .duet-tab-button.stackable-tab {
@@ -298,9 +302,16 @@
 }
 .duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption {
   margin-top: 4px;
+  font-size: 0.875rem;
   font-weight: 400;
   color: rgb(101, 119, 135);
 }
+@media (min-width: 36em) {
+  .duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption {
+    font-size: 1rem;
+    text-align: left;
+  }
+}
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption {
   color: rgb(68, 68, 69);
 }
@@ -314,6 +325,8 @@
 
 .duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark {
   order: -1;
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 @media (min-width: 36em) {
   .duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark {

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

@@ -24,6 +24,7 @@ export class DuetTextarea {
     this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
     this.labelId = createID("DuetLabel");
     this.errorId = createID("DuetError");
+    this.characterCountId = createID("DuetCharacterCount");
     this.disallowPatternRegex = null;
     /**
      * Component event handling.
@@ -56,6 +57,9 @@ export class DuetTextarea {
       });
     };
     this.handleFocus = (ev) => {
+      if (this.counter) {
+        this.hiddenCounterLabel.textContent = `${Math.max(this.maxlength - this.value.length, 0)}/${this.maxlength} ${this.counterLabel}`;
+      }
       this.duetFocus.emit({
         originalEvent: ev,
         value: this.value,
@@ -73,6 +77,9 @@ export class DuetTextarea {
       if (this.error) {
         describedBy.push(this.errorId);
       }
+      if (this.counter) {
+        describedBy.push(this.characterCountId);
+      }
       return describedBy.length > 0 ? describedBy.join(" ") : null;
     };
     this.margin = "auto";
@@ -149,7 +156,9 @@ export class DuetTextarea {
         "duet-label-hidden": this.labelHidden,
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
-      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
+      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+        this.hiddenCounterLabel = el;
+      } })))));
   }
   static get is() { return "duet-textarea"; }
   static get encapsulation() { return "scoped"; }

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-29b0c53d.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-deb13767.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-cf8e064c.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-d8b913a2.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-6b75d471.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-98adfbc0.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;