@duetds/components 10.4.0 → 10.6.0

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { E as Env, r as registerInstance, h, H as Host, g as getElement } from './index-Cwhi6_oZ.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
-import { g as getColorByName, r as rgbaColorFromRgb } from './token-utils-B0KAgyj_.js';
-import './tokens.module-DEzE2U5T.js';
+import { E as Env, r as registerInstance, h, H as Host, g as getElement } from './index-D3450NfA.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
+import { g as getColorByName, r as rgbaColorFromRgb } from './token-utils-BILzD7LX.js';
+import './tokens.module-kkZE1C6Z.js';
 
 const cleanupSvg = (svgContent) => {
     if (typeof document === "undefined" || !svgContent) {
@@ -217,11 +217,11 @@ const DuetIcon = class {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: '2a800d3292964b5a1dd5fd454662f690ce9e6b5a', class: {
+        return (h(Host, { key: 'ac454937867acd98e1552f998f09cecb7b6db6f6', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '4d5d3fc155d6d2e4f677d8753c116c82eb865a2c', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '61bd9c9b857bd54bfa18b71035af646ddfc8b490', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -230,7 +230,7 @@ const DuetIcon = class {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '6c79866426237ff75ff36401a9117dca1a68cf19', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: '513e30e9f69a6661e54b5f2a0989eaf14887f533', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Cwhi6_oZ.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
-import { g as getLocaleString } from './language-utils-LZh-sc2s.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-D3450NfA.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
+import { g as getLocaleString } from './language-utils-D4WVl8Ph.js';
 import './string-utils-C6E9F6QT.js';
 
 const duetIndicatorCss = "*,*::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;position:relative}.duet-indicator{position:absolute;top:0;right:0;display:inline-block;width:8px;height:8px;border-radius:50%}.duet-indicator-new{background:rgb(0, 119, 179)}.duet-indicator-change{background:rgb(247, 178, 40)}.duet-indicator-error{background:rgb(185, 16, 74)}.duet-indicator-success{background:rgb(29, 106, 88)}.duet-indicator-new.duet-theme-turva{background-color:rgb(230, 23, 64)}";
@@ -50,11 +50,11 @@ const DuetIndicator = class {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '0513ee5c8cb2770eb10e753901e8db638c665112' }, h("span", { key: '64ec0e8625b9cf03ed41d6cbe6ae9e286f5cd08a', class: {
+        return (h(Host, { key: '329e985ec026dde828ee0e4f896bbbf68054a4ce' }, h("span", { key: '688c53ea00e20e7c2aa612ed6cdaede9a83655f9', class: {
                 "duet-indicator": true,
                 [`duet-indicator-${this.variation}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-            } }), h("duet-visually-hidden", { key: 'ae27d7871ca7bbde4e8e62d3c389c4f0c5b17090' }, this.getAccessibleLabel())));
+            } }), h("duet-visually-hidden", { key: '37a42c32af9d6d46946d30239592a4794e16de93' }, this.getAccessibleLabel())));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,19 +1,19 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Cwhi6_oZ.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D3450NfA.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-DvwKrUS6.js';
 import { s as searchIcon } from './form-search-CevX33LA.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
-import { D as DuetInternalLabel } from './label-CyQlly6Z.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
+import { D as DuetInternalLabel } from './label-C1HF2o4Y.js';
 import { c as createID } from './create-id-Cfr_DJqU.js';
 import { c as cleanValue, r as resetCursor } from './input-utils-CLDy7YaM.js';
-import { a as isEscapeKey, c as isEnterKey, o as isBackspaceKey, d as isArrowLeftKey, f as isArrowRightKey } from './keyboard-utils-Db8rvjPI.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-LZh-sc2s.js';
-import { c as checkNamedSlotElement, p as proxyInputToSlot } from './slot-utils-CEZnAp61.js';
-import { g as getColorByName } from './token-utils-B0KAgyj_.js';
+import { o as isCharacterInsertKey, a as isEscapeKey, c as isEnterKey, p as isBackspaceKey, d as isArrowLeftKey, f as isArrowRightKey } from './keyboard-utils-BaefVzkx.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-D4WVl8Ph.js';
+import { c as checkNamedSlotElement, p as proxyInputToSlot } from './slot-utils-Dxcjtmp3.js';
+import { g as getColorByName } from './token-utils-BILzD7LX.js';
 import './string-utils-C6E9F6QT.js';
-import './tokens.module-DEzE2U5T.js';
+import './tokens.module-kkZE1C6Z.js';
 
 var formEmail;
 var hasRequiredFormEmail;
@@ -28,7 +28,7 @@ function requireFormEmail () {
 var formEmailExports = requireFormEmail();
 var emailIcon = /*@__PURE__*/getDefaultExportFromCjs(formEmailExports);
 
-const duetInputCss = ".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, 42, 59)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{margin-right:16px !important}:host(:last-child),:host(:last-of-type){margin-right:0 !important}:host(.form-distribute:last-of-type:not(:last-child)){margin-right:16px !important}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:12px !important;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;vertical-align:bottom;text-align:left}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}input[type=time]::-webkit-datetime-edit-fields-wrapper{padding:0}input[type=time]::-webkit-calendar-picker-indicator{display:none}duet-tooltip,::slotted(duet-tooltip){position:relative;top:12px;right:0}@media (min-width: 48em){duet-tooltip,::slotted(duet-tooltip){right:auto}}duet-caption:not(:last-of-type){margin-bottom:0}.duet-input-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-input-icon{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;font-size:0;line-height:normal;color:rgb(8, 42, 77);pointer-events:none;transform:translateY(-50%)}.duet-input-container{position:relative;width:100%;height:100%}.duet-input-container.has-clear .duet-input-clear-icon{position:relative;z-index:250}.duet-input-container.has-clear .duet-input-clear-icon button{position:absolute;top:-24px;right:-24px;min-width:48px;min-height:48px;color:rgb(0, 75, 129)}.duet-input-container.has-clear .duet-input-clear-icon button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-input-container.has-clear .duet-input-clear-icon button:focus,.duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-input-container.has-clear .duet-input-clear-icon button:active{opacity:0.75;transition:none}.duet-input-container.has-clear .duet-input-clear-icon.input-padding-xx-small button{top:-12px}.duet-input-container.has-clear .duet-input-clear-icon.input-padding-x-small button{top:-16px}.duet-input-container.has-clear .duet-input-clear-icon.input-padding-small button{top:-20px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single button{top:-48px;right:0}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-xx-small button{top:-36px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-x-small button{top:-40px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-small button{top:-44px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double button{top:-24px;right:12px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-xx-small button{top:-12px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-x-small button{top:-16px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-small button{top:-20px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-button button{top:-24px;right:0}.duet-input-container.has-clear.has-icon .duet-input-clear-icon{top:-24px;right:24px}.duet-input-label-container{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}@media (min-width: 48em){.duet-input-label-container{justify-content:flex-start}}.duet-input{position:relative;z-index:100;display:block !important;width:100% !important;min-width:8rem;max-width:initial !important;height:auto !important;padding:12px 14px !important;margin:initial !important;margin-bottom:initial !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:400 !important;font-variant-numeric:tabular-nums;line-height:1.5 !important;color:rgb(8, 42, 77) !important;cursor:initial !important;outline-color:initial !important;background:rgb(255, 255, 255) !important;background-clip:initial !important;border:1px solid rgb(127, 150, 165) !important;border-radius:4px !important;transition:border 150ms ease !important}.duet-input.input-padding-small{padding:8px 10px !important}.duet-input.input-padding-x-small{padding:4px 6px !important}.duet-input.input-padding-xx-small{padding:0px 2px !important}.duet-input.is-number{padding-right:112px !important}.duet-input.is-date{padding-right:64px !important}.duet-input.after-chip{padding-left:8px !important}.has-error .duet-input{outline-offset:-1px;background-color:rgb(255, 240, 243) !important;border-color:rgb(214, 28, 82) !important}.has-error .duet-input+.duet-input-icon{color:rgb(214, 28, 82) !important}.has-icon .duet-input{padding-right:48px !important}.duet-input.align-right{text-align:right}.duet-input::-ms-clear{display:none}.duet-input::-webkit-contacts-auto-fill-button{display:none !important}.duet-input::placeholder{color:rgb(98, 121, 138);opacity:1 !important;transition:color 300ms ease}.duet-input:focus::placeholder{color:rgb(181, 198, 208)}.duet-input[disabled]{color:rgb(98, 121, 138) !important;cursor:not-allowed !important;outline:none !important;background:rgb(228, 236, 239) !important;border-color:rgb(181, 198, 208) !important;opacity:1 !important;-webkit-text-fill-color:rgb(8, 42, 77) !important}.duet-input:hover:not(:disabled):not(:focus){outline:2px solid;outline-color:rgb(127, 150, 165) !important;outline-offset:-1px}.duet-theme-turva .duet-input:hover:not(:disabled):not(:focus),.duet-input:hover:not(:disabled):not(:focus).duet-theme-turva{outline-color:rgb(120, 145, 164) !important}.has-error .duet-input: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-input:focus{outline:2px solid;outline-color:rgb(0, 119, 179) !important;outline-offset:-1px}.duet-theme-turva .duet-input:focus,.duet-input:focus.duet-theme-turva{outline-color:rgb(23, 42, 59) !important}.has-error .duet-input: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;background:rgb(255, 255, 255) !important}.duet-input:focus+.duet-input-icon{color:rgb(0, 119, 179)}.duet-input[type=search]:not(:placeholder-shown):focus+.duet-input-icon{display:none}.duet-input:not(:focus):not(:hover):invalid{outline:none !important}.duet-input[type=number]::-webkit-inner-spin-button,.duet-input[type=number]::-webkit-outer-spin-button,.duet-input[type=time]::-webkit-inner-spin-button,.duet-input[type=time]::-webkit-outer-spin-button{display:none;margin:0;-webkit-appearance:none}.duet-input::-webkit-search-cancel-button{margin-right:-28px}.duet-input-help{display:block;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;font-weight:400;line-height:1.25;color:rgb(98, 121, 138);border-radius:4px}.duet-input-help span{display:block;margin-top:8px}.has-error .duet-input-help{color:rgb(214, 28, 82)}.duet-label-hidden label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip:rect(0 0 0 0)}.duet-input-relative{position:relative;width:100%}.duet-input-variation-button,.duet-input-variation-button-left{position:relative;width:100%}.duet-input-variation-button .duet-input-relative,.duet-input-variation-button-left .duet-input-relative{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;justify-content:flex-start;width:auto}.duet-input-variation-button .duet-input-relative duet-button,.duet-input-variation-button-left .duet-input-relative duet-button{z-index:250;margin-bottom:0}.duet-input-variation-button-left .duet-input-relative{border-radius:4px}.duet-input-variation-button .duet-input-relative .duet-input{border-right-width:0 !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.duet-input-variation-button-left .duet-input-relative .duet-input{border-left-width:0 !important;border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.duet-input-variation-revealable{position:relative;width:100%}.duet-input-variation-revealable ::-ms-reveal{display:none}.duet-input-variation-revealable .duet-input-relative{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;justify-content:flex-start;width:auto;outline:initial;border:1px solid rgb(127, 150, 165);border-radius:4px;transition:border 150ms ease}.duet-input-variation-revealable .duet-input-relative duet-button{z-index:250;margin-bottom:0}.duet-input-variation-revealable .duet-input-relative .duet-input{border-width:0 !important}.duet-input-variation-revealable .duet-input-relative .duet-input:focus,.duet-input-variation-revealable .duet-input-relative .duet-input:hover{outline:none !important;border-width:0 !important}.duet-input-variation-revealable.disabled .duet-input-relative{outline:none;background:rgb(245, 248, 250);border-color:rgb(212, 223, 229)}.duet-input-variation-revealable.has-error .duet-input-relative{border-color:rgb(214, 28, 82)}.duet-input-variation-revealable.has-focus .duet-input-relative{outline:2px solid;outline-offset:-1px;outline-color:rgb(62, 84, 102);border-color:rgb(0, 119, 179)}.duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative{outline:2px solid;outline-color:rgb(127, 150, 165) !important;outline-offset:-1px}.duet-theme-turva .duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative,.duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative.duet-theme-turva{outline-color:rgb(120, 145, 164) !important}.duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative{outline-offset:-1px;background-color:rgb(255, 240, 243) !important;border-color:rgb(214, 28, 82) !important}.duet-input-container.has-chips.has-focus .duet-input-relative{outline:2px solid;outline-color:rgb(0, 119, 179) !important;outline-offset:-1px}.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative,.duet-input-container.has-chips.has-focus .duet-input-relative.duet-theme-turva{outline-color:rgb(23, 42, 59) !important}.duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative{outline:2px solid;outline-color:rgb(127, 150, 165) !important;outline-offset:-1px}.duet-theme-turva .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative,.duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative.duet-theme-turva{outline-color:rgb(120, 145, 164) !important}.duet-input-container.has-chips.has-error .duet-input-relative{outline-offset:-1px;background-color:rgb(255, 240, 243) !important;border-color:rgb(214, 28, 82) !important}.duet-input-container.has-chips.has-error.has-focus .duet-input-relative{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-input-container.has-chips.has-error:hover:not(:disabled):not(.has-focus) .duet-input-relative{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-input-container.has-chips .duet-input-relative{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;align-items:center;justify-content:flex-start;width:auto;padding-right:2px;border:1px solid rgb(127, 150, 165);border-radius:4px;transition:border 150ms ease}.duet-input-container.has-chips .duet-input-relative .duet-input{flex-grow:1;flex-basis:4rem;padding-left:0 !important;margin-left:12px !important;border-width:0 !important}.duet-input-container.has-chips .duet-input-relative .duet-input:focus,.duet-input-container.has-chips .duet-input-relative .duet-input:hover{outline:none !important;border-width:0 !important}.duet-theme-turva .duet-input-icon{color:rgb(23, 42, 59)}.duet-theme-turva.duet-input-container.has-clear .duet-input-clear-icon button{color:rgb(8, 42, 77)}.duet-theme-turva.has-error .duet-input+.duet-input-icon{color:rgb(214, 28, 82) !important}.duet-theme-turva:not(.has-error) .duet-input{border-color:rgb(120, 145, 164) !important}.duet-theme-turva .duet-input{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) !important}.duet-theme-turva .duet-input[disabled]{color:rgb(95, 122, 143) !important;cursor:not-allowed !important;outline:none !important;background:rgb(228, 233, 237) !important;border-color:rgb(178, 194, 205) !important;opacity:1 !important;-webkit-text-fill-color:rgb(23, 42, 59) !important}.duet-theme-turva .duet-input::placeholder{color:rgb(120, 145, 164)}.duet-theme-turva .duet-input:focus::placeholder{color:rgb(178, 194, 205)}.duet-theme-turva .duet-input:focus+.duet-input-icon{color:rgb(23, 42, 59)}.duet-theme-turva .duet-input-variation-button-left.has-focus .duet-input-relative{border-color:rgb(23, 42, 59)}.duet-theme-turva .duet-input-variation-revealable.has-focus .duet-input-relative{border-color:rgb(23, 42, 59)}.duet-theme-turva .duet-input-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)}.duet-theme-turva.has-error .duet-input-help{color:rgb(214, 28, 82)}.duet-theme-turva .duet-input-variation-revealable .duet-input-relative{border-color:rgb(120, 145, 164)}.duet-theme-turva.duet-input-variation-revealable.has-error .duet-input-relative{border-color:rgb(214, 28, 82)}.duet-theme-turva.duet-input-variation-revealable.has-focus .duet-input-relative{outline:2px solid;outline-offset:-1px;outline-color:rgb(53, 79, 101);border-color:rgb(23, 42, 59)}.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative{outline:2px solid;outline-offset:2px;outline-color:rgb(53, 79, 101)}.duet-theme-turva .duet-input-container.has-chips .duet-input-relative{border-color:rgb(120, 145, 164)}";
+const duetInputCss = ".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, 42, 59)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{margin-right:16px !important}:host(:last-child),:host(:last-of-type){margin-right:0 !important}:host(.form-distribute:last-of-type:not(:last-child)){margin-right:16px !important}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:12px !important;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;vertical-align:bottom;text-align:left}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}input[type=time]::-webkit-datetime-edit-fields-wrapper{padding:0}input[type=time]::-webkit-calendar-picker-indicator{display:none}duet-tooltip,::slotted(duet-tooltip){position:relative;top:12px;right:0}@media (min-width: 48em){duet-tooltip,::slotted(duet-tooltip){right:auto}}duet-caption:not(:last-of-type){margin-bottom:0}.duet-input-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-input-icon{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;font-size:0;line-height:normal;color:rgb(8, 42, 77);pointer-events:none;transform:translateY(-50%)}.duet-input-container{position:relative;width:100%;height:100%}.duet-input-container.has-clear .duet-input-clear-icon{position:relative;z-index:250}.duet-input-container.has-clear .duet-input-clear-icon button{position:absolute;top:-24px;right:-24px;min-width:48px;min-height:48px;color:rgb(0, 75, 129)}.duet-input-container.has-clear .duet-input-clear-icon button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-input-container.has-clear .duet-input-clear-icon button:focus,.duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-input-container.has-clear .duet-input-clear-icon button:active{opacity:0.75;transition:none}.duet-input-container.has-clear .duet-input-clear-icon.input-padding-xx-small button{top:-12px}.duet-input-container.has-clear .duet-input-clear-icon.input-padding-x-small button{top:-16px}.duet-input-container.has-clear .duet-input-clear-icon.input-padding-small button{top:-20px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single button{top:-48px;right:0}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-xx-small button{top:-36px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-x-small button{top:-40px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-small button{top:-44px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double button{top:-24px;right:12px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-xx-small button{top:-12px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-x-small button{top:-16px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-small button{top:-20px}.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-button button{top:-24px;right:0}.duet-input-container.has-clear.has-icon .duet-input-clear-icon{top:-24px;right:24px}.duet-input-label-container{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}@media (min-width: 48em){.duet-input-label-container{justify-content:flex-start}}.duet-input{position:relative;z-index:100;display:block !important;width:100% !important;min-width:8rem;max-width:initial !important;height:auto !important;padding:12px 14px !important;margin:initial !important;margin-bottom:initial !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:400 !important;font-variant-numeric:tabular-nums;line-height:1.5 !important;color:rgb(8, 42, 77) !important;cursor:initial !important;outline-color:initial !important;background:rgb(255, 255, 255) !important;background-clip:initial !important;border:1px solid rgb(127, 150, 165) !important;border-radius:4px !important;transition:border 150ms ease !important}.duet-input.input-padding-small{padding:8px 10px !important}.duet-input.input-padding-x-small{padding:4px 6px !important}.duet-input.input-padding-xx-small{padding:0px 2px !important}.duet-input.is-number{padding-right:112px !important}.duet-input.is-date{padding-right:64px !important}.duet-input.after-chip{padding-left:8px !important}.has-error .duet-input{outline-offset:-1px;background-color:rgb(255, 240, 243) !important;border-color:rgb(214, 28, 82) !important}.has-error .duet-input+.duet-input-icon{color:rgb(214, 28, 82) !important}.has-icon .duet-input{padding-right:48px !important}.duet-input.align-right{text-align:right}.duet-input::-ms-clear{display:none}.duet-input::-webkit-contacts-auto-fill-button{display:none !important}.duet-input::placeholder{color:rgb(98, 121, 138);opacity:1 !important;transition:color 300ms ease}.duet-input:focus::placeholder{color:rgb(181, 198, 208)}.duet-input[disabled]{color:rgb(98, 121, 138) !important;cursor:not-allowed !important;outline:none !important;background:rgb(228, 236, 239) !important;border-color:rgb(181, 198, 208) !important;opacity:1 !important;-webkit-text-fill-color:rgb(8, 42, 77) !important}.duet-input:hover:not(:disabled):not(:focus){outline:2px solid;outline-color:rgb(127, 150, 165) !important;outline-offset:-1px}.duet-theme-turva .duet-input:hover:not(:disabled):not(:focus),.duet-input:hover:not(:disabled):not(:focus).duet-theme-turva{outline-color:rgb(120, 145, 164) !important}.has-error .duet-input: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-input:focus{outline:2px solid;outline-color:rgb(0, 119, 179) !important;outline-offset:-1px}.duet-theme-turva .duet-input:focus,.duet-input:focus.duet-theme-turva{outline-color:rgb(23, 42, 59) !important}.has-error .duet-input: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;background:rgb(255, 255, 255) !important}.duet-input:focus+.duet-input-icon{color:rgb(0, 119, 179)}.duet-input[type=search]:not(:placeholder-shown):focus+.duet-input-icon{display:none}.duet-input:not(:focus):not(:hover):invalid{outline:none !important}.duet-input[type=number]::-webkit-inner-spin-button,.duet-input[type=number]::-webkit-outer-spin-button,.duet-input[type=time]::-webkit-inner-spin-button,.duet-input[type=time]::-webkit-outer-spin-button{display:none;margin:0;-webkit-appearance:none}.duet-input::-webkit-search-cancel-button{margin-right:-28px}.duet-input-help{display:block;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;font-weight:400;line-height:1.25;color:rgb(98, 121, 138);border-radius:4px}.duet-input-help span{display:block;margin-top:8px}.has-error .duet-input-help{color:rgb(214, 28, 82)}.duet-label-hidden label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip:rect(0 0 0 0)}.duet-input-relative{position:relative;width:100%}.duet-input-variation-button,.duet-input-variation-button-left{position:relative;width:100%}.duet-input-variation-button .duet-input-relative,.duet-input-variation-button-left .duet-input-relative{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;justify-content:flex-start;width:auto}.duet-input-variation-button .duet-input-relative duet-button,.duet-input-variation-button-left .duet-input-relative duet-button{z-index:250;margin-bottom:0}.duet-input-variation-button-left .duet-input-relative{border-radius:4px}.duet-input-variation-button .duet-input-relative .duet-input{border-right-width:0 !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.duet-input-variation-button-left .duet-input-relative .duet-input{border-left-width:0 !important;border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.duet-input-variation-revealable{position:relative;width:100%}.duet-input-variation-revealable ::-ms-reveal{display:none}.duet-input-variation-revealable .duet-input-relative{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;justify-content:flex-start;width:auto;outline:initial;border:1px solid rgb(127, 150, 165);border-radius:4px;transition:border 150ms ease}.duet-input-variation-revealable .duet-input-relative duet-button{z-index:250;margin-bottom:0}.duet-input-variation-revealable .duet-input-relative .duet-input{border-width:0 !important}.duet-input-variation-revealable .duet-input-relative .duet-input:focus,.duet-input-variation-revealable .duet-input-relative .duet-input:hover{outline:none !important;border-width:0 !important}.duet-input-variation-revealable.disabled .duet-input-relative{outline:none;background:rgb(245, 248, 250);border-color:rgb(212, 223, 229)}.duet-input-variation-revealable.has-error .duet-input-relative{border-color:rgb(214, 28, 82)}.duet-input-variation-revealable.has-focus .duet-input-relative{outline:2px solid;outline-offset:-1px;outline-color:rgb(62, 84, 102);border-color:rgb(0, 119, 179)}.duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative{outline:2px solid;outline-color:rgb(127, 150, 165) !important;outline-offset:-1px}.duet-theme-turva .duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative,.duet-input-variation-revealable:hover:not(.disabled):not(.has-focus) .duet-input-relative.duet-theme-turva{outline-color:rgb(120, 145, 164) !important}.duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative{outline-offset:-1px;background-color:rgb(255, 240, 243) !important;border-color:rgb(214, 28, 82) !important}.duet-input-container.has-adornment.has-focus .duet-input-relative,.duet-input-container.has-chips.has-focus .duet-input-relative{outline:2px solid;outline-color:rgb(0, 119, 179) !important;outline-offset:-1px}.duet-theme-turva .duet-input-container.has-adornment.has-focus .duet-input-relative,.duet-input-container.has-adornment.has-focus .duet-input-relative.duet-theme-turva,.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative,.duet-input-container.has-chips.has-focus .duet-input-relative.duet-theme-turva{outline-color:rgb(23, 42, 59) !important}.duet-input-container.has-adornment:hover:not(:disabled):not(.has-focus) .duet-input-relative,.duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative{outline:2px solid;outline-color:rgb(127, 150, 165) !important;outline-offset:-1px}.duet-theme-turva .duet-input-container.has-adornment:hover:not(:disabled):not(.has-focus) .duet-input-relative,.duet-input-container.has-adornment:hover:not(:disabled):not(.has-focus) .duet-input-relative.duet-theme-turva,.duet-theme-turva .duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative,.duet-input-container.has-chips:hover:not(:disabled):not(.has-focus) .duet-input-relative.duet-theme-turva{outline-color:rgb(120, 145, 164) !important}.duet-input-container.has-adornment.has-error .duet-input-relative,.duet-input-container.has-chips.has-error .duet-input-relative{outline-offset:-1px;background-color:rgb(255, 240, 243) !important;border-color:rgb(214, 28, 82) !important}.duet-input-container.has-adornment.has-error.has-focus .duet-input-relative,.duet-input-container.has-chips.has-error.has-focus .duet-input-relative{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-input-container.has-adornment.has-error:hover:not(:disabled):not(.has-focus) .duet-input-relative,.duet-input-container.has-chips.has-error:hover:not(:disabled):not(.has-focus) .duet-input-relative{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-input-container.has-adornment .duet-input-relative,.duet-input-container.has-chips .duet-input-relative{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;align-items:center;justify-content:flex-start;width:auto;padding-right:2px;border:1px solid rgb(127, 150, 165);border-radius:4px;transition:border 150ms ease}.duet-input-container.has-adornment .duet-input-relative .duet-input,.duet-input-container.has-chips .duet-input-relative .duet-input{flex-grow:1;flex-basis:4rem;padding-left:0 !important;margin-left:12px !important;border-width:0 !important}.duet-input-container.has-adornment .duet-input-relative .duet-input:focus,.duet-input-container.has-adornment .duet-input-relative .duet-input:hover,.duet-input-container.has-chips .duet-input-relative .duet-input:focus,.duet-input-container.has-chips .duet-input-relative .duet-input:hover{outline:none !important;border-width:0 !important}.duet-input-container.has-adornment .duet-input-relative .duet-input{padding:12px 14px !important;margin:initial !important}.duet-input-container.has-adornment .duet-input-relative .input-adornment{color:rgb(98, 121, 138)}.duet-input-container.has-adornment .duet-input-relative .input-adornment.prefix{padding-left:14px}.duet-input-container.has-adornment .duet-input-relative .input-adornment.suffix{padding-right:14px}.duet-input-container.has-prefix .duet-input-relative .duet-input{padding-left:8px !important}.duet-input-container.has-suffix .duet-input-relative .duet-input{padding-right:8px !important}.duet-theme-turva .duet-input-icon{color:rgb(23, 42, 59)}.duet-theme-turva.duet-input-container.has-clear .duet-input-clear-icon button{color:rgb(8, 42, 77)}.duet-theme-turva.has-error .duet-input+.duet-input-icon{color:rgb(214, 28, 82) !important}.duet-theme-turva:not(.has-error) .duet-input{border-color:rgb(120, 145, 164) !important}.duet-theme-turva .duet-input{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) !important}.duet-theme-turva .duet-input[disabled]{color:rgb(95, 122, 143) !important;cursor:not-allowed !important;outline:none !important;background:rgb(228, 233, 237) !important;border-color:rgb(178, 194, 205) !important;opacity:1 !important;-webkit-text-fill-color:rgb(23, 42, 59) !important}.duet-theme-turva .duet-input::placeholder{color:rgb(120, 145, 164)}.duet-theme-turva .duet-input:focus::placeholder{color:rgb(178, 194, 205)}.duet-theme-turva .duet-input:focus+.duet-input-icon{color:rgb(23, 42, 59)}.duet-theme-turva .duet-input-variation-button-left.has-focus .duet-input-relative{border-color:rgb(23, 42, 59)}.duet-theme-turva .duet-input-variation-revealable.has-focus .duet-input-relative{border-color:rgb(23, 42, 59)}.duet-theme-turva .duet-input-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)}.duet-theme-turva.has-error .duet-input-help{color:rgb(214, 28, 82)}.duet-theme-turva .duet-input-variation-revealable .duet-input-relative{border-color:rgb(120, 145, 164)}.duet-theme-turva.duet-input-variation-revealable.has-error .duet-input-relative{border-color:rgb(214, 28, 82)}.duet-theme-turva.duet-input-variation-revealable.has-focus .duet-input-relative{outline:2px solid;outline-offset:-1px;outline-color:rgb(53, 79, 101);border-color:rgb(23, 42, 59)}.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative{outline:2px solid;outline-offset:2px;outline-color:rgb(53, 79, 101)}.duet-theme-turva .duet-input-container.has-chips .duet-input-relative{border-color:rgb(120, 145, 164)}";
 
 const icons = {
     search: searchIcon,
@@ -49,10 +49,13 @@ const DuetInput = class {
         this.proxyId = createID("DuetInput");
         this.clearId = createID("DuetInputClear");
         this.labelId = createID("DuetLabel");
+        this.prefixId = createID("DuetInputPrefix");
+        this.suffixId = createID("DuetInputSuffix");
         this.topCaptionId = createID("DuetCaptionTop");
         this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
         this.chipCountId = createID("DuetInputChipCount");
         this.errorId = createID("DuetError");
+        this.maxlengthAnnouncementKey = 0;
         this.disallowPatternRegex = null;
         this.clearLabel = {
             en: "Clear",
@@ -89,6 +92,11 @@ const DuetInput = class {
             fi: "valittu",
             sv: "valt",
         };
+        this.maxlengthReachedLabel = {
+            en: "This field has a maximum length of {max} characters. Limit reached.",
+            fi: "Tämän kentän enimmäispituus on {max} merkkiä. Raja on saavutettu.",
+            sv: "Det här fältet har en maximal längd på {max} tecken. Gränsen är nådd.",
+        };
         /**
          * State() variables
          */
@@ -98,6 +106,10 @@ const DuetInput = class {
          */
         this.isFocused = false;
         this._accessiblePopup = undefined;
+        /**
+         * Text announced to screen readers when the maxlength limit is reached.
+         */
+        this.maxlengthAnnouncement = "";
         /**
          * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
          */
@@ -195,7 +207,7 @@ const DuetInput = class {
          */
         this.labelHidden = false;
         /**
-         * Enable numeric keyboard for the input.
+         * Enable numeric keyboard for the input. Note that on iOS the numeric keyboard does not contain minus.
          */
         this.numericKeyboard = false;
         /**
@@ -204,7 +216,9 @@ const DuetInput = class {
          */
         this.component = "input";
         /**
-         * Enable or disable automatic completion by the browser
+         * Set the type of automatic completion by the browser. If possible use the standard tokens like "name", "given-name",
+         * "family-name", "postal-code", "street-address" etc. The component adds automatically "tel" and "email". If you must
+         * disable autocomplete use "off" (but avoid disabling unless absolutely necessary).
          */
         this.autoComplete = "on";
         /**
@@ -226,9 +240,22 @@ const DuetInput = class {
          * Component event handling.
          */
         this.onInput = (ev) => {
-            if (this.maxlength && this.nativeInput.value.length > this.maxlength) {
+            var _a;
+            // In addition to input event, maxlength handling uses also keyDown and paste events as input event may not be
+            // triggered when entry is truncated by the browser.
+            if (this.maxlength) {
+                const wasAtMaxlength = (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0) >= this.maxlength;
+                const nativeLength = this.nativeInput.value.length;
                 // Android doesn't honor maxlength
-                this.nativeInput.value = this.nativeInput.value.slice(0, this.maxlength);
+                const inputOverflow = nativeLength > this.maxlength;
+                if (inputOverflow) {
+                    this.nativeInput.value = this.nativeInput.value.slice(0, this.maxlength);
+                }
+                const limitJustReached = !wasAtMaxlength && nativeLength === this.maxlength;
+                const limitExceededWhileFull = wasAtMaxlength && inputOverflow;
+                if (limitJustReached || limitExceededWhileFull) {
+                    this.handleMaxlengthLimitReached();
+                }
             }
             if (this.disallowPatternRegex) {
                 cleanValue(this.nativeInput, this.disallowPatternRegex);
@@ -274,9 +301,35 @@ const DuetInput = class {
                 component: "duet-input",
             });
         };
+        this.onInputKeyDown = (ev) => {
+            if (this.maxlength && isCharacterInsertKey(ev) && this.isAtMaxlengthWithoutSelection()) {
+                this.handleMaxlengthLimitReached();
+            }
+        };
+        this.onInputPaste = () => {
+            if (this.maxlength && this.isAtMaxlengthWithoutSelection()) {
+                this.handleMaxlengthLimitReached();
+            }
+        };
+        this.isAtMaxlengthWithoutSelection = () => {
+            const input = this.nativeInput;
+            const inputIsWithoutSelection = input.selectionStart === input.selectionEnd;
+            const inputIsAtMaxlength = input.value.length >= this.maxlength;
+            return inputIsWithoutSelection && inputIsAtMaxlength;
+        };
+        this.handleMaxlengthLimitReached = () => {
+            clearTimeout(this.maxlengthAnnouncementTimeoutId);
+            this.maxlengthAnnouncement = "";
+            this.maxlengthAnnouncementTimeoutId = setTimeout(() => {
+                this.maxlengthAnnouncementKey++;
+                this.maxlengthAnnouncement = this.maxlengthReachedLabel[this.language].replace("{max}", String(this.maxlength));
+            }, 300);
+        };
         /**
          * Private functions
          */
+        // As comma may be used as decimal separator normalize value to have dot before parsing as number
+        this.valueAsNormalizedFloat = () => { var _a; return Number.parseFloat((_a = this.value) === null || _a === void 0 ? void 0 : _a.replace(/,/g, ".")); };
         this.getAriaDescribedBy = () => {
             const describedBy = [];
             if (this.isCaptionVisible && this.topCaptionId) {
@@ -297,6 +350,19 @@ const DuetInput = class {
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
+        this.getAriaLabelledBy = () => {
+            const labelledBy = [this.labelId];
+            if (!!this.fieldPrefix) {
+                labelledBy.push(this.prefixId);
+            }
+            if (!!this.fieldSuffix) {
+                labelledBy.push(this.suffixId);
+            }
+            if (!!this.accessibleLabelledBy) {
+                labelledBy.push(this.accessibleLabelledBy);
+            }
+            return labelledBy.join(" ");
+        };
         this.handleClearClick = (event) => {
             const clearing = this.clearInput();
             this.onClear(event);
@@ -387,7 +453,31 @@ const DuetInput = class {
      * This is a proxy for the enclosed native inputs validity
      */
     get validity() {
-        return this.nativeInput.validity;
+        var _a, _b;
+        // Copy the value of the native validity state to a proxy object, as native validity is readonly.
+        const validity = {
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valid: true,
+            valueMissing: false,
+        };
+        Object.keys(validity).forEach(key => (validity[key] = this.nativeInput.validity[key]));
+        if (typeof this.max !== "undefined" && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) && this.max < this.valueAsNormalizedFloat()) {
+            validity.rangeOverflow = true;
+            validity.valid = false;
+        }
+        if (typeof this.min !== "undefined" && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) && this.min > this.valueAsNormalizedFloat()) {
+            validity.rangeUnderflow = true;
+            validity.valid = false;
+        }
+        return validity;
     }
     /**
      * @internal
@@ -402,7 +492,8 @@ const DuetInput = class {
         inheritGlobalTheme(this);
         this.disallowedPatternChange();
         this.isCaptionVisible = !!this.caption;
-        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
+        // Accept also slot element so that other components using duet-input can pass their tooltip slots here.
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip, slot", 1, true);
     }
     componentDidLoad() {
         if (this.variation === "revealable" && this.nativeInput.form) {
@@ -510,6 +601,21 @@ const DuetInput = class {
             }
         }
     }
+    getAutocomplete() {
+        if (this.type === "password") {
+            return "off";
+        }
+        const tokens = this.autoComplete.split(/\s+/);
+        // If attribute includes "email", e.g. "work email", don't overwrite it
+        if (this.type === "email" && this.autoComplete !== "off" && !tokens.includes("email")) {
+            return "email";
+        }
+        // If attribute includes "tel", e.g. "mobile tel", don't overwrite it
+        if (this.type === "tel" && this.autoComplete !== "off" && !tokens.includes("tel")) {
+            return "tel";
+        }
+        return this.autoComplete;
+    }
     /**
      * Add a chip to the input. Property "chips" must be true.
      */
@@ -549,7 +655,7 @@ const DuetInput = class {
         const identifier = this.identifier || this.inputId;
         const inputProps = {};
         if (this.numericKeyboard) {
-            inputProps.inputmode = "numeric";
+            inputProps.inputmode = "decimal";
         }
         // Set validation regexes
         if (this.pattern && this.type !== "tel") {
@@ -574,7 +680,7 @@ const DuetInput = class {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: 'c36aabb598d1ab24aede9cacbbc0f8dfeaf7ff2f', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'ee9481c94a8beeeb5b22e5f9f3dc92a96111e3e8', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'a75cdb69696761e21eb42620bc3162f3ffbe062e', class: {
+        return (h(Host, { key: '1119e8e51f3a490e34665e77ce32ec21f7bc70c7', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '31afa65dcb1b161f8c5a87c65953a26a552066b8', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '5574afef8c592593193cbf0c99eaf8eaa84dbf11', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -587,12 +693,15 @@ const DuetInput = class {
                 "has-chips": this.chips,
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
+                "has-adornment": !!this.fieldPrefix || !!this.fieldSuffix,
+                "has-prefix": !!this.fieldPrefix,
+                "has-suffix": !!this.fieldSuffix,
                 disabled: this.disabled,
-            } }, h("div", { key: '84b4ba43c2fbbdf7b390dba0a7f0dc839626b5ed', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: 'a7134e94f657eab2c9c5156a81269712c83ec270', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '669a1461aedfebd1c2e66077beda1c298b77458c', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'ad5e55d3a36ade247c1508eeffe9de96df514c51', name: "tooltip" })), this.caption && (h("duet-caption", { key: '5c4bfb71d79efe8be226ba521c95c5d8fbec67de', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '4dfa6f211f3d00f6906d8e18ea9c4fdcc8ec3877', class: {
+            } }, h("div", { key: 'cd0dfb4e8ef821c84d342fff017da9b3e6938134', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '7ef9a4e3ccbc5b7ac030ca66912eb0471103ed10', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'f263424aa51a59f4252cad4b4a1347b5986869ae', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'b4afd5ae65bbc03083b81996965cb354d6fd2a35', name: "tooltip" })), this.caption && (h("duet-caption", { key: '1d126824ee2ef4b7a4dae8650363e9da0b58c288', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'adb5b8fa3b3de37c96d74fd1b888de75689a3ce0', class: {
                 "duet-input-relative": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-error": !!this.error,
-            } }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'f7811efcc2acfa5b01b1efd6d334a35c35350ca1', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: 'f4c6f4a8974bfca86248b528b05f84d50c73ba4c', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: 'b270e8b1fe5c958c76b9ba82e7c25aedf35ae710', name: "button-left" }), h("input", Object.assign({ key: 'ee3e9844d6fd27bafb895d0f08a2ce2282237024', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'fcadd06bf9e0dc4115c0bd004de23fa5692b03fc', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '84a8a1feed5a0895936f5e1d5ee310c6282f1678', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), this.variation === "button-left" && h("slot", { key: '90533c1b234e2644eb97317f903abbf04fee8138', name: "button-left" }), this.fieldPrefix && (h("span", { key: '151fd6757766b8c7e86ded73639d87bb32814089', class: "input-adornment prefix", id: this.prefixId }, this.fieldPrefix)), h("input", Object.assign({ key: '06811722717032661d4ba5e3bfa9c2b6196cf082', ref: input => (this.nativeInput = input), onInput: this.onInput, onKeyDown: this.onInputKeyDown, onPaste: this.onInputPaste, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -600,17 +709,17 @@ const DuetInput = class {
                 "after-chip": this.getAllChips().length > 0,
                 "align-right": this.inputAlign === "right",
                 [`input-padding-${this.inputPadding}`]: true,
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: 'f021ac46e0c9738775a03965e2c3497d80c4dced', class: "duet-input-icon" }, h("duet-icon", { key: '56bff364b7c70d530c3dd809b2a8a2f7fe1fff5b', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: '7eb63087db85f1095034e2584cf4d1d4b124c82a', class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.getAriaLabelledBy(), "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.getAutocomplete(), required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), this.maxlength && (h("duet-visually-hidden", { key: `maxlength-announcement-${this.maxlengthAnnouncementKey}`, "aria-live": "polite", "aria-atomic": "true" }, this.maxlengthAnnouncement)), this.fieldSuffix && (h("span", { key: 'b2d284fc05798f7dab08555f524cabf4f94f0e19', class: "input-adornment suffix", id: this.suffixId }, this.fieldSuffix)), !this.value && hasInputIcon && (h("div", { key: '8364a8a7687b6e37279585edf55da9005673f4df', class: "duet-input-icon" }, h("duet-icon", { key: '1b420da3e76241f1e105ce5ef8b9f40e6490424d', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'c67978258fbf64a22563a8e139b7a7de012bb4ca', class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
                 [`input-padding-${this.inputPadding}`]: true,
-            } }, h("button", { key: '72fb4efe7f5d0ea161c7401acb59f2b20a77adac', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: 'f9df024692c1be597b37cedc74c8203e8fabb908', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: 'bca090dc2f20e1febe6674059e0a3b22c2d79d2f', class: "duet-input-icon" }, h("duet-icon", { key: '9066e27643ad85bc683cd36a5998e7bd0fcad572', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'c83a2b95a969c7f1c2f7a3915cdfce56d1c525b8', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '86fc4aaddb775f76d602b699bdc8c811f41f2561', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+            } }, h("button", { key: 'b243244d6d5184c42a9afb93483479a0b07bad7d', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '2ff21863005e55dc7a4dc1a16e2e2e40ad7f85cf', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '7732892f159a6c7c9ad7c89b0031052b1ed45502', class: "duet-input-icon" }, h("duet-icon", { key: '97de6dc8ff0c506db494dc36edc6d0107792c2b9', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '5c940caf605e2eaff4db2a36c63548db78f36f41', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: 'caf0a7c8bec4a620e2ca5f897eaabc1814f32c5d', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
-                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'dfa0a59d038af09b5115dae28772c108918154ab' }, h("span", { key: '00408d3c2616c8e1aa64b41503ae7760c1fd60af', "aria-live": "polite" }, this.isPasswordRevealed
+                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: 'cc394dbd7d28fc9e1cf0a864c67e7e7a6a835d1a' }, h("span", { key: '20033ed28c86634d6faf03180e53cff84def1329', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '3b539164f49b311fcdc82ce75cb75d360e148c4b' })), h("span", { key: '2f2f5abff72831b7257d404dfedecb8bea316762', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '63e8da0c2b2638d8af7f0b87f4e00ab5d5b7aa8c', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: 'b72c50503fa80fd1ba6764b7b3348bc5d7b2813c' })), h("span", { key: '25790e8c5147bb271fefa6cbce2343287b57c816', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'c62d261a03ebec492aed9c65a836525e47660cfc', class: "duet-input-error" }, this.error)))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Cwhi6_oZ.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-D3450NfA.js';
 import { i as isInternetExplorer } from './is-internet-explorer-DxESMgwA.js';
-import { c as checkNamedSlotElement } from './slot-utils-CEZnAp61.js';
+import { c as checkNamedSlotElement } from './slot-utils-Dxcjtmp3.js';
 
 const duetLayoutCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}::slotted([slot=page-heading]){width:calc(100% + 32px);margin:0 -16px 0 -16px}@media (min-width: 36em){::slotted([slot=page-heading]){width:calc(100% + 56px);margin:0 -28px 0 -28px}}@media (min-width: 62em){::slotted([slot=page-heading]){width:calc(100% + 112px);margin:0 -56px 0 -56px}}:host(.center) ::slotted([slot=page-heading]){width:calc(100% + 32px);margin:0 -16px 0 -16px}@media (min-width: 36em){:host(.center) ::slotted([slot=page-heading]){width:calc(100% + 96px);margin:0 -48px 0 -48px}}@media (min-width: 48em){:host(.center) ::slotted([slot=page-heading]){width:calc(100% + 144px);margin:0 -72px 0 -72px}}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;display:block;flex:1 0 auto;width:100%}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-middle) .heading-wrapper{padding:0 !important}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout-wrapper{display:block;margin:48px 0 36px;overflow-x:clip}@media (min-width: 36em){.duet-layout-wrapper{margin-top:72px}}@media (min-width: 62em){.duet-layout-wrapper{margin-bottom:48px}}.duet-layout-wrapper.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-wrapper>*{width:100%}.duet-layout{position:relative;padding:0 16px;margin:0 auto}@media (max-width: 20.5em){.duet-layout.padding-xxx-small{padding:0}}@media (max-width: 22.5em){.duet-layout.padding-xx-small{padding:0}}@media (max-width: 35.9375em){.duet-layout.padding-x-small{padding:0}}@media (min-width: 36em){.duet-layout.padding-small{padding:0}}@media (min-width: 48em){.duet-layout.padding-medium{padding:0}}@media (min-width: 62em){.duet-layout.padding-large{padding:0}}@media (min-width: 64.0625em){.duet-layout.padding-x-large{padding:0}}@media (min-width: 76.25em){.duet-layout.padding-xx-large{padding:0}}@media (min-width: 106.25em){.duet-layout.padding-xxx-large{padding:0}}.duet-layout.duet-center{display:flex;align-items:center;justify-content:center;width:100%;max-width:888px}@media (min-width: 36em){.duet-layout.duet-center{padding:0 48px}}@media (min-width: 48em){.duet-layout.duet-center{padding:0 72px}}@media (min-width: 62em){.duet-layout.duet-center{width:100%}}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main,.duet-sidebar,.duet-layout-top,.duet-layout-bottom{display:block;width:100%}.duet-layout-top{position:relative;display:block;width:100%}.duet-layout-top .duet-layout-top-wrapper{padding:0 20px;margin:0 auto}@media (min-width: 36em){.duet-layout-top .duet-layout-top-wrapper{padding:0 28px}}@media (min-width: 62em){.duet-layout-top .duet-layout-top-wrapper{padding:0 56px}}@media (min-width: 76.25em){.duet-layout-top .duet-layout-top-wrapper{max-width:1110px;padding:0}}.duet-center .duet-layout-top-wrapper{max-width:888px}@media (min-width: 36em){.duet-center .duet-layout-top-wrapper{padding:0 48px}}@media (min-width: 48em){.duet-center .duet-layout-top-wrapper{padding:0 72px}}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}@media (min-width: 62em){.duet-sidebar{min-width:256px;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container{width:auto;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container.has-tabs{margin-top:89px}}@media (min-width: 62em){.duet-sidebar-container.sticky{position:sticky}.duet-sidebar-container.sticky.with-links{top:calc(3rem + 20px)}.duet-sidebar-container.sticky.without-links{top:calc(4rem + 20px)}}";
 
@@ -64,24 +64,24 @@ const DuetLayout = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '53712da1e22dc258d30906570bf1271624379ed8', class: {
+        return (h(Host, { key: 'c3ba619c0c3088257b425ba8f5022ebef33c1100', class: {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '80dc2f3b86a02c22c7aebd8802bd332154c4a273', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '9f3f4c713d5b921ad78480072e3dcea4d4867d04', class: {
+            } }, h("div", { key: 'd627f63579dfb957bf3abe17191e8a8e943f0aae', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: '4586ff77f2ef4209020a2401eef63273527a2e27', class: {
                 "duet-layout-top": true,
                 "duet-center": this.center,
-            } }, h("div", { key: '7cd44f76b96b5e2bd6033cc044f08e75a10760ed', class: "duet-layout-top-wrapper" }, h("slot", { key: '7743f1fe659f31925b27a85a970e934506b935e7', name: "top" })))), h("div", { key: '637a68f8376e073f146c63f2c866b6f52722577e', class: {
+            } }, h("div", { key: 'daebb47e73054b59bb0459dc3327e0e60b17ebbe', class: "duet-layout-top-wrapper" }, h("slot", { key: '339fac00b53c0b4f532cfc77d5743217b5f72057', name: "top" })))), h("div", { key: 'bbf287d1f0aa701c40553a426b7a77b0a1c24c17', class: {
                 "duet-layout": true,
                 "has-sidebar": this.hasSidebar,
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: 'f6b2682dfb675be08976b23a485cf1a7ad76de0c', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '9ec618959d54d768b880f95e05df0e5aaf76de75', name: "page-heading" }), h("slot", { key: 'b3c960b48d55fb863854fc34e126b1a143b3d194', name: "main" })), this.hasSidebar && (h("aside", { key: '68671aab139ba365d60284909e489a78bd7438d3', class: "duet-sidebar" }, h("div", { key: '60a53e1fa61ccec8fa2b85f20b475c52e016b963', class: {
+            } }, h("main", { key: '0d75aa9aeb65fa61f8e0ff114cee467abe49f1cd', class: "duet-main" }, this.hasPageHeading && h("slot", { key: 'fd0ed7464c54122f1cfbbfbfc40f78d8c9ab41c7', name: "page-heading" }), h("slot", { key: '1004e4007a1d82e22147ddf3a883e8ddc9c7b0dc', name: "main" })), this.hasSidebar && (h("aside", { key: '167c6d2495c8bbc7cd0275f723e0810b9fc311b6', class: "duet-sidebar" }, h("div", { key: 'f0bbcbeb756bf18ba1b678c405c3890fb00ad857', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: 'a6131a1af98bb5cf2c6c808b15cea9e6996143f3', name: "sidebar" }))))))));
+            } }, h("slot", { key: 'b8b30e8b29bb87ea6a0c0891ca5f841d0921f72b', name: "sidebar" }))))))));
     }
     get element() { return getElement(this); }
 };

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

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement, H as Host } from './index-Cwhi6_oZ.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-D3450NfA.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
 import { w as watchForOptions } from './watch-options-BmMFVM-y.js';
 
 const duetListCss = "*,*::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;display:block;width:100%}.duet-list-component{margin-bottom:16px !important;width:100%}.duet-list-component.duet-p-0{padding:0 !important}.duet-list-component.duet-m-0{margin:0 !important}";
@@ -105,7 +105,7 @@ const DuetList = class {
      * Always the last one in the class.
      */
     render() {
-        return (h("dl", { key: '82930dea1fe1193f295b5888ed5f06a85693faaa', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '44602efe41782f5dc0221b0fe2dd2ac6dc905ae3' })));
+        return (h("dl", { key: 'c83e43f3d82e32198e0a5d45a0812b8358f6be07', class: { "duet-list-component": true, "duet-m-0": this.margin === "none" } }, h("slot", { key: '7a65328f555edf10f4da02166eebcfcf8b8f68f7' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -150,7 +150,7 @@ const DuetListItem = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e4cd01b6b0c03f3d82beba7c85400711e49f6582', class: {
+        return (h(Host, { key: '83029afa5ebc666926eb1572b8ad9a311bdbfcf1', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-no-stacking": !this.responsive,
                 "duet-list-item-breakpoint-x-small": this.breakpoint === "x-small",
@@ -158,7 +158,7 @@ const DuetListItem = class {
                 "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", { key: '9644bd50dfb2d6b45bd136bedcb6968f9a2675ba' }, h("slot", { key: 'db3550984b29dd4dad07eb4ab7d047652e83ac22', name: "label" })), h("dd", { key: '1e01b0449b667d1de8e9ba3ed9593725c5ce8353' }, h("slot", { key: 'c0662c72ff8ba3c2a13041b741b15ee1f9b0f544', name: "value" }))));
+            } }, h("dt", { key: '884936458d12b95cd553cd4dc4d8a237cd8e5830' }, h("slot", { key: 'b17473caf7b410acf49f8c68f9ae53b3071397d7', name: "label" })), h("dd", { key: 'e5c6aa8b8d8998d500d27493896a288f71861df6' }, h("slot", { key: '7a6a3b223c394bb3376d7734791cfd439076d5f7', name: "value" }))));
     }
     get element() { return getElement(this); }
 };

package/lib/esm/duet-menu-bar-button.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Cwhi6_oZ.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-D3450NfA.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
 
 const duetMenuBarButtonCss = "*,*::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;height:100%}.duet-menu-bar-button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;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:inherit;color:inherit;text-align:center;text-decoration:none;cursor:pointer}.duet-menu-bar-button:focus{outline:2px solid;outline-offset:-4px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-menu-bar-button:focus,.duet-menu-bar-button:focus.duet-theme-turva{outline:2px solid;outline-offset:-4px;outline-color:rgba(53, 79, 101, 0.8)}.duet-menu-bar-button .menu-bar-button-icon{width:20px;height:20px}@media (min-width: 62em){.duet-menu-bar-button .menu-bar-button-icon{width:16px;height:16px}}@media (min-width: 62em){.duet-menu-bar-button{padding:0 16px}}@media (min-width: 76.25em){.duet-menu-bar-button{padding:0 28px}}@media (min-width: 62em){.duet-menu-bar-button:hover{color:rgb(0, 119, 179)}}.duet-theme-turva.duet-menu-bar-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}@media (min-width: 62em){.duet-theme-turva.duet-menu-bar-button:hover{color:rgb(230, 23, 64)}}";
 
@@ -53,10 +53,10 @@ const DuetMenuBarButton = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0e1e537a15d9a7b7d94a2ce24a71281b4757b1d5', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: 'c7ab5d711a28d54af476fdf133e8f92bce25f020', ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { key: 'e826fdb0b0fb223aea52738971ddbc17f6004833', role: "listitem", onfocus: () => this.setFocus() }, h("button", { key: '350dd3a06df24d5f3a3f3dccb4a4a48b4a43e9f7', ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '922a6e2fa015b52aac218ce9e803c75a57465310', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: 'd85350f1fb803be4e524803b0bea4acc62f569fb' }))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { key: '96911d1ad50d5b247e27d3e6b5712326434a6354', class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '004e73cb6a5e6f3126a45d9fa7184f7b424d4f60' }))));
     }
     get element() { return getElement(this); }
 };