@duetds/components 10.2.4 → 10.3.1

package/lib/collection/components/duet-table/duet-table-styles.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { colorGrayDarker, colorGrayDarkerTurva, colorGrayDarkTurva, colorGrayLight, colorGrayLightest, colorGrayLightTurva, colorPrimary, colorSecondary, colorSecondaryTurva, fontFamilyText, fontFamilyTextTurva, fontSizeMedium, fontWeightSemiBold, lineHeightSmall, mediaQueryXSmall, spaceLarge, spaceMedium, spaceSmall, spaceXxSmall, } from "@duetds/tokens";
+import { colorGrayDarkTurva, colorGrayDarker, colorGrayDarkerTurva, colorGrayLight, colorGrayLightest, colorGrayLightTurva, colorPrimary, colorSecondary, colorSecondaryTurva, colorTurvaGray900, fontFamilyText, fontFamilyTextTurva, fontSizeMedium, fontWeightSemiBold, lineHeightSmall, mediaQueryXSmall, spaceLarge, spaceMedium, spaceSmall, spaceXxSmall, } from "@duetds/tokens";
 const rgbable = (value) => {
     return value.replace("rgb(", "").replace(")", "");
 };
@@ -63,20 +63,12 @@ duet-table {
     }
   }
 
-  &.duet-theme-turva table {
-    font-family: ${fontFamilyTextTurva};
-  }
-
   td {
     -webkit-hyphens: auto;
     hyphens: auto;
     color: ${colorSecondary};
   }
 
-  &.duet-theme-turva td {
-    color: ${colorSecondaryTurva};
-  }
-
   th {
     font-weight: ${fontWeightSemiBold};
     line-height: ${lineHeightSmall};
@@ -84,19 +76,11 @@ duet-table {
     text-align: left;
   }
 
-  &.duet-theme-turva th {
-    color: ${colorGrayDarkTurva};
-  }
-
   tbody th {
     font-weight: ${fontWeightSemiBold};
     color: ${colorSecondary};
   }
 
-  &.duet-theme-turva tbody th {
-    color: ${colorSecondaryTurva};
-  }
-
   & .duet-table-action-row {
     & td:last-child {
       justify-self: end;
@@ -148,10 +132,6 @@ duet-table {
     }
   }
 
-  &.duet-theme-turva td span.duet-table-cell-heading {
-    color: ${colorSecondaryTurva};
-  }
-
   tbody td,
   tbody th,
   tfoot td {
@@ -191,10 +171,6 @@ duet-table {
     thead th {
       border-bottom: 1px solid ${colorGrayLight};
     }
-
-    &.duet-theme-turva thead th {
-      border-bottom-color: ${colorGrayLightTurva};
-    }
   }
 
   tbody:not(:first-of-type) th {
@@ -205,26 +181,14 @@ duet-table {
     background: rgba(4, 81, 128, 0.04);
   }
 
-  &.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
-    background: rgba(${rgbable(colorSecondaryTurva)}, 0.04);
-  }
-
   tbody:not(:only-of-type) tr:nth-of-type(even) {
     background: rgba(4, 81, 128, 0.04);
   }
 
-  &.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
-    background: rgba(${rgbable(colorSecondaryTurva)}, 0.04);
-  }
-
   tfoot td {
     border-top: 1px solid ${colorGrayLight};
   }
 
-  &.duet-theme-turva tfoot td {
-    border-top-color: ${colorGrayLightTurva};
-  }
-
   &.duet-table-flattened {
     tbody:not(:first-of-type) th {
       padding-top: ${spaceLarge} !important;
@@ -243,10 +207,6 @@ duet-table {
         border-top: 1px solid ${colorGrayLight};
       }
     }
-
-    &.duet-theme-turva tfoot tr {
-      border-top-color: ${colorGrayLightTurva};
-    }
   }
 }
 
@@ -264,19 +224,13 @@ duet-table {
     }
   }
 
-  &.duet-theme-turva th {
-    border-bottom-color: ${colorGrayDarkerTurva};
-  }
+  
 
   tbody th {
     padding-top: calc(${spaceLarge} * 2) !important;
     border-bottom-color: ${colorGrayLight};
   }
 
-  &.duet-theme-turva tbody th {
-    border-bottom-color: ${colorGrayLightTurva};
-  }
-
   td {
     padding: ${spaceMedium} !important;
 
@@ -293,10 +247,6 @@ duet-table {
     border-bottom: 1px solid ${colorGrayLight};
   }
 
-  &.duet-theme-turva tbody td {
-    border-bottom-color: ${colorGrayLightTurva};
-  }
-
   &.duet-table-flattened {
     tbody:first-of-type th {
       padding-top: 0 !important;
@@ -331,10 +281,6 @@ duet-table {
     tbody tr {
       border-bottom: 1px solid ${colorGrayLight};
     }
-
-    &.duet-theme-turva tbody tr {
-      border-bottom-color: ${colorGrayLightTurva};
-    }
   }
 }
 
@@ -364,10 +310,6 @@ duet-table {
     tfoot {
       border-top: 1px solid ${colorGrayLight};
     }
-
-    &.duet-theme-turva tfoot {
-      border-top-color: ${colorGrayLightTurva};
-    }
   }
 }
 
@@ -398,10 +340,6 @@ duet-table {
     tfoot {
       border-top: 1px solid ${colorGrayLight};
     }
-
-    &.duet-theme-turva tfoot {
-      border-top-color: ${colorGrayLightTurva};
-    }
   }
 }
 .duet-table-scrollable {
@@ -416,10 +354,6 @@ duet-table {
 
 .duet-table-selected-column {
   background: rgba(${rgbable(colorPrimary)}, 0.08);
-
-  .duet-theme-turva & {
-    background: rgba(${rgbable(colorGrayDarkerTurva)}, 0.08);
-  }
 }
 
 .duet-table-sortable {
@@ -432,10 +366,6 @@ duet-table {
     tfoot {
       border-top: 1px solid ${colorGrayLight};
     }
-
-    &.duet-theme-turva tfoot {
-      border-top-color: ${colorGrayLightTurva};
-    }
   }
 }
 
@@ -479,66 +409,92 @@ duet-table {
       grid-column: 2;
     }
   }
+}
+  
+duet-table.duet-theme-turva table {
+  font-family: ${fontFamilyTextTurva};
+}
 
-  duet-table.duet-theme-turva2 {
-    &.duet-theme-turva td {
-      color: $color-turva2-gray-900;
-    }
+duet-table.duet-theme-turva td {
+  color: ${colorTurvaGray900};
+}
 
-    &.duet-theme-turva tbody th {
-      color: $color-turva2-gray-900;
-    }
+duet-table.duet-theme-turva th {
+  color: ${colorGrayDarkTurva};
+}
 
-    &.duet-table-striped.duet-theme-turva.duet-table-sticky thead {
-      th,
-      td {
-        border-bottom-color: $color-turva-nude-100;
-      }
-    }
+duet-table.duet-theme-turva tbody th {
+  color: ${colorTurvaGray900};
+}
 
-    &.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
-      background: rgba($color-turva2-gray-900, 0.04);
-    }
+duet-table.duet-theme-turva td span.duet-table-cell-heading {
+  color: ${colorSecondaryTurva};
+}
 
-    &.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
-      background: rgba($color-turva2-gray-900, 0.04);
-    }
+duet-table.duet-table-striped.duet-theme-turva.duet-table-sticky thead {
+  th,
+  td {
+    border-bottom-color: ${colorGrayLightTurva};
+  }
+}
 
-    &.duet-table-striped.duet-theme-turva tfoot td {
-      border-top-color: $color-turva-nude-100;
-    }
+duet-table.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
+  background: rgba(${rgbable(colorTurvaGray900)}, 0.04);
+}
 
-    &.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr {
-      border-top-color: $color-turva-nude-100;
-    }
+duet-table.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
+  background: rgba(${rgbable(colorTurvaGray900)}, 0.04);
+}
 
-    &.duet-table-plain.duet-theme-turva tbody {
-      th,
-      td {
-        border-bottom-color: $color-turva-nude-100;
-      }
-    }
+duet-table.duet-table-striped.duet-theme-turva tfoot td {
+  border-top-color: ${colorGrayLightTurva};
+}
 
-    &.duet-table-plain.duet-theme-turva tbody td {
-      border-bottom-color: $color-turva-nude-100;
-    }
+duet-table.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr {
+  border-top-color: ${colorGrayLightTurva};
+}
 
-    &.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr {
-      border-bottom-color: $color-turva-nude-100;
-    }
+duet-table.duet-table-plain.duet-theme-turva tbody {
+  th,
+  td {
+    border-bottom-color: ${colorGrayLightTurva};
+  }
+}
 
-    &.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot {
-      border-top-color: $color-turva-nude-100;
-    }
+duet-table.duet-table-plain.duet-theme-turva tbody td {
+  border-bottom-color: ${colorGrayLightTurva};
+}
 
-    &.duet-table-fixed.duet-theme-turva:not(.duet-table-flattened) tfoot {
-      border-top-color: $color-turva-nude-100;
-    }
+duet-theme-turva.duet-table-plain th, duet-theme-turva.duet-table-fixed th, duet-theme-turva.duet-table-minimal th {
+  border-bottom-color: ${colorGrayDarkerTurva};
+}
 
-    &.duet-table-sortable.duet-theme-turva:not(.duet-table-flattened) tfoot {
-      border-top-color: $color-turva-nude-100;
-    }
-  }
+duet-theme-turva.duet-table-plain tbody th, duet-theme-turva.duet-table-fixed tbody th, duet-theme-turva.duet-table-minimal tbody th {
+  border-bottom-color: ${colorGrayLightTurva};
+}
+
+.duet-table-flattened.duet-table-plain.duet-theme-turva tbody tr {
+  border-bottom-color: ${colorGrayLightTurva};
+}
+
+.duet-theme-turva .duet-table-selected-column {
+  background: rgba(${rgbable(colorGrayDarkerTurva)}, 0.08);
+}
+
+duet-table.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr {
+  border-bottom-color: ${colorGrayLightTurva};
+}
+
+duet-table.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot {
+  border-top-color: ${colorGrayLightTurva};
+}
+
+duet-table.duet-table-fixed.duet-theme-turva:not(.duet-table-flattened) tfoot {
+  border-top-color: ${colorGrayLightTurva};
+}
+
+duet-table.duet-table-sortable.duet-theme-turva:not(.duet-table-flattened) tfoot {
+  border-top-color: ${colorGrayLightTurva};
 }
 `.replace(/[\n\r\t]/gm, "");
 export function createStyles(element) {

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

@@ -144,7 +144,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: 'fda81d8548a6180298f6e227832f9c7105a68736', class: {
+        return (h(Host, { key: 'a1dd7fa3685f9dba8b9e5dca8a0fd24c14431658', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -153,7 +153,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: 'ac3ae69d0a1141e1feacd1bdf8fb3ba9e9e89080' })));
+            } }, h("slot", { key: '3f4f49a2dc93f99278caa0089c0305a7049817e6' })));
     }
     static get is() { return "duet-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -178,127 +178,75 @@ duet-tooltip,
   background: rgb(255, 255, 255);
   border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
-  transition: 150ms ease;
 }
 .duet-textarea:focus {
   outline: 2px solid;
   outline-offset: 0;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva, .duet-theme-turva2 .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 0;
   outline-color: rgba(53, 79, 101, 0.8);
 }
-.duet-theme-turva .duet-textarea {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(23, 42, 59);
-  border-color: rgb(120, 145, 164);
-}
 .has-error .duet-textarea {
-  border-color: rgb(214, 28, 82) !important;
-}
-.duet-theme-turva.has-error .duet-textarea {
+  outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
   border-color: rgb(214, 28, 82) !important;
 }
 .duet-textarea[rows] {
   min-height: auto;
 }
-.duet-textarea::-webkit-input-placeholder {
-  color: rgb(98, 121, 138);
-  opacity: 1 !important;
-  transition: color 300ms ease;
-}
-.duet-theme-turva .duet-textarea::-webkit-input-placeholder {
-  color: rgb(120, 145, 164);
-}
-.duet-textarea:focus::-webkit-input-placeholder {
-  color: rgb(181, 198, 208);
-}
-.duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder {
-  color: rgb(178, 194, 205);
-}
-.duet-textarea::-moz-placeholder {
+.duet-textarea::placeholder {
   color: rgb(98, 121, 138);
   opacity: 1 !important;
 }
-.duet-theme-turva .duet-textarea::-moz-placeholder {
-  color: rgb(120, 145, 164);
-}
-.duet-textarea:focus::-moz-placeholder {
-  color: rgb(181, 198, 208);
-}
-.duet-theme-turva .duet-textarea:focus::-moz-placeholder {
-  color: rgb(178, 194, 205);
-}
-.duet-textarea:-ms-input-placeholder {
-  color: rgb(98, 121, 138);
-}
-.duet-theme-turva .duet-textarea:-ms-input-placeholder {
-  color: rgb(120, 145, 164);
-}
-.duet-textarea:focus:-ms-input-placeholder {
+.duet-textarea:focus::placeholder {
   color: rgb(181, 198, 208);
 }
-.duet-theme-turva .duet-textarea:focus:-ms-input-placeholder {
-  color: rgb(178, 194, 205);
-}
 .duet-textarea[disabled] {
-  color: rgb(98, 121, 138) !important;
+  color: rgb(127, 150, 165) !important;
   cursor: not-allowed !important;
+  outline: none !important;
   background: rgb(245, 248, 250) !important;
-  border-color: rgb(245, 248, 250) !important;
-}
-.duet-theme-turva .duet-textarea[disabled] {
-  color: rgb(120, 145, 164) !important;
-  background: rgb(245, 246, 247) !important;
-  border-color: rgb(245, 246, 247) !important;
-}
-.duet-textarea[disabled]::-webkit-input-placeholder {
-  color: rgb(8, 42, 77);
+  border-color: rgb(181, 198, 208) !important;
   opacity: 1 !important;
-  transition: color 300ms ease;
+  -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
-.duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder {
-  color: rgb(23, 42, 59);
-}
-.duet-textarea[disabled]::-moz-placeholder {
+.duet-textarea[disabled]::placeholder {
   color: rgb(8, 42, 77);
   opacity: 1 !important;
 }
-.duet-theme-turva .duet-textarea[disabled]::-moz-placeholder {
-  color: rgb(23, 42, 59);
-}
-.duet-textarea[disabled]:-ms-input-placeholder {
-  color: rgb(8, 42, 77);
-}
-.duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder {
-  color: rgb(23, 42, 59);
-}
-.duet-textarea:hover:not(:disabled) {
+.duet-textarea:hover:not(:disabled):not(:focus) {
   outline: 2px solid;
-  outline-color: rgb(98, 121, 138);
+  outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-textarea:hover:not(:disabled), .duet-textarea:hover:not(:disabled).duet-theme-turva, .duet-theme-turva2 .duet-textarea:hover:not(:disabled), .duet-textarea:hover:not(:disabled).duet-theme-turva2 {
-  outline-color: rgb(120, 145, 164);
+.duet-theme-turva .duet-textarea:hover:not(:disabled):not(:focus), .duet-textarea:hover:not(:disabled):not(:focus).duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
 }
-.has-error .duet-textarea:hover:not(:disabled) {
-  outline: 1px solid;
-  outline-color: rgb(214, 28, 82);
+.has-error .duet-textarea:hover:not(:disabled):not(:focus) {
   outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
 }
 .duet-textarea:focus {
-  border-color: rgb(0, 119, 179);
-  transition: none;
+  outline: 2px solid;
+  outline-color: rgb(0, 119, 179) !important;
+  outline-offset: -1px;
 }
-.duet-theme-turva .duet-textarea:focus {
-  border-color: rgb(23, 42, 59);
+.duet-theme-turva .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva {
+  outline-color: rgb(23, 42, 59) !important;
 }
 .has-error .duet-textarea:focus {
-  outline: 1px solid;
-  outline-color: rgb(214, 28, 82);
   outline-offset: -1px;
+  background-color: rgb(255, 240, 243) !important;
+  border-color: rgb(214, 28, 82) !important;
+  outline-width: 2px;
+  outline-color: rgb(214, 28, 82) !important;
+  background: rgb(255, 255, 255) !important;
 }
 .duet-textarea:not(:focus):not(:hover):invalid {
   outline: none;
@@ -313,16 +261,9 @@ duet-tooltip,
   display: block;
   margin-top: 8px;
 }
-.duet-theme-turva .duet-textarea-help {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(120, 145, 164);
-}
 .has-error .duet-textarea-help {
   color: rgb(214, 28, 82);
 }
-.duet-theme-turva.has-error .duet-textarea-help {
-  color: rgb(214, 28, 82);
-}
 
 .duet-label-hidden .duet-internal-label {
   position: absolute;
@@ -340,34 +281,27 @@ duet-tooltip,
   margin: 8px 0 0 auto;
 }
 
-:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea {
+.duet-theme-turva .duet-textarea {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 42, 59);
+  border-color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus {
-  border-color: rgb(23, 42, 59);
-}
-:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled] {
-  background: rgb(245, 246, 247) !important;
-  border-color: rgb(245, 246, 247) !important;
-}
-:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:-webkit-input-placeholder {
+.duet-theme-turva .duet-textarea::placeholder {
   color: rgb(120, 145, 164);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder {
-  color: rgb(178, 194, 205);
-}
-:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus::-moz-placeholder {
-  color: rgb(178, 194, 205);
+.duet-theme-turva .duet-textarea:focus {
+  border-color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus:-ms-input-placeholder {
+.duet-theme-turva .duet-textarea:focus::placeholder {
   color: rgb(178, 194, 205);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder {
+.duet-theme-turva .duet-textarea[disabled]::placeholder {
   color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-moz-placeholder {
-  color: rgb(23, 42, 59);
+.duet-theme-turva.has-error .duet-textarea-help {
+  color: rgb(214, 28, 82);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder {
-  color: rgb(23, 42, 59);
+.duet-theme-turva .duet-textarea-help {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(120, 145, 164);
 }

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

@@ -247,17 +247,17 @@ export class DuetTextarea {
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: '48030acc05f6f8415df8753151991eb3c83ae370', class: {
+        return (h(Host, { key: '628cfbee772dabe02ee28e28b45ac044ba306433', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: 'e8cac00d84bfbef67bb1f30037bb986905fc2d94', class: {
+            } }, h("div", { key: 'd3b269724ee0b454556b85713e4ce8d0da937121', class: {
                 "duet-textarea-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h(DuetInternalLabel, { key: '2f25117dc9dfce852022a09efb8a1b0c2117bb0c', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'b5c614194a8699068a2b9c9156cc2a1955d8ae8c', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '0a72de201a51d22df2604f3fa1a5fba77f9de897', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'fc1baf023f9c4b81131de5244bfb73c925ab265d', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '3395893df5eacc499f082eade175e6bb0ce0512c', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '6a71fad928ba647c069c05439e86a5e6eefd4e40', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '28c7559a63890bb80d6503e3028ea430f24c739a', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, 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, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '66ddcb0507cf754111843d5aa871c80ae8d7207e', alignment: "stretch" }, h("duet-grid-item", { key: '79edd18dd19f6500b2c471e960c5fefc1b9492be', margin: "none", fill: true }, h("div", { key: '38d0f75afeefcd4ba8afb2f87802a64885fbc0ea', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'a03fdd80d3a82221abbdeeff8c368d8208efd2b1' }, this.error))), h("duet-grid-item", { key: 'deb6e76efba3354828dd21acd8a362c91c3d2e4f', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '282fe11b68a1bdd7c63b8071cfd37a3e33086bbc', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: '06b481e31a4dad73a6538a943274f898410be541', id: this.characterCountId, class: "visually-hidden-counter" }, this.visuallyHiddenCounterText)))));
+            } }, h(DuetInternalLabel, { key: '61b9d1d31d1c97ec59cc974fd3cf05e99a52c648', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'f50f8d99b9b3459d8b14ad5de3d176e7d995bbde', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'aa111583f2f02af223491081de0ce0aa1d9e513e', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'd229d33d3027940241f0b38348af8c3d79618856', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: 'ef6a5f4d22a441b13f559373096294a657b22b74', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '728f08f538d521047bbc91ccd7bd3434d3e35cb8', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: 'b652877e0466100acb59ddd879bcc8eb3f833649', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, 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, rows: this.rows, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: 'eacd3bbbf8d40c476ed4dbdf5f6d2608d57303d8', alignment: "stretch" }, h("duet-grid-item", { key: '87e2b2af0d568101cb6535822b6b3f665240b080', margin: "none", fill: true }, h("div", { key: 'fe677c931f07c771e5146256ad638317416bfa64', class: "duet-textarea-help duet-textarea-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'dd9d05aac20cd6eda3b66f8117ec74a66ab78a8a' }, this.error))), h("duet-grid-item", { key: '668485a22c325707308e35875136d289b65d8285', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '3911ad43e20c911266a1ee6446e7cbfecbdc6877', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: 'f3f27267532f3f62aec64d0b4b472616accf3bf1', id: this.characterCountId, class: "visually-hidden-counter" }, this.visuallyHiddenCounterText)))));
     }
     static get is() { return "duet-textarea"; }
     static get encapsulation() { return "shadow"; }