@duetds/components 10.0.0-alpha.8 → 10.0.0

package/lib/esm/duet-textarea.entry.js

@@ -1,26 +1,24 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fa810c91.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { D as DuetInternalLabel } from './label-b3694b48.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { c as cleanValue } from './input-utils-85681162.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-35eb1c9f.js';
-import { c as checkNamedSlotElement, p as proxyInputToSlot } from './slot-utils-b2101c56.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-EZOAO_vc.js';
+import { i as inheritGlobalTheme } from './themeable-component-spmVa3d3.js';
+import { D as DuetInternalLabel } from './label-Dji6BDQC.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { c as cleanValue } from './input-utils-CLDy7YaM.js';
+import { d as debounce } from './js-utils-BlUsLmbQ.js';
+import { a as getLanguage, f as formatNumber } from './language-utils-COd-eoxb.js';
+import { c as checkNamedSlotElement, p as proxyInputToSlot } from './slot-utils-BSu3Mnho.js';
+import './string-utils-C6E9F6QT.js';
 
-const duetTextareaCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.duet-theme-turva{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, 28, 58)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:block;width:100%;max-width:100%;text-align:left}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}:host.duet-expand{width:100% !important}}:host(.duet-m-0){margin:0 !important}duet-tooltip,::slotted(duet-tooltip){position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip,::slotted(duet-tooltip){position:relative;top:4px;right:auto}}.duet-textarea-container{position:relative;width:100%;height:100%}.duet-textarea-container .duet-input-top-caption{display:none}.duet-textarea-container.duet-input-top-caption-shown .duet-input-top-caption{display:flex !important}.duet-textarea-wrapper{position:relative}.duet-textarea-placeholder{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255)}.duet-textarea{padding:15px !important;position:relative;z-index:100;display:block;width:100%;min-width:8rem;min-height:160px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(8, 42, 77);resize:vertical;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:4px;transition:150ms ease}.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, 28, 58);border-color:rgb(143, 147, 158)}.has-error .duet-textarea{border-color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-textarea{border-color:rgb(214, 28, 82) !important}.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(143, 147, 158)}.duet-textarea:focus::-webkit-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder{color:rgb(199, 202, 207)}.duet-textarea::-moz-placeholder{color:rgb(98, 121, 138);opacity:1 !important}.duet-theme-turva .duet-textarea::-moz-placeholder{color:rgb(143, 147, 158)}.duet-textarea:focus::-moz-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus::-moz-placeholder{color:rgb(199, 202, 207)}.duet-textarea:-ms-input-placeholder{color:rgb(98, 121, 138)}.duet-theme-turva .duet-textarea:-ms-input-placeholder{color:rgb(143, 147, 158)}.duet-textarea:focus:-ms-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus:-ms-input-placeholder{color:rgb(199, 202, 207)}.duet-textarea[disabled]{color:rgb(98, 121, 138) !important;cursor:not-allowed !important;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-theme-turva .duet-textarea[disabled]{color:rgb(143, 147, 158) !important;background:rgb(245, 247, 250) !important;border-color:rgb(245, 247, 250) !important}.duet-textarea[disabled]::-webkit-input-placeholder{color:rgb(8, 42, 77);opacity:1 !important;transition:color 300ms ease}.duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder{color:rgb(23, 28, 58)}.duet-textarea[disabled]::-moz-placeholder{color:rgb(8, 42, 77);opacity:1 !important}.duet-theme-turva .duet-textarea[disabled]::-moz-placeholder{color:rgb(23, 28, 58)}.duet-textarea[disabled]:-ms-input-placeholder{color:rgb(8, 42, 77)}.duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder{color:rgb(23, 28, 58)}.duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #909599}.duet-theme-turva .duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #747475}.has-error .duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #e55039}.duet-textarea:focus{border-color:rgb(0, 119, 179);outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva .duet-textarea:focus{border-color:rgb(23, 28, 58);box-shadow:0 0 0 1px #171c3a !important}.has-error .duet-textarea:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-textarea:focus{box-shadow:0 0 0 1px #e55039}.duet-textarea:not(:focus):not(:hover):invalid{box-shadow:none}.duet-textarea-help{font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;line-height:1.25}.duet-textarea-help span{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(143, 147, 158)}.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;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-character-count{display:block;margin:8px 0 0 auto}";
-const DuetTextareaStyle0 = duetTextareaCss;
+const duetTextareaCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.duet-theme-turva{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, 28, 58)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-right:16px !important;margin-bottom:12px !important;display:block;width:100%;max-width:100%;text-align:left}:host:last-child,:host:last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host:last-of-type:not(:last-child){margin-right:16px !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}:host.duet-expand{width:100% !important}}:host(.duet-m-0){margin:0 !important}duet-tooltip,::slotted(duet-tooltip){position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip,::slotted(duet-tooltip){position:relative;top:4px;right:auto}}.duet-textarea-container{position:relative;width:100%;height:100%}.duet-textarea-container .duet-input-top-caption{display:none}.duet-textarea-container.duet-input-top-caption-shown .duet-input-top-caption{display:flex !important}.duet-textarea-wrapper{position:relative}.duet-textarea-placeholder{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255)}.duet-textarea{padding:15px !important;position:relative;z-index:100;display:block;width:100%;min-width:8rem;min-height:160px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.25;color:rgb(8, 42, 77);resize:vertical;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{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, 28, 58);border-color:rgb(143, 147, 158)}.has-error .duet-textarea{border-color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-textarea{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(143, 147, 158)}.duet-textarea:focus::-webkit-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder{color:rgb(199, 202, 207)}.duet-textarea::-moz-placeholder{color:rgb(98, 121, 138);opacity:1 !important}.duet-theme-turva .duet-textarea::-moz-placeholder{color:rgb(143, 147, 158)}.duet-textarea:focus::-moz-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus::-moz-placeholder{color:rgb(199, 202, 207)}.duet-textarea:-ms-input-placeholder{color:rgb(98, 121, 138)}.duet-theme-turva .duet-textarea:-ms-input-placeholder{color:rgb(143, 147, 158)}.duet-textarea:focus:-ms-input-placeholder{color:rgb(181, 198, 208)}.duet-theme-turva .duet-textarea:focus:-ms-input-placeholder{color:rgb(199, 202, 207)}.duet-textarea[disabled]{color:rgb(98, 121, 138) !important;cursor:not-allowed !important;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important}.duet-theme-turva .duet-textarea[disabled]{color:rgb(143, 147, 158) !important;background:rgb(245, 247, 250) !important;border-color:rgb(245, 247, 250) !important}.duet-textarea[disabled]::-webkit-input-placeholder{color:rgb(8, 42, 77);opacity:1 !important;transition:color 300ms ease}.duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder{color:rgb(23, 28, 58)}.duet-textarea[disabled]::-moz-placeholder{color:rgb(8, 42, 77);opacity:1 !important}.duet-theme-turva .duet-textarea[disabled]::-moz-placeholder{color:rgb(23, 28, 58)}.duet-textarea[disabled]:-ms-input-placeholder{color:rgb(8, 42, 77)}.duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder{color:rgb(23, 28, 58)}.duet-textarea:hover:not(:disabled){outline:2px solid;outline-color:rgb(98, 121, 138);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)}.has-error .duet-textarea:hover:not(:disabled){outline:1px solid;outline-color:rgb(214, 28, 82);outline-offset:-1px}.duet-textarea:focus{border-color:rgb(0, 119, 179);transition:none}.duet-theme-turva .duet-textarea:focus{border-color:rgb(23, 28, 58)}.has-error .duet-textarea:focus{outline:1px solid;outline-color:rgb(214, 28, 82);outline-offset:-1px}.duet-textarea:not(:focus):not(:hover):invalid{outline:none}.duet-textarea-help{font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;line-height:1.25}.duet-textarea-help span{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(143, 147, 158)}.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;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip:rect(0 0 0 0)}.duet-character-count{display:block;margin:8px 0 0 auto}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea{color:rgb(23, 42, 59)}: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{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)}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus:-ms-input-placeholder{color:rgb(178, 194, 205)}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-moz-placeholder{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder{color:rgb(23, 42, 59)}";
 
-const CharacterCount = ({ value, maxlength, label, theme }) => {
+const CharacterCount = ({ value, maxlength, theme }) => {
     if (maxlength == null) {
         return;
     }
     const length = value.length;
-    const remainder = Math.max(maxlength - length, 0); // ensure we never have negative numbers
-    const isApproachingLimit = remainder / maxlength <= 0.1; // <= 10% chars remaining
-    return (h("div", { class: "duet-character-count" }, h("duet-caption", { margin: "none", theme: theme, size: "small" }, h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", class: "duet-textarea-counter-remaining" }, isApproachingLimit && `${remainder} ${label}`), h("span", { "aria-hidden": "true" }, length, "/", maxlength))));
+    return (h("div", { class: "duet-character-count" }, h("duet-caption", { margin: "none", theme: theme, size: "small" }, h("span", { "aria-hidden": "true" }, length, "/", maxlength))));
 };
 const DuetTextarea = class {
     constructor(hostRef) {
@@ -39,12 +37,103 @@ const DuetTextarea = class {
         this.labelId = createID("DuetLabel");
         this.errorId = createID("DuetError");
         this.characterCountId = createID("DuetCharacterCount");
+        this.visuallyHiddenCounterDebounceMS = 1000;
         this.disallowPatternRegex = null;
-        this.counterLabelDefaults = {
-            fi: "merkkiä jäljellä",
-            en: "characters remaining",
-            sv: "tecken kvar",
+        this.charactersRemainingLabel = {
+            // The comma in Finnish is to prevent use of partitive case for remaining
+            fi: "{remaining}, merkkiä jäljellä {max}{postfix}.",
+            en: "{remaining} characters remaining out of {max}.",
+            sv: "{remaining} tecken kvar av {max}.",
         };
+        this.language = getLanguage();
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Aria Details of the component
+         */
+        this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
+        this.accessibleDescription = undefined;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
+        this.accessibleLiveError = "polite";
+        /**
+         * Theme of the textarea.
+         */
+        this.theme = "";
+        /**
+         * Expands the textarea to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Makes the textarea component disabled. This prevents users from being able
+         * to interact with the textarea, and conveys its inactive state to assistive
+         * technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the textarea is required or not. Please note that this is required for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Label for the textarea.
+         */
+        this.label = "label";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * If form input field has a placeholder text, and user types anything (causing the text to dissapear),
+         * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+         */
+        this.echoPlaceholder = false;
+        /**
+         * Display the textarea in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        this.tooltip = "";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.tooltipDirection = "auto";
+        /**
+         * Value of the textarea.
+         */
+        this.value = "";
+        /**
+         * A regular expression that matches any characters which should be *disallowed*.
+         * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.
+         * e.g. the following will disallow any non-numeric characters `[^0-9]`
+         */
+        this.disallowPattern = null;
+        /**
+         * Display character counter. Must be used in conjunction with  **maxlength** property.
+         */
+        this.counter = false;
+        /**
+         * @deprecated, the visually hidden counter label is no longer changeable
+         */
+        this.counterLabel = "";
         /**
          * Component event handling.
          */
@@ -76,15 +165,23 @@ const DuetTextarea = class {
             });
         };
         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,
                 component: "duet-textarea",
             });
         };
+        /**
+         * When the character limit has been reached and key is pressed, switch the
+         * visually hidden label temprorily to empty so it is re-read.
+         */
+        this.handleKeyDown = () => {
+            var _a;
+            if (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === this.maxlength) {
+                this.visuallyHiddenCounterText = "";
+                setTimeout(() => this.updateVisuallyHiddenCounterText(), 10);
+            }
+        };
         this.getDescribedBy = () => {
             const describedBy = [];
             if (this.isCaptionVisible && this.topCaptionId) {
@@ -96,44 +193,22 @@ const DuetTextarea = class {
             if (this.error) {
                 describedBy.push(this.errorId);
             }
-            if (this.counter) {
+            if (this.counter && this.maxlength) {
                 describedBy.push(this.characterCountId);
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
-        this.margin = "auto";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleAutocomplete = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleLiveError = "polite";
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.theme = "";
-        this.expand = false;
-        this.disabled = false;
-        this.identifier = undefined;
-        this.required = false;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.labelHidden = false;
-        this.name = undefined;
-        this.placeholder = undefined;
-        this.caption = undefined;
-        this.echoPlaceholder = false;
-        this.maxlength = undefined;
-        this.minlength = undefined;
-        this.error = "";
-        this.role = undefined;
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
-        this.value = "";
-        this.disallowPattern = null;
-        this.counter = false;
-        this.counterLabel = getLocaleString(this.counterLabelDefaults);
+    }
+    /**
+     * This is a proxy for the enclosed native textarea's validity
+     */
+    get validity() {
+        return this.nativeInput.validity;
+    }
+    valueChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            debounce(() => this.updateVisuallyHiddenCounterText(), this.visuallyHiddenCounterDebounceMS)();
+        }
     }
     disallowedPatternChange() {
         this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
@@ -145,19 +220,22 @@ const DuetTextarea = class {
         inheritGlobalTheme(this);
         this.disallowedPatternChange();
         this.isCaptionVisible = !!this.caption;
+        this.updateVisuallyHiddenCounterText();
         checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         if (this.counter && this.maxlength == null) {
             console.warn("[DUET WARNING]: counter will only take effect if maxlength is set");
         }
     }
-    connectedCallback() {
-        connectLanguageChangeObserver(this, {
-            prop: "counterLabel",
-            defaults: "counterLabelDefaults",
-        });
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
+    updateVisuallyHiddenCounterText() {
+        var _a;
+        const remaining = formatNumber(Math.max(this.maxlength - (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0), 0));
+        // postfix is used only in Finnish
+        // with "a" for full hundreds or numbers ending with 2, 3, 6, or 8; with "ä" otherwise
+        const postfix = this.maxlength % 100 === 0 || [2, 3, 6, 8].includes(this.maxlength % 10) ? ":sta" : ":stä";
+        this.visuallyHiddenCounterText = this.charactersRemainingLabel[this.language]
+            .replace("{remaining}", remaining)
+            .replace("{max}", formatNumber(this.maxlength))
+            .replace("{postfix}", postfix);
     }
     componentDidRender() {
         proxyInputToSlot(this.element, this.proxyId, this.name, this.value, this.required);
@@ -175,25 +253,24 @@ const DuetTextarea = class {
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: '9de3a488ae655f5d6cf9a5aa71368827ac2667a3', class: {
+        return (h(Host, { key: '6b4a9a29634b3b4eebba44aa1329c044ad4627e0', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: 'fdfefe7ce23102c9e5aaaef53814d3027504856f', class: {
+            } }, h("div", { key: 'fc6fff054e8c331eaa64eb81ea38fec26ccf2623', 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: '31924f3d113d02e2e7a9a3a0963b91cc09d33fdc', 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: 'd1e0d879d2207a331853d015afcbbf7eee58ae3a', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'ca5cf4791d6929903a047564ba7233e5cb521b53', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'c6b8045ffe06481f564bac05f5c134d76c0a80ec', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: 'f300e8cabf5750ea73421abe15e04049ae4ad02e', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'c8f50dc4d1a7246241dbb9f01de879a5f29655f6', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '08af0fdb58117b47d65e1f27d56ee3f33a07944e', 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", { key: 'f2c8d0a765743945be3b9ffdb91df63e02307f4a', alignment: "stretch" }, h("duet-grid-item", { key: '9c3e34bd24ae7f34e3f8da1425cbeb68090f9524', margin: "none", fill: true }, h("div", { key: '6dd0096a8e03199e273cdd72c21c0b52b7c6a998', class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '40ec239fe62581029385fefd5367ca0c56bd260d' }, this.error))), h("duet-grid-item", { key: 'e755534d7aa88d03f9b5fc1d3a6fb0eb0d53bdda', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: '2238da2d8f4a66c378e08bc032f52a4a63d3ebaa', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: 'f1b005a103b371724c880ded8aba0af1024b6355', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
-                this.hiddenCounterLabel = el;
-            } })))));
+            } }, h(DuetInternalLabel, { key: '72a397fea607b1bf78eb044d2edfe908b531c196', 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: 'df27e380533776bbd55e322ee553a4e7307a9c25', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '0ad23242a566add6660b8d0d05f0945f2881c736', name: "tooltip" }), this.caption && (h("duet-caption", { key: '2140852f453a515fdc400664083170df2c5d25b8', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '3d8086ad2a9120553f7d9348a12f122513743f9e', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '41d5d3fbe9b850ae576456b65c38e70d7b54d1c4', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: '958b5b54572eeeb9a14cccc84768c94ac8934751', 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: '2eeb3e5cc00bb5323ace41bc47c8704065ed9cf8', alignment: "stretch" }, h("duet-grid-item", { key: 'df795c73d5e1d02b95780b00a3109a08af5265d1', margin: "none", fill: true }, h("div", { key: '0ca123aee248bdefecb272d01744496e14fca789', 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: 'fab26ce8771f27cc8bd7df1b32f027f7e1a77f5c' }, this.error))), h("duet-grid-item", { key: 'af06a4534964dea7090defa29dcae06c463f987a', margin: "none", class: "duet-character-count-caption" }, this.counter && h(CharacterCount, { key: '9feddf09bed0a8dba0e3ec415e02a895e6cf20b7', theme: this.theme, value: this.value, maxlength: this.maxlength }))), this.counter && this.maxlength && (h("duet-visually-hidden", { key: '923f821ec7eea31d6538bec8e9e80d5bed1a8e85', id: this.characterCountId, class: "visually-hidden-counter" }, this.visuallyHiddenCounterText)))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
+        "value": ["valueChange"],
         "disallowPattern": ["disallowedPatternChange"]
     }; }
 };
-DuetTextarea.style = DuetTextareaStyle0;
+DuetTextarea.style = duetTextareaCss;
 
 export { DuetTextarea as duet_textarea };

package/lib/esm/duet-toggle.entry.js

@@ -1,15 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fa810c91.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { D as DuetInternalLabel } from './label-b3694b48.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-daf80d44.js';
-import { p as proxyInputToSlot } from './slot-utils-b2101c56.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-EZOAO_vc.js';
+import { i as inheritGlobalTheme } from './themeable-component-spmVa3d3.js';
+import { D as DuetInternalLabel } from './label-Dji6BDQC.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
+import { p as proxyInputToSlot } from './slot-utils-BSu3Mnho.js';
 
-const duetToggleCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.duet-theme-turva{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, 28, 58)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;-webkit-user-select:none;user-select:none;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}duet-label{display:block !important;width:100% !important}.duet-side-label{display:flex;gap:12px;align-items:center}.duet-side-label duet-label{width:auto !important}.duet-reverse-label{flex-direction:row-reverse}.duet-switch{position:relative;display:block;width:48px;height:28px}.duet-switch input{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-switch input:checked+.duet-slider{background-color:rgb(0, 119, 179);box-shadow:none}.duet-theme-turva .duet-switch input:checked+.duet-slider{background-color:rgb(198, 12, 48)}.duet-switch input:checked+.duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:-1px 0 2px #004467;transform:translateX(20px)}.duet-theme-turva .duet-switch input:checked+.duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:-1px 0 2px #660619}.duet-switch input:disabled+.duet-slider{cursor:default}.duet-switch input:disabled+.duet-slider::before{box-shadow:none}.duet-theme-turva .duet-switch input:disabled+.duet-slider::before{box-shadow:none}.duet-switch input:disabled:not(:checked)+.duet-slider{background:#bfcbd2}.duet-switch input:disabled:not(:checked)+.duet-slider::before{background:rgb(255, 255, 255);box-shadow:none}.duet-theme-turva .duet-switch input:disabled:not(:checked)+.duet-slider{background:#c7c9cf}.duet-theme-turva .duet-switch input:disabled:not(:checked)+.duet-slider::before{background:rgb(255, 255, 255)}.duet-switch input:disabled:checked+.duet-slider{background:#80bbd9}.duet-theme-turva .duet-switch input:disabled:checked+.duet-slider{background:#e38698}:host(.user-is-tabbing) .duet-switch input:focus+.duet-slider{box-shadow:0 0 0 1px #fff, 0 0 0 3px rgba(0, 119, 179, 0.75)}:host(.user-is-tabbing) .duet-theme-turva .duet-switch input:focus+.duet-slider{box-shadow:0 0 0 1px #fff, 0 0 0 3px rgba(23, 28, 58, 0.75)}.duet-slider{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;background-color:rgb(127, 150, 165);border-radius:24px;transition:background-color 300ms ease}.duet-slider::before{position:absolute;bottom:2px;left:2px;width:24px;height:24px;content:\"\";background-color:rgb(255, 255, 255);border-radius:50%;box-shadow:1px 0 2px 0 #5d6266;transition:300ms ease}.duet-theme-turva .duet-slider{background-color:rgb(143, 147, 158)}.duet-theme-turva .duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:1px 0 2px 0 #00334d}";
-const DuetToggleStyle0 = duetToggleCss;
+const duetToggleCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.duet-theme-turva{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, 28, 58)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-right:8px !important;margin-bottom:12px !important;-webkit-user-select:none;user-select:none;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host:last-of-type:not(:last-child){margin-right:8px !important}:host(.duet-m-0){margin:0 !important}duet-label{display:block !important;width:100% !important}.duet-side-label{display:flex;gap:12px;align-items:center}.duet-side-label duet-label{width:auto !important}.duet-reverse-label{flex-direction:row-reverse}.duet-switch{position:relative;display:block;width:48px;height:28px}.duet-switch input{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important}.duet-switch input:checked+.duet-slider{background-color:rgb(0, 119, 179);box-shadow:none}.duet-theme-turva .duet-switch input:checked+.duet-slider{background-color:rgb(198, 12, 48)}.duet-switch input:checked+.duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:-1px 0 2px #004467;transform:translateX(20px)}.duet-theme-turva .duet-switch input:checked+.duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:-1px 0 2px #660619}.duet-switch input:disabled+.duet-slider{cursor:default}.duet-switch input:disabled+.duet-slider::before{box-shadow:none}.duet-theme-turva .duet-switch input:disabled+.duet-slider::before{box-shadow:none}.duet-switch input:disabled:not(:checked)+.duet-slider{background:#bfcbd2}.duet-switch input:disabled:not(:checked)+.duet-slider::before{background:rgb(255, 255, 255);box-shadow:none}.duet-theme-turva .duet-switch input:disabled:not(:checked)+.duet-slider{background:#c7c9cf}.duet-theme-turva .duet-switch input:disabled:not(:checked)+.duet-slider::before{background:rgb(255, 255, 255)}.duet-switch input:disabled:checked+.duet-slider{background:#80bbd9}.duet-theme-turva .duet-switch input:disabled:checked+.duet-slider{background:#e38698}:host(.user-is-tabbing) .duet-switch input:focus+.duet-slider{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-switch input:focus+.duet-slider,:host(.user-is-tabbing) .duet-switch input:focus+.duet-slider.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-switch input:focus+.duet-slider,:host(.user-is-tabbing) .duet-switch input:focus+.duet-slider.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-slider{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;background-color:rgb(127, 150, 165);border-radius:24px;transition:background-color 300ms ease}.duet-slider::before{position:absolute;bottom:2px;left:2px;width:24px;height:24px;content:\"\";background-color:rgb(255, 255, 255);border-radius:50%;box-shadow:1px 0 2px 0 #5d6266;transition:300ms ease}.duet-theme-turva .duet-slider{background-color:rgb(143, 147, 158)}.duet-theme-turva .duet-slider::before{background-color:rgb(255, 255, 255);box-shadow:1px 0 2px 0 #00334d}:host(.duet-theme-turva2) .duet-switch input:checked+.duet-slider{background-color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-switch input:checked+.duet-slider::before{box-shadow:-1px 0 2px #890e26;transform:translateX(20px)}:host(.duet-theme-turva2) .duet-switch input:disabled:checked+.duet-slider{background:#f38ba0}";
 
 const DuetToggle = class {
     constructor(hostRef) {
@@ -21,33 +20,57 @@ const DuetToggle = class {
         this.toggleId = createID("DuetToggle");
         this.proxyId = createID("DuetToggle");
         /**
-         * Component event handling.
+         * Theme of the card.
          */
-        this.onClick = (ev) => {
-            ev.preventDefault();
-            this.setFocus();
-            this.checked = !this.checked;
-        };
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
+        /**
+         * Aria Details of the component
+         */
         this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
         this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
         this.accessibleDescription = undefined;
+        /**
+         * Label for the toggle.
+         */
         this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
+        /**
+         * Position of the label
+         */
         this.labelPosition = "top";
+        /**
+         * Set whether the input is required or not. Please note that this is necessary for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
         this.required = false;
+        /**
+         * Makes the input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
         this.disabled = false;
+        /**
+         * Check state of the checkbox.
+         */
         this.checked = false;
-        this.value = undefined;
-        this.identifier = undefined;
-        this.name = undefined;
-        this.role = undefined;
+        /**
+         * Component event handling.
+         */
+        this.onClick = (ev) => {
+            ev.preventDefault();
+            this.setFocus();
+            this.checked = !this.checked;
+        };
     }
     checkedChanged(isChecked) {
         this.duetChange.emit({
@@ -87,18 +110,18 @@ const DuetToggle = class {
      */
     render() {
         const identifier = this.identifier || this.toggleId;
-        return (h(Host, { key: '6f7b05fd6188f7013f040a7b29c036727facbd85', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '976442fa7eca90d023345dec040d15fadd997d2f', class: {
+        return (h(Host, { key: '5dd02994122156506b124c5fc5b34369770653ee', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'd9ecee8e94677b861f8bdd075a116e4e294ea197', class: {
                 "duet-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-side-label": this.labelPosition !== "top",
                 "duet-reverse-label": this.labelPosition === "right",
-            } }, h(DuetInternalLabel, { key: 'fee270a8fc1611ee7eb82d7622073a2d8756b3a4', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: '70a46c19918167b984a93e60845d4642184a1cc3', class: "duet-switch" }, h("input", { key: '33d9dd7dadc7976393e11011a1a6327bc3193ed0', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { key: 'b0f17ed39c0b77370958141021e9e2ab98399d94', class: "duet-slider" })))));
+            } }, h(DuetInternalLabel, { key: '5c5a5ee2c5ac9e772c2bb8f2aaa822503af728dd', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: '811421a233717397e31a4f3242c92197be133ed3', class: "duet-switch" }, h("input", { key: '1e2fce505e70caf118d61d53d08b0aaff69f3ac3', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { key: 'ca394aa66c3b8be2ad8b5c056ec7c737fcb93c44', class: "duet-slider" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
         "checked": ["checkedChanged"]
     }; }
 };
-DuetToggle.style = DuetToggleStyle0;
+DuetToggle.style = duetToggleCss;
 
 export { DuetToggle as duet_toggle };

package/lib/esm/duet-toolbar-dropdown-link.entry.js

@@ -1,21 +1,34 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-fa810c91.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { f as isEscapeKey } from './keyboard-utils-daf80d44.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-EZOAO_vc.js';
+import { i as inheritGlobalTheme } from './themeable-component-spmVa3d3.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.js';
 
-const duetToolbarDropdownLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%}.duet-toolbar-dropdown-link{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start;height:100%;padding:0.5rem 8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);text-align:center;text-decoration:none}.duet-toolbar-dropdown-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-toolbar-dropdown-link:focus,.duet-toolbar-dropdown-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-toolbar-dropdown-link .label{flex:1;text-align:left}.duet-toolbar-dropdown-link.duet-theme-turva{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, 28, 58)}.duet-toolbar-dropdown-link.active{background:rgb(240, 247, 250)}.duet-toolbar-dropdown-link.active.duet-theme-turva{background:rgb(245, 247, 250)}.duet-toolbar-dropdown-link:hover{background:rgb(228, 241, 247)}.duet-toolbar-dropdown-link:hover.duet-theme-turva{background:rgb(222, 224, 228)}";
-const DuetToolbarDropdownLinkStyle0 = duetToolbarDropdownLinkCss;
+const duetToolbarDropdownLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;width:100%;height:100%}.duet-toolbar-dropdown-link{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start;height:100%;padding:0.5rem 8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);text-align:center;text-decoration:none}.duet-toolbar-dropdown-link:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-toolbar-dropdown-link:focus,.duet-toolbar-dropdown-link:focus.duet-theme-turva,.duet-theme-turva2 .duet-toolbar-dropdown-link:focus,.duet-toolbar-dropdown-link:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-toolbar-dropdown-link .label{flex:1;text-align:left}.duet-toolbar-dropdown-link.duet-theme-turva{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, 28, 58)}.duet-toolbar-dropdown-link.active{background:rgb(240, 247, 250)}.duet-toolbar-dropdown-link.active.duet-theme-turva{background:rgb(245, 247, 250)}.duet-toolbar-dropdown-link:hover{background:rgb(228, 241, 247)}.duet-toolbar-dropdown-link:hover.duet-theme-turva{background:rgb(222, 224, 228)}:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva.active{background:rgb(253, 247, 242)}:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva:hover{background:rgb(251, 225, 209)}";
 
 const DuetToolbarDropdownLink = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.accessibleLabel = undefined;
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Language of the link. Use this only for language selection links.
+         */
         this.targetLanguage = undefined;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        /**
+         * Active
+         */
         this.active = false;
     }
     /**
@@ -36,14 +49,14 @@ const DuetToolbarDropdownLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '2337077d456966b5d54e4224f7b4feed069deb3b' }, h("a", { key: '862439261d8493ea79212340afb36566c8066ac8', class: {
+        return (h(Host, { key: '34a5369d2806e4474bbb32400d5563fddcc3590a' }, h("a", { key: 'b16d10c8be40329d90136c486d568fb9511524d7', class: {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'eefe89c70a61602260dd173e54912ff3b97e3618', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '7de399ce4b29b72d214e150e6045f965648d49bf', class: "label" }, h("slot", { key: '55fc1816636dd382b16e7fd68d55cd61ed2f56ac' })), this.active && (h("duet-icon", { key: 'b327b46d411bf4dd40f5a8f78b3fbe133f7eeb81', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'cce54b8721ad1d017e32ac331ebcc54d53fbd88c', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '515f4c68a3917e3403e59f938fc2a2ba296e1f63', class: "label" }, h("slot", { key: '43e7eddd00dc07766e9842a4070f09e908021551' })), this.active && (h("duet-icon", { key: 'e69da314290045e523944a6d3554158627151d48', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     get element() { return getElement(this); }
 };
-DuetToolbarDropdownLink.style = DuetToolbarDropdownLinkStyle0;
+DuetToolbarDropdownLink.style = duetToolbarDropdownLinkCss;
 
 export { DuetToolbarDropdownLink as duet_toolbar_dropdown_link };