@duetds/components 4.32.0 → 4.33.0

package/hydrate/index.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /*!
- Stencil Mock Doc v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v2.11.0 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -4701,7 +4701,8 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'duet';
-const BUILD = /* duet */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: true, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: true, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* duet */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: true, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: true, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.2.3"};
 
 const TAB_KEY = 9;
 var appGlobalScript = () => {
@@ -5170,7 +5171,8 @@ const createElm = (e, t, o, n) => {
  const n = createTime("scheduleUpdate", e.$cmpMeta$.$tagName$), s = e.$lazyInstance$ ;
  let l;
  return t ? ((e.$flags$ |= 256, e.$queuedListeners$ && (e.$queuedListeners$.map((([e, t]) => safeCall(s, e, t))), 
- e.$queuedListeners$ = null)), (l = safeCall(s, "componentWillLoad"))) : (BUILD.cmpWillUpdate ), n(), then(l, (() => updateComponent(e, s, t)));
+ e.$queuedListeners$ = null)), (l = safeCall(s, "componentWillLoad"))) : (BUILD.cmpWillUpdate ), (l = then(l, (() => safeCall(s, "componentWillRender")))), 
+ n(), then(l, (() => updateComponent(e, s, t)));
 }, updateComponent = async (e, t, o) => {
  const n = e.$hostElement$, s = createTime("update", e.$cmpMeta$.$tagName$), l = n["s-rc"];
  o && attachStyles(e);
@@ -5635,6 +5637,9 @@ const getLocale = (lang) => {
   }
   throw new Error(`Locale for "${lang}" not found`);
 };
+/**
+ * Takes any json object that is passed and/or htmlencoded and converts it to proper json
+ */
 const sanitizeString = (string) => {
   const argIsString = typeof string === "string";
   if (argIsString) {
@@ -5642,7 +5647,7 @@ const sanitizeString = (string) => {
       return JSON.parse(convertHtmlQuotes(string));
     }
     catch (e) {
-      console.log("getLocaleString received a string, that didnt parse to json object", string, e);
+      console.log("sanitizeString received a string, that didnt parse to json object", string, e);
     }
   }
   return string;
@@ -5654,7 +5659,7 @@ const sanitizeString = (string) => {
  * @param {object} langObject - {fi: "finnish", sv: "swedish", en: "english"} | string will get JSON.parsed
  * @param {boolean} languageOverride = false - in case you want to override the actual language set in html tag
  * @default {object} {locale: "fi-FI", money: "€"}
- * @returns {(string|Object)} given example contains {fi:"something"} and langua===fi this will return "something"
+ * @returns {(string|Object)} given example contains {fi:"something"} and language===fi this will return "something"
  */
 const getLocaleString = (langObject, languageOverride) => {
   const obj = sanitizeString(langObject);
@@ -5962,6 +5967,7 @@ const sizeTappableSquare = "48px";
 const sizeIconXSmall = "16px";
 const sizeIconXxxSmall = "7px";
 const sizeButtonBorder = "2px";
+const sizeButtonTinyBorder = "1px";
 const sizeIconMedium = "24px";
 const sizeIconSmall = "20px";
 const opacity85 = "0.85";
@@ -6111,6 +6117,7 @@ var tokens$2 = /*#__PURE__*/Object.freeze({
   sizeIconXSmall: sizeIconXSmall,
   sizeIconXxxSmall: sizeIconXxxSmall,
   sizeButtonBorder: sizeButtonBorder,
+  sizeButtonTinyBorder: sizeButtonTinyBorder,
   sizeIconMedium: sizeIconMedium,
   sizeIconSmall: sizeIconSmall,
   opacity85: opacity85,
@@ -6676,7 +6683,7 @@ class DuetCard {
   }; }
 }
 
-const duetCheckboxCss = "*.sc-duet-checkbox,*.sc-duet-checkbox::after,*.sc-duet-checkbox::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-checkbox-h{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;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-checkbox-h:last-child,.sc-duet-checkbox-h:last-of-type{margin-right:0 !important}.sc-duet-checkbox-h:last-of-type:not(:only-child){margin-bottom:0 !important}.duet-m-0.sc-duet-checkbox-h{margin:0 !important}.duet-label.sc-duet-checkbox{position:relative;z-index:100;display:inline;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:#00294d;vertical-align:top;cursor:pointer;background:transparent;transition:300ms ease}.duet-theme-turva.sc-duet-checkbox .duet-label.sc-duet-checkbox{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-label.sc-duet-checkbox span.sc-duet-checkbox{display:inline-block;width:calc(100% - 32px);font-size:1rem;font-weight:400;vertical-align:top}.duet-checkbox-container.sc-duet-checkbox{position:relative;width:100%;height:100%}.duet-checkbox.sc-duet-checkbox{padding:14px !important;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;cursor:pointer;opacity:0}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{z-index:100;display:inline-block;width:20px;height:20px;margin:2px 10px 1px 1px;vertical-align:top;content:\"\";background:white;border:1px solid #00294d;border-radius:4px}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#171c3a}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#00294d;border:1px solid #00294d}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#171c3a;border-color:#171c3a}.duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox{position:static}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::after{position:absolute;top:6px;left:5px;z-index:200;width:12px;height:12px;pointer-events:none;content:\"\";background:transparent url(\"data:image/svg+xml,%3Csvg%20fill%3D%27white%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M23.374.287a1.5%2C1.5%2C0%2C0%2C0-2.093.345L7.246%2C20.2%2C2.561%2C15.511A1.5%2C1.5%2C0%2C1%2C0%2C.439%2C17.632l5.935%2C5.934a1.525%2C1.525%2C0%2C0%2C0%2C2.279-.186l15.066-21A1.5%2C1.5%2C0%2C0%2C0%2C23.374.287Z%27%20%2F%3E%3C%2Fsvg%3E\") no-repeat 0 0;background-size:100% auto}.duet-checkbox[disabled].sc-duet-checkbox{cursor:default}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:#657787}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:#747475}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#cfd2d4}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#cfcfd1}.duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#657787;border:1px solid #657787}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#747475;border-color:#747475}.duet-label-hidden.sc-duet-checkbox .duet-label.sc-duet-checkbox span.sc-duet-checkbox{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const duetCheckboxCss = "*.sc-duet-checkbox,*.sc-duet-checkbox::after,*.sc-duet-checkbox::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-checkbox-h{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;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-checkbox-h:last-child,.sc-duet-checkbox-h:last-of-type{margin-right:0 !important}.sc-duet-checkbox-h:last-child:not(:only-child){margin-bottom:0 !important}.duet-m-0.sc-duet-checkbox-h{margin:0 !important}.duet-label.sc-duet-checkbox{position:relative;z-index:100;display:inline;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:#00294d;vertical-align:top;cursor:pointer;background:transparent;transition:300ms ease}.duet-theme-turva.sc-duet-checkbox .duet-label.sc-duet-checkbox{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-label.sc-duet-checkbox span.sc-duet-checkbox{display:inline-block;width:calc(100% - 32px);font-size:1rem;font-weight:400;vertical-align:top}.duet-checkbox-container.sc-duet-checkbox{position:relative;width:100%;height:100%}.duet-checkbox.sc-duet-checkbox{padding:14px !important;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;cursor:pointer;opacity:0}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{z-index:100;display:inline-block;width:20px;height:20px;margin:2px 10px 1px 1px;vertical-align:top;content:\"\";background:white;border:1px solid #00294d;border-radius:4px}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#171c3a}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#00294d;border:1px solid #00294d}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#171c3a;border-color:#171c3a}.duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva.sc-duet-checkbox .duet-checkbox.sc-duet-checkbox:focus+label.sc-duet-checkbox::before{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-checkbox.sc-duet-checkbox+label.sc-duet-checkbox{position:static}.duet-checkbox.sc-duet-checkbox:checked+label.sc-duet-checkbox::after{position:absolute;top:6px;left:5px;z-index:200;width:12px;height:12px;pointer-events:none;content:\"\";background:transparent url(\"data:image/svg+xml,%3Csvg%20fill%3D%27white%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M23.374.287a1.5%2C1.5%2C0%2C0%2C0-2.093.345L7.246%2C20.2%2C2.561%2C15.511A1.5%2C1.5%2C0%2C1%2C0%2C.439%2C17.632l5.935%2C5.934a1.525%2C1.525%2C0%2C0%2C0%2C2.279-.186l15.066-21A1.5%2C1.5%2C0%2C0%2C0%2C23.374.287Z%27%20%2F%3E%3C%2Fsvg%3E\") no-repeat 0 0;background-size:100% auto}.duet-checkbox[disabled].sc-duet-checkbox{cursor:default}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:#657787}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox{color:#747475}.duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#cfd2d4}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox+label.sc-duet-checkbox::before{border-color:#cfcfd1}.duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#657787;border:1px solid #657787}.duet-theme-turva.sc-duet-checkbox .duet-checkbox[disabled].sc-duet-checkbox:checked+label.sc-duet-checkbox::before{background:#747475;border-color:#747475}.duet-label-hidden.sc-duet-checkbox .duet-label.sc-duet-checkbox span.sc-duet-checkbox{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
 class DuetCheckbox {
   constructor(hostRef) {
@@ -6809,11 +6816,24 @@ class DuetCheckbox {
 
 var messagingInfo={"title":"messaging-info","tags":"messaging info information circle","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z\"/><circle cx=\"11.625\" cy=\"7.125\" r=\"1.125\"/><path d=\"M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z\"/></svg>"};
 
+const focusElement = (element) => {
+  if ("setFocus" in element) {
+    element.setFocus();
+  }
+  else {
+    element.focus();
+  }
+};
+const FocusGuard = ({ moveFocusTo }) => {
+  return hAsync("div", { class: "duet-focus-guard", "aria-hidden": "true", tabIndex: 0, onFocus: () => focusElement(moveFocusTo) });
+};
+
 const duetChoiceCss = "*.sc-duet-choice,*.sc-duet-choice::after,*.sc-duet-choice::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-h{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:inline-flex;flex-direction:column;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-choice-h:last-child,.sc-duet-choice-h:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){.sc-duet-choice-h{width:100%}}.duet-expand.sc-duet-choice-h{width:100% !important}.duet-m-0.sc-duet-choice-h{margin:0 !important}.duet-fixed.sc-duet-choice-h{width:auto !important}.vertical.sc-duet-choice-h{margin-right:0 !important}.horizontal.sc-duet-choice-h{margin-bottom:0 !important}@media (min-width: 48em){.horizontal-responsive.sc-duet-choice-h{margin-bottom:0 !important;margin-right:16px !important}.horizontal-responsive.sc-duet-choice-h:last-child,.horizontal-responsive.sc-duet-choice-h:last-of-type{margin-right:0 !important}}.sc-duet-choice-h:last-child:not(:only-child){margin-right:0 !important}.duet-choice-card.sc-duet-choice{position:relative;display:block;width:100%;min-width:8rem;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;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;color:#00294d !important;text-align:left;background:white;border-width:2px}.duet-choice-card.duet-p-0.sc-duet-choice{padding:0 !important}.duet-choice-card.duet-m-0.sc-duet-choice{margin:0 !important}.duet-theme-turva.sc-duet-choice .duet-choice-card.sc-duet-choice{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a !important}.duet-choice-card-flextainer.sc-duet-choice{display:flex}.duet-choice-label.sc-duet-choice{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:20px 48px 20px 16px;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;border:2px solid #e1e3e6;border-radius:4px;transition:background-color 150ms ease}.has-info.sc-duet-choice .duet-choice-label.sc-duet-choice{padding-right:110px;border-top-right-radius:0;border-bottom-right-radius:0}.info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-bottom-right-radius:0;border-bottom-left-radius:0}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:#e4e4e6}.duet-theme-turva.sc-duet-choice .info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:#e4e4e6}.duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#909599}.duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-checkmark-container.sc-duet-choice{border-color:#909599}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#747475}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-checkmark-container.sc-duet-choice{border-color:#747475}.duet-theme-turva.sc-duet-choice .info.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#747475}.duet-choice-label.sc-duet-choice:active{opacity:0.75;transition:none !important}.has-icon.sc-duet-choice .duet-choice-label.sc-duet-choice{padding-left:48px}.checked.sc-duet-choice .duet-choice-label.sc-duet-choice{color:#0077b3 !important;background:#f3f9fc;border-color:#0077b3 !important}.checked.sc-duet-choice .duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#0077b3}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice .duet-choice-label.sc-duet-choice{color:#171c3a !important;background:#f5f5f7;border-color:#171c3a !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice .duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#c60c30}.checked.collapsible.sc-duet-choice .duet-choice-label.sc-duet-choice{border-bottom:0 !important;border-bottom-right-radius:0;border-bottom-left-radius:0}input.sc-duet-choice:focus{outline:0}.user-is-tabbing.sc-duet-choice-h input.sc-duet-choice:checked:focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3)}.user-is-tabbing.sc-duet-choice-h input.sc-duet-choice:not(:checked):focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.user-is-tabbing.duet-theme-turva.sc-duet-choice-h input.sc-duet-choice:checked:focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2)}.user-is-tabbing.duet-theme-turva.sc-duet-choice-h input.sc-duet-choice:not(:checked):focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{color:#657787 !important;cursor:default !important;background:#f5f8fa !important;border-color:#e1e3e6 !important}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:#657787 !important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{color:#747475 !important;background:#f5f5f7 !important;border-color:#e4e4e6 !important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:#747475 !important}.checked.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:#e1e3e6 !important;border-color:#e1e3e6 !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:#e4e4e6 !important;border-color:#e4e4e6 !important}.duet-checkmark-container.sc-duet-choice{position:absolute;top:17.7777777778px;right:16px;width:20px;height:20px;border:1px solid #909599;border-radius:4px;transition:border 300ms ease}.duet-theme-turva.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#747475}.checked.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#0077b3;border-color:#0077b3;transition:none}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#171c3a;border-color:#171c3a !important}.duet-checkmark-container.duet-checkmark-radio.sc-duet-choice{border-radius:50%}[disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#cfd2d4 !important}.duet-theme-turva.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#cfcfd1 !important}.checked.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#cfd2d4 !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#cfcfd1 !important}.duet-checkmark.sc-duet-choice{position:absolute;top:10px;left:3px;width:5.3333333333px;height:11.8518518519px;border-top:2px solid white;border-right:2px solid white;opacity:1;transform:scaleX(-1) rotate(135deg) translateZ(0);transform-origin:left top;animation-name:duet-checkmark;animation-duration:600ms;animation-timing-function:ease-out;animation-fill-mode:forwards}@keyframes duet-checkmark{0%{width:0;height:0;opacity:1}20%{width:5.3333333333px;height:0;opacity:1}40%,100%{width:5.3333333333px;height:11.8518518519px;opacity:1}}.duet-choice-card-icon.sc-duet-choice{position:absolute;top:50%;left:16px;transform:translateY(-50%)}.duet-choice-card-icon.sc-duet-choice duet-icon.sc-duet-choice{display:block}.duet-choice-section-hidden.sc-duet-choice{display:none}.duet-choice-card-info.duet-choice-card-collapsed.sc-duet-choice,.duet-choice-card-collapsed.duet-choice-card-collapsible.sc-duet-choice{position:relative;width:auto;padding:0 !important;background:unset !important;border:0;border-radius:0}.duet-choice-card-info.sc-duet-choice,.duet-choice-card-collapsible.sc-duet-choice{padding:28px !important;position:relative;z-index:200;width:100%;font-weight:400;color:#00294d;border:2px solid #e1e3e6;border-top:0;border-radius:0 0 4px 4px}.duet-theme-turva.sc-duet-choice .duet-choice-card-info.sc-duet-choice,.duet-theme-turva.sc-duet-choice .duet-choice-card-collapsible.sc-duet-choice{color:#171c3a;border-color:#171c3a}.checked.sc-duet-choice .duet-choice-card-info.sc-duet-choice,.checked.sc-duet-choice .duet-choice-card-collapsible.sc-duet-choice{display:block}.duet-choice-card-info-expanded.sc-duet-choice,.duet-choice-card-collapsible-expanded.sc-duet-choice{display:block}.duet-choice-card-collapsible.sc-duet-choice{background:white;border:2px solid #0077b3;border-top:0}.duet-choice-card-collapsible.duet-theme-turva.sc-duet-choice{background:white;border-color:#171c3a}.duet-choice-card-collapsible-disabled.sc-duet-choice{background:#f5f8fa;border-color:#e1e3e6}.duet-choice-card-collapsible-disabled.duet-theme-turva.sc-duet-choice{background:#f5f5f7;border-color:#e4e4e6}.duet-choice-card-info.sc-duet-choice{font-size:0.875rem;line-height:1.5;background:#f5f8fa;transition:150ms ease-out}.duet-choice-card-info.duet-theme-turva.sc-duet-choice{background:#f5f5f7;border-color:#e4e4e6}.duet-choice-info-toggle.sc-duet-choice{display:flex;flex-shrink:0;justify-content:center;width:57.6px;padding-top:18px;cursor:pointer;background:white;border:2px solid #e1e3e6;border-left:0 none;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-appearance:none;appearance:none}.duet-choice-info-toggle[aria-expanded=true].sc-duet-choice{background:#f5f8fa;border-bottom:0;border-bottom-right-radius:0}.duet-choice-info-toggle[disabled].sc-duet-choice{pointer-events:none;background:#f5f8fa !important;border-color:#e1e3e6 !important}.duet-choice-info-toggle[disabled].sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#909599 !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice{background:#f5f5f7 !important;border-color:#e4e4e6 !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#747475 !important}.duet-choice-info-toggle.sc-duet-choice:focus{outline:none}.user-is-tabbing.sc-duet-choice-h .duet-choice-info-toggle.sc-duet-choice:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-choice-info-toggle.sc-duet-choice{border-left-color:#909599}.checked.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{border-left-color:#0077b3 !important}.duet-choice-info-toggle.sc-duet-choice duet-icon.sc-duet-choice{display:block}.duet-choice-info-toggle.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#0077b3}.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#c60c30}.duet-choice-input.sc-duet-choice{position:absolute !important;width:auto;height:auto;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);color:transparent}";
 
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot info - Info content. Anything inserted into this slot is displayed in a collapsible info box.
+ * @slot collapsible_header - header that is only added to collapsible element, this header should be used when the components collapsible area contains additional interactive elements (such as form items) and should be user for a short description of the content below it, it is mandatory for good accessibility to use this - and aria-decribe-by will point to it. If you use the collapsible area with simple text - describe-by will point to this area
  * @slot additional - Additional content. Anything inserted into this slot is displayed as additional content under the label and caption
  */
 class DuetChoice {
@@ -6822,8 +6842,11 @@ class DuetChoice {
     this.duetChange = createEvent$2(this, "duetChange", 7);
     this.duetFocus = createEvent$2(this, "duetFocus", 7);
     this.duetBlur = createEvent$2(this, "duetBlur", 7);
+    this.hasHeader = false;
     this.choiceId = createID("DuetChoice");
     this.expandId = createID("DuetChoiceExpand");
+    this.headerId = createID("DuetChoiceHeader");
+    this.infoButtonId = createID("DuetChoiceInfoButton");
     /**
      * State() variables
      * Inlined decorator, alphabetical order.
@@ -6901,6 +6924,24 @@ class DuetChoice {
      * browser from displaying its own validation errors.
      */
     this.required = false;
+    /**
+     * Placeholder defaults
+     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+     */
+    this.infoLabelDefaults = {
+      fi: "Lisätietoja",
+      en: "More information about",
+      sv: "Mera information om",
+    };
+    /**
+     * Hint text to display before the user types into the date picker input.
+     * @default  {
+     *     fi: "Lisätietoja",
+     *     en: "More information about",
+     *     sv: "Mera information om",
+     *   }
+     */
+    this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
     this.onMouseEnter = () => {
       this.isHovering = true;
     };
@@ -6975,6 +7016,7 @@ class DuetChoice {
   componentWillLoad() {
     inheritGlobalTheme(this);
     this.hasInfo = !!this.element.querySelector("[slot='info']");
+    this.hasHeader = !!this.element.querySelector('[slot="header"]');
     this.hasAdditional = !!this.element.querySelector("[slot='additional']");
   }
   /**
@@ -6995,8 +7037,11 @@ class DuetChoice {
   handleHostKeyDown() {
     this.isKeyDown = true;
   }
-  handleHostKeyUp() {
+  handleHostKeyUp(ev) {
     this.isKeyDown = false;
+    if (isEscapeKey(ev) && this.isInfoOpen) {
+      this.toggleInfo();
+    }
   }
   /**
    * Sets focus on the specified `duet-choice`. Use this method instead of the global
@@ -7010,7 +7055,12 @@ class DuetChoice {
       return this.accessibleDescribedBy;
     }
     if (this.collapsible || this.hasInfo) {
-      return this.expandId;
+      if (this.hasHeader) {
+        return this.headerId;
+      }
+      else {
+        return this.expandId;
+      }
     }
     return null;
   }
@@ -7042,6 +7092,7 @@ class DuetChoice {
    */
   render() {
     const identifier = this.identifier || this.choiceId;
+    console.log(this.element);
     return (hAsync(Host, { class: {
         horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
         "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
@@ -7059,23 +7110,13 @@ class DuetChoice {
         info: this.isInfoOpen,
         collapsible: this.collapsible,
         "duet-p-0": this.padding === "none",
-      } }, hAsync("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), hAsync("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering }, onClick: this.onClick }, this.icon && (hAsync("div", { class: "duet-choice-card-icon" }, hAsync("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.label, this.hasInfo ||
-      // this is an incredibly dirty way of both hiding the expanded / collapsed state text
-      // and an extremely bad way of notifying any screenreaders about state - unfortunately
-      // this is extremely difficult to do consistently across browsers so this hack is the best way todo it
-      (this.collapsible && (hAsync("span", { lang: "en", style: { opacity: "0", pointerEvents: "none", fontSize: "0", lineHeight: "0" } }, this.collapsible
-        ? this.checked
-          ? ", Expanded"
-          : ", Collapsed"
-        : this.isInfoOpen
-          ? ", Expanded"
-          : ", Collapsed"))), this.caption && (hAsync("div", null, hAsync("duet-spacer", { size: "xx-small" }), hAsync("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (hAsync("div", null, hAsync("duet-spacer", { size: "xx-small" }), hAsync("slot", { name: "additional" }))), hAsync("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && hAsync("div", { class: "duet-checkmark" })))), this.hasInfo && !this.collapsible && (hAsync("button", { class: {
+      } }, hAsync("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), hAsync("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering }, onClick: this.onClick }, this.icon && (hAsync("div", { class: "duet-choice-card-icon" }, hAsync("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.label, this.caption && (hAsync("div", null, hAsync("duet-spacer", { size: "xx-small" }), hAsync("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (hAsync("div", null, hAsync("duet-spacer", { size: "xx-small" }), hAsync("slot", { name: "additional" }))), hAsync("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && hAsync("div", { class: "duet-checkmark" })))), this.hasInfo && !this.collapsible && (hAsync("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
         "duet-choice-info-toggle": true,
         "duet-theme-turva": this.theme === "turva",
-      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.disabled || this.groupDisabled, "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, hAsync("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), hAsync("div", { class: "duet-choice-info-icon" }, hAsync("duet-icon", { icon: messagingInfo.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible || this.hasInfo ? (hAsync("div", { class: this.getClassNames(), id: this.expandId }, hAsync("span", { class: {
+      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.disabled || this.groupDisabled, "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, hAsync("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), hAsync("div", { class: "duet-choice-info-icon" }, hAsync("duet-icon", { icon: messagingInfo.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible || this.hasInfo ? (hAsync("div", { class: this.getClassNames(), id: this.expandId }, hAsync("span", { class: {
         "duet-choice-section-visible": this.collapsible ? this.checked : this.isInfoOpen,
         "duet-choice-section-hidden": this.collapsible ? !this.checked : !this.isInfoOpen,
-      } }, this.hasInfo ? (hAsync("span", null, hAsync("slot", { name: "info" }), hAsync("slot", null))) : (hAsync("span", null, hAsync("slot", null)))))) : null));
+      } }, hAsync("span", { id: this.headerId }, hAsync("slot", { name: "header" })), this.hasInfo ? (hAsync("span", null, hAsync("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, hAsync("slot", { name: "info" })), hAsync("slot", null))) : (hAsync("span", null, hAsync("slot", null)))), this.isInfoOpen && hAsync(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
   }
   get element() { return getElement(this); }
   static get style() { return duetChoiceCss; }
@@ -7107,6 +7148,8 @@ class DuetChoice {
       "groupResponsive": [4, "group-responsive"],
       "disabled": [516],
       "required": [4],
+      "infoLabelDefaults": [1, "accessible-label-info-default"],
+      "infoLabel": [1, "info-label"],
       "isHovering": [32],
       "isInfoOpen": [32],
       "isBlurred": [32],
@@ -7118,19 +7161,41 @@ class DuetChoice {
   }; }
 }
 
-const watchForOptions = (containerEl, tagName, onChange) => {
+const watchFor = (containerEl, tagName, onChange, changeHandler, options = {
+  childList: true,
+  subtree: true,
+}) => {
   let mutation;
   if (typeof MutationObserver !== "undefined") {
     mutation = new MutationObserver(mutationList => {
-      onChange(getSelectedOption(mutationList, tagName));
-    });
-    mutation.observe(containerEl, {
-      childList: true,
-      subtree: true,
+      onChange(changeHandler(mutationList, tagName));
     });
+    mutation.observe(containerEl, options);
   }
   return mutation;
 };
+const watchForOptions = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getSelectedOption);
+};
+const watchForElement = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getElementItem, {
+    childList: true,
+    subtree: true,
+  });
+};
+const getElementItem = (mutationList) => {
+  let addedNode = false;
+  let removedNode = false;
+  mutationList.forEach(mut => {
+    if (mut.addedNodes.length) {
+      addedNode = true;
+    }
+    if (mut.removedNodes.length) {
+      removedNode = true;
+    }
+  });
+  return { addedNode, removedNode, mutationList };
+};
 const getSelectedOption = (mutationList, tagName) => {
   let newOption;
   mutationList.forEach(mut => {
@@ -7438,6 +7503,7 @@ const size_tappable_square = "48px";
 const size_icon_x_small = "16px";
 const size_icon_xxx_small = "7px";
 const size_button_border = "2px";
+const size_button_tiny_border = "1px";
 const size_icon_medium = "24px";
 const size_icon_small = "20px";
 const opacity_85 = "0.85";
@@ -7585,6 +7651,7 @@ var tokens = {
 	size_icon_x_small: size_icon_x_small,
 	size_icon_xxx_small: size_icon_xxx_small,
 	size_button_border: size_button_border,
+	size_button_tiny_border: size_button_tiny_border,
 	size_icon_medium: size_icon_medium,
 	size_icon_small: size_icon_small,
 	opacity_85: opacity_85,
@@ -7735,6 +7802,7 @@ var tokens$1 = /*#__PURE__*/Object.freeze({
   size_icon_x_small: size_icon_x_small,
   size_icon_xxx_small: size_icon_xxx_small,
   size_button_border: size_button_border,
+  size_button_tiny_border: size_button_tiny_border,
   size_icon_medium: size_icon_medium,
   size_icon_small: size_icon_small,
   opacity_85: opacity_85,
@@ -7959,18 +8027,6 @@ class DuetCookieConsent {
   }; }
 }
 
-const focusElement = (element) => {
-  if ("setFocus" in element) {
-    element.setFocus();
-  }
-  else {
-    element.focus();
-  }
-};
-const FocusGuard = ({ moveFocusTo }) => {
-  return hAsync("div", { class: "duet-focus-guard", "aria-hidden": "true", tabIndex: 0, onFocus: () => focusElement(moveFocusTo) });
-};
-
 const formatOptionsShort = { day: "numeric", month: "long" };
 const formatOptionsLong = { day: "numeric", month: "long", year: "numeric" };
 const i18n$2 = {
@@ -8403,14 +8459,14 @@ class DuetDatePicker {
      */
     this.margin = "auto";
     /**
-     * The currently active language. This setting changes the month/year/day
+     * The currently active language. This setting changes the month/year/day.
      * names and button labels as well as all screen reader labels.
-     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing.
      * @default "fi"
      */
     this.language = getLanguage();
     /**
-     * Placeholder defaults
+     * Placeholder defaults.
      * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
      */
     this.placeholderDefaults = {
@@ -8473,7 +8529,7 @@ class DuetDatePicker {
      */
     this.min = "";
     /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD
+     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
      * This setting can be used alone or together with the min property.
      */
     this.max = "";
@@ -8857,6 +8913,338 @@ class DuetDivider {
   }; }
 }
 
+const debounce = (func, timeout = 50) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(undefined, args);
+    }, timeout);
+  };
+};
+
+const duetEditableTableCss = "/*!@duet-editable-table*/duet-editable-table.sc-duet-editable-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@.duet-editable-table-header tr .duet-editable-table-header-hidden*/.duet-editable-table-header.sc-duet-editable-table tr.sc-duet-editable-table .duet-editable-table-header-hidden.sc-duet-editable-table{padding:0 !important;font-size:0;border-bottom:0}";
+
+class DuetEditableTable {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * State() variables
+     * @internal
+     */
+    this.tick = Date.now();
+    /**
+     * Map of items that contain list of things.
+     */
+    this.items = new Map();
+    /**
+     * Array of internationalized defaults for the default groups labels.
+     */
+    this.groupsLabelDefaults = {
+      fi: "Kaikki",
+      en: "All items",
+      sv: "Alla objekt",
+    };
+    /**
+     * Array of internationalized defaults for the default action labels.
+     */
+    this.actionLabelDefaults = {
+      fi: "Toiminnot",
+      en: "Actions",
+      sv: "Handlingar",
+    };
+    /**
+     * Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions).
+     * @default { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }.
+     * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}].
+     */
+    this.groups = [
+      { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults },
+    ];
+    /**
+     * Array of actions that are mapped via the map variable to the various groups defined in group.
+     * @default undefined
+     * @example [{
+                variation: "default",
+                icon: "action-edit-2",
+                id: "edit",
+                map: ["success"],
+                label: {
+                  fi: " Label",
+                  en: " Label",
+                  sv: " Label",
+                }
+              }]
+     */
+    this.actions = undefined;
+    /**
+     * Shows or hides the table labels.
+     */
+    this.hideGroups = false;
+    /**
+     * Exposes the aria role for optimizing accessibility.
+     */
+    this.accessibleRole = undefined;
+    /**
+     * Private methods.
+     */
+    this.kick = debounce(() => {
+      this.tick = Date.now();
+    }, 100); // will trigger re-render
+    this.filterMap = needle => {
+      if (needle === "all") {
+        return Array.from(this.items);
+      }
+      return Array.from(this.items).filter(item => needle === item[1].group);
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    if (typeof this.groups === "string") {
+      this.internalGroupArray = sanitizeString(this.groups);
+    }
+    else {
+      this.internalGroupArray = this.groups;
+    }
+    if (typeof this.actions === "string") {
+      this.internalActionsArray = sanitizeString(this.actions);
+    }
+    else {
+      this.internalActionsArray = this.actions;
+    }
+    inheritGlobalTheme(this);
+  }
+  /**
+   * Method to force an update of a tabular data array.
+   * when called the method will rerender the entire tabular structure.
+   */
+  async updateTable(passedItems = undefined) {
+    this.items = new Map(passedItems || this.items);
+    this.kick();
+  }
+  render() {
+    return (hAsync(Host, { class: {
+        "duet-theme-turva": this.theme === "turva",
+      } }, this.internalGroupArray.map(group => {
+      const currentGroup = this.filterMap(group.id);
+      if (!currentGroup.length) {
+        return;
+      }
+      return (hAsync("duet-table", { variation: "plain", breakpoint: "none", role: "", margin: this.hideGroups ? "none" : "auto" }, hAsync("table", { class: "duet-editable-table", "aria-role": this.accessibleRole }, hAsync("thead", { class: "duet-editable-table-header" }, hAsync("tr", null, hAsync("th", { class: {
+          "duet-editable-table-header-hidden": this.hideGroups,
+        } }, !this.hideGroups ? (getLocaleString(group.label)) : (hAsync("duet-visually-hidden", null, getLocaleString(group.label)))), hAsync("th", { class: {
+          "duet-editable-table-header-hidden": this.hideGroups,
+        } }, hAsync("duet-visually-hidden", null, group.actionLabel
+        ? getLocaleString(group.actionLabel)
+        : getLocaleString(this.actionLabelDefaults))))), hAsync("tbody", null, currentGroup.map(dataAsArray => {
+        const [key, value] = dataAsArray;
+        return (hAsync("duet-editable-table-item", { keyName: key, data: Object.assign({}, value), groupId: group.id, part: group.id, actions: this.internalActionsArray }));
+      })))));
+    })));
+  }
+  get element() { return getElement(this); }
+  static get style() { return duetEditableTableCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-editable-table",
+    "$members$": {
+      "items": [1040],
+      "groupsLabelDefaults": [16],
+      "actionLabelDefaults": [16],
+      "groups": [1],
+      "actions": [1],
+      "hideGroups": [4, "hide-table-labels"],
+      "accessibleRole": [1, "accessible-role"],
+      "theme": [1025],
+      "tick": [32],
+      "updateTable": [64]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
+const duetEditableTableButtonCss = "*.sc-duet-editable-table-button,*.sc-duet-editable-table-button::after,*.sc-duet-editable-table-button::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-editable-table-button-h button.sc-duet-editable-table-button{display:flex;align-content:space-between;justify-content:center;min-width:32px;max-width:32px;height:100%;min-height:32px;max-height:32px;padding:0;margin:0;cursor:pointer !important;background-color:transparent;border:1px solid;border-radius:50%}.sc-duet-editable-table-button-h button.sc-duet-editable-table-button duet-icon.sc-duet-editable-table-button{align-self:center}";
+
+class DuetEditableTableButton {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.duetEditableItemAction = createEvent$2(this, "duetEditableItemAction", 7);
+    this.isHovering = false;
+    /**
+     * Theme of the empty state component.
+     */
+    this.theme = "";
+    /**
+     * action items passed from host component
+     * @internal
+     */
+    this.actions = undefined;
+    /**
+     * uid that gets passed along when the action is emitted
+     * @internal
+     */
+    this.uid = "";
+    /**
+     * group associated with action
+     * @internal
+     */
+    this.group = "";
+    /**
+     * key of the item in the map
+     * @internal
+     */
+    this.keyName = "";
+    this.onMouseEnter = () => {
+      this.isHovering = true;
+    };
+    this.onMouseLeave = () => {
+      this.isHovering = false;
+    };
+  }
+  /**
+   /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   /**
+   * private functions
+   */
+  emitActionEvent(ev) {
+    this.duetEditableItemAction.emit({
+      originalEvent: ev,
+      uid: this.uid,
+      group: this.group,
+      action: this.actions.id,
+      keyName: this.keyName,
+      component: "duet-editable-table-item",
+    });
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (hAsync("button", { style: {
+        "border-color": this.isHovering
+          ? getColorByName(this.actions.color_hover)
+          : getColorByName(this.actions.color),
+      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "menuitem", class: "duet-editable-table-actions-items-button", "aria-label": this.actions.label ? getLocaleString(this.actions.label) : undefined, onClick: ev => this.emitActionEvent(ev) }, hAsync("duet-icon", { class: "duet-editable-table-actions-items-icon", size: "x-small", name: this.actions.icon, color: this.isHovering ? this.actions.color_hover : this.actions.color, margin: "none" })));
+  }
+  get el() { return getElement(this); }
+  static get style() { return duetEditableTableButtonCss; }
+  static get cmpMeta() { return {
+    "$flags$": 2,
+    "$tagName$": "duet-editable-table-button",
+    "$members$": {
+      "theme": [1025],
+      "actions": [16],
+      "uid": [1],
+      "group": [1],
+      "keyName": [1, "key-name"],
+      "isHovering": [32]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
+//simple functional component that renders the data in the table
+const TableData = ({ data, groupId }, _children) => {
+  if (typeof data === "string") {
+    return hAsync("td", { innerHTML: data, class: "duet-editable-table-content", part: `${groupId}content` });
+  }
+  else {
+    return (hAsync("td", { class: "duet-editable-table-content", part: `${groupId}content` }, data));
+  }
+};
+
+const duetEditableTableItemCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-editable-table-item,*.sc-duet-editable-table-item::after,*.sc-duet-editable-table-item::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-editable-table-item-h{display:table-row;height:32px}/*!@.duet-editable-table-content, .duet-editable-table-actions*/.duet-editable-table-content.sc-duet-editable-table-item,.duet-editable-table-actions.sc-duet-editable-table-item{height:32px;padding:12px 0;vertical-align:middle;break-word:break-all;border-bottom:1px solid #e1e3e6}/*!@.duet-editable-table-actions-items*/.duet-editable-table-actions-items.sc-duet-editable-table-item{display:flex;justify-content:flex-end}/*!@.duet-editable-table-actions-items duet-editable-table-button*/.duet-editable-table-actions-items.sc-duet-editable-table-item duet-editable-table-button.sc-duet-editable-table-item{padding-left:8px}/*!@.duet-editable-table .editable-item-small*/.duet-editable-table.sc-duet-editable-table-item .editable-item-small.sc-duet-editable-table-item{font-size:0.75rem;font-weight:400}";
+
+class DuetEditableTableItem {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.duetEditableItemAction = createEvent$2(this, "duetEditableItemAction", 7);
+    this.isHovering = false;
+    /**
+     * Theme of the empty state component.
+     */
+    this.theme = "";
+    /**
+     * Actions that can be performed on the element
+     */
+    this.actions = undefined;
+    /**
+     * GroupId used to pierce the shadowdom - gets concatenated with "content & actions" and used as part="groupIDcontent/actions" to pierce the content/Action item
+     * @internal
+     */
+    this.groupId = "";
+    /**
+     * Key used to identify item, when running actions
+     */
+    this.keyName = "";
+    /**
+     * Object of data itemsused to render the entire row
+     */
+    this.data = undefined;
+  }
+  watchPropHandler(_newValue, _oldValue) {
+    // console.log("The new value of activated is: ", _newValue)
+  }
+  /**
+   /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   /**
+   * private functions
+   */
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (hAsync(Host, { role: "row" }, hAsync(TableData, { data: this.data.item, groupId: this.groupId }), hAsync("td", { class: "duet-editable-table-actions" }, hAsync("div", { class: "duet-editable-table-actions-items", part: `${this.groupId}actions` }, this.actions.map(result => {
+      const { map = undefined } = result;
+      // if map has been specified, only show the current action if groupID matches the map array
+      if (map && !map.includes(this.groupId)) {
+        return;
+      }
+      return (hAsync("duet-editable-table-button", { keyName: this.keyName, group: this.data.group, uid: this.data.uid, actions: result, theme: this.theme }));
+    })))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "data": ["watchPropHandler"]
+  }; }
+  static get style() { return duetEditableTableItemCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-editable-table-item",
+    "$members$": {
+      "theme": [1025],
+      "actions": [16],
+      "groupId": [1, "group-id"],
+      "keyName": [1, "key-name"],
+      "data": [1040],
+      "isHovering": [32]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
 const duetEmptyStateCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-empty-state,*.sc-duet-empty-state::after,*.sc-duet-empty-state::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-empty-state-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;height:100%}/*!@.duet-empty-state*/.duet-empty-state.sc-duet-empty-state{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:48px;color:#00294d;text-align:center;background:#f5f8fa;border-radius:4px}/*!@.duet-empty-state.duet-theme-turva*/.duet-empty-state.duet-theme-turva.sc-duet-empty-state{color:#171c3a;background:#f5f5f7}";
 
 class DuetEmptyState {
@@ -9137,6 +9525,7 @@ function isGridItem(element) {
 class DuetGrid {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.distributeFormElement = false;
     /**
      * Enable or disable the automatic responsive behaviour of the grid component.
      * Setting this option to "true" makes sure that contents are stacked vertically
@@ -9153,7 +9542,9 @@ class DuetGrid {
      */
     this.direction = "horizontal";
     /**
-     * Adjusts the vertical alignment of the grid items.
+     * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+     * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
+     * so that they align even when displaying errors.
      */
     this.alignment = "top";
     /**
@@ -9165,14 +9556,34 @@ class DuetGrid {
      */
     this.mobile = "";
   }
+  /**
+   * Private functions
+   */
+  /**
+   * Returns the element height including margins
+   * @param element - element
+   * @returns {number}
+   */
+  outerHeight(element) {
+    const height = element.offsetHeight, style = window.getComputedStyle(element);
+    return ["top", "bottom"]
+      .map(side => parseInt(style[`margin-${side}`]))
+      .reduce((total, side) => total + side, height);
+  }
   /**
    * Component lifecycle events.
    */
   async connectedCallback() {
     const el = this.element;
+    this.distributeFormElement = this.alignment === "form_distribute";
     this.mutationO = watchForOptions(el, "duet-grid-item", () => {
       this.updateGridItems();
     });
+    if (this.distributeFormElement) {
+      this.mutation1 = watchForElement(el, "duet-input", () => {
+        this.updateGridItemsWithInputFields();
+      });
+    }
     this.updateGridItems();
   }
   disconnectedCallback() {
@@ -9180,6 +9591,10 @@ class DuetGrid {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
+    if (this.mutation1) {
+      this.mutation1.disconnect();
+      this.mutation1 = undefined;
+    }
   }
   /**
    * Local methods
@@ -9191,6 +9606,27 @@ class DuetGrid {
       item.breakpoint = this.breakpoint;
     });
   }
+  async updateGridItemsWithInputFields() {
+    const items = Array.from(this.element.children).filter(isGridItem);
+    let maxHeight = 0;
+    const sizes = [];
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      sizes.push(height);
+    });
+    maxHeight = Math.max(...sizes);
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      if (height < maxHeight) {
+        item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
+      }
+      else if (height === maxHeight) {
+        item.setAttribute("style", `padding-bottom: 0px;`);
+      }
+    });
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -9200,7 +9636,7 @@ class DuetGrid {
         "duet-grid": true,
         "duet-no-stacking": !this.responsive,
         "duet-grid-align-top": this.alignment === "top",
-        "duet-grid-align-bottom": this.alignment === "bottom",
+        "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute",
         "duet-grid-align-center": this.alignment === "center",
         "duet-grid-align-stretch": this.alignment === "stretch",
         "duet-grid-align-baseline": this.alignment === "baseline",
@@ -9235,7 +9671,8 @@ class DuetGrid {
       "direction": [1],
       "alignment": [1],
       "distribution": [1],
-      "mobile": [1]
+      "mobile": [1],
+      "distributeFormElement": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -9960,7 +10397,7 @@ class DuetHeader {
   }; }
 }
 
-const duetHeadingCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-heading,*.sc-duet-heading::after,*.sc-duet-heading::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-heading-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}/*!@.duet-heading*/.duet-heading.sc-duet-heading{margin-bottom:16px !important;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25;color:#00294d;text-decoration:none;letter-spacing:-0.01rem;word-break:break-word}@media (min-width: 36em){/*!@.duet-heading*/.duet-heading.sc-duet-heading{margin-bottom:20px !important}}/*!@.duet-heading.duet-theme-turva*/.duet-heading.duet-theme-turva.sc-duet-heading{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:italic;font-weight:700;color:#171c3a}/*!@.duet-heading.duet-heading-border*/.duet-heading.duet-heading-border.sc-duet-heading{padding-bottom:20px;border-bottom:1px solid #e1e3e6}/*!@.duet-heading.duet-heading-hyphenate*/.duet-heading.duet-heading-hyphenate.sc-duet-heading{-webkit-hyphens:auto;hyphens:auto}/*!@.duet-heading.h0*/.duet-heading.h0.sc-duet-heading{font-size:9.4vw}/*!@.duet-heading.h0.duet-p-0*/.duet-heading.h0.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h0.duet-m-0*/.duet-heading.h0.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 31.914893617rem){/*!@.duet-heading.h0*/.duet-heading.h0.sc-duet-heading{font-size:3rem}}@media (min-width: 47.8723404255rem){/*!@.duet-heading.h0*/.duet-heading.h0.sc-duet-heading{font-size:4.5rem}}@media (max-width: 22.5em){/*!@.duet-heading.h0*/.duet-heading.h0.sc-duet-heading{font-size:2.25rem}}/*!@.duet-heading.h1*/.duet-heading.h1.sc-duet-heading{font-size:7vw}/*!@.duet-heading.h1.duet-p-0*/.duet-heading.h1.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h1.duet-m-0*/.duet-heading.h1.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 32.1428571429rem){/*!@.duet-heading.h1*/.duet-heading.h1.sc-duet-heading{font-size:2.25rem}}@media (min-width: 42.8571428571rem){/*!@.duet-heading.h1*/.duet-heading.h1.sc-duet-heading{font-size:3rem}}@media (max-width: 22.5em){/*!@.duet-heading.h1*/.duet-heading.h1.sc-duet-heading{font-size:1.5rem}}/*!@.duet-heading.h2*/.duet-heading.h2.sc-duet-heading{font-size:5.8vw}/*!@.duet-heading.h2.duet-p-0*/.duet-heading.h2.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h2.duet-m-0*/.duet-heading.h2.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 25.8620689655rem){/*!@.duet-heading.h2*/.duet-heading.h2.sc-duet-heading{font-size:1.5rem}}@media (min-width: 38.7931034483rem){/*!@.duet-heading.h2*/.duet-heading.h2.sc-duet-heading{font-size:2.25rem}}@media (max-width: 22.5em){/*!@.duet-heading.h2*/.duet-heading.h2.sc-duet-heading{font-size:1.375rem}}/*!@.duet-heading.h3*/.duet-heading.h3.sc-duet-heading{margin-bottom:12px !important;font-size:4.2vw}/*!@.duet-heading.h3.duet-p-0*/.duet-heading.h3.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h3.duet-m-0*/.duet-heading.h3.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 29.7619047619rem){/*!@.duet-heading.h3*/.duet-heading.h3.sc-duet-heading{font-size:1.25rem}}@media (min-width: 35.7142857143rem){/*!@.duet-heading.h3*/.duet-heading.h3.sc-duet-heading{font-size:1.5rem}}/*!@.duet-heading.h3.duet-theme-turva*/.duet-heading.h3.duet-theme-turva.sc-duet-heading{font-style:normal}/*!@.duet-heading.h3.duet-heading-border*/.duet-heading.h3.duet-heading-border.sc-duet-heading{padding-bottom:20px}/*!@.duet-heading.h4*/.duet-heading.h4.sc-duet-heading{margin-bottom:8px !important;font-size:4vw;letter-spacing:0}/*!@.duet-heading.h4.duet-p-0*/.duet-heading.h4.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h4.duet-m-0*/.duet-heading.h4.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 27.5rem){/*!@.duet-heading.h4*/.duet-heading.h4.sc-duet-heading{font-size:1.1rem}}@media (min-width: 31.25rem){/*!@.duet-heading.h4*/.duet-heading.h4.sc-duet-heading{font-size:1.25rem}}/*!@.duet-heading.h4.duet-theme-turva*/.duet-heading.h4.duet-theme-turva.sc-duet-heading{font-style:normal;font-weight:700}/*!@.duet-heading.h4.duet-heading-border*/.duet-heading.h4.duet-heading-border.sc-duet-heading{padding-bottom:20px}/*!@.duet-heading.h5*/.duet-heading.h5.sc-duet-heading{margin-bottom:8px !important;font-size:4vw;font-weight:600;letter-spacing:0}/*!@.duet-heading.h5.duet-p-0*/.duet-heading.h5.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h5.duet-m-0*/.duet-heading.h5.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 27.5rem){/*!@.duet-heading.h5*/.duet-heading.h5.sc-duet-heading{font-size:1.1rem}}@media (min-width: 28.4090909091rem){/*!@.duet-heading.h5*/.duet-heading.h5.sc-duet-heading{font-size:1.1363636364rem}}/*!@.duet-heading.h5.duet-theme-turva*/.duet-heading.h5.duet-theme-turva.sc-duet-heading{font-style:normal;font-weight:700}/*!@.duet-heading.h5.duet-heading-border*/.duet-heading.h5.duet-heading-border.sc-duet-heading{padding-bottom:16px}/*!@.duet-heading.h6*/.duet-heading.h6.sc-duet-heading{margin-bottom:8px !important;font-size:1rem;font-weight:600;letter-spacing:0}/*!@.duet-heading.h6.duet-p-0*/.duet-heading.h6.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h6.duet-m-0*/.duet-heading.h6.duet-m-0.sc-duet-heading{margin:0 !important}/*!@.duet-heading.h6.duet-theme-turva*/.duet-heading.h6.duet-theme-turva.sc-duet-heading{font-style:normal;font-weight:700}/*!@.duet-heading.h6.duet-heading-border*/.duet-heading.h6.duet-heading-border.sc-duet-heading{padding-bottom:16px}/*!@.duet-heading.duet-semibold, .duet-heading.duet-theme-turva.duet-semibold*/.duet-heading.duet-semibold.sc-duet-heading,.duet-heading.duet-theme-turva.duet-semibold.sc-duet-heading{font-style:normal !important;font-weight:600 !important}";
+const duetHeadingCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-heading,*.sc-duet-heading::after,*.sc-duet-heading::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-heading-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}/*!@.duet-heading*/.duet-heading.sc-duet-heading{margin-bottom:16px !important;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25;color:#00294d;text-decoration:none;letter-spacing:-0.01rem;word-break:break-word}@media (min-width: 36em){/*!@.duet-heading*/.duet-heading.sc-duet-heading{margin-bottom:20px !important}}/*!@.duet-heading.duet-theme-turva*/.duet-heading.duet-theme-turva.sc-duet-heading{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:italic;font-weight:700;color:#171c3a}/*!@.duet-heading.duet-heading-border*/.duet-heading.duet-heading-border.sc-duet-heading{padding-bottom:20px;border-bottom:1px solid #e1e3e6}/*!@.duet-heading.duet-heading-border.duet-heading-border-solid*/.duet-heading.duet-heading-border.duet-heading-border-solid.sc-duet-heading{border-bottom-color:#657787}/*!@.duet-heading.duet-heading-hyphenate*/.duet-heading.duet-heading-hyphenate.sc-duet-heading{-webkit-hyphens:auto;hyphens:auto}/*!@.duet-heading.h0*/.duet-heading.h0.sc-duet-heading{font-size:9.4vw}/*!@.duet-heading.h0.duet-p-0*/.duet-heading.h0.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h0.duet-m-0*/.duet-heading.h0.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 31.914893617rem){/*!@.duet-heading.h0*/.duet-heading.h0.sc-duet-heading{font-size:3rem}}@media (min-width: 47.8723404255rem){/*!@.duet-heading.h0*/.duet-heading.h0.sc-duet-heading{font-size:4.5rem}}@media (max-width: 22.5em){/*!@.duet-heading.h0*/.duet-heading.h0.sc-duet-heading{font-size:2.25rem}}/*!@.duet-heading.h1*/.duet-heading.h1.sc-duet-heading{font-size:7vw}/*!@.duet-heading.h1.duet-p-0*/.duet-heading.h1.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h1.duet-m-0*/.duet-heading.h1.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 32.1428571429rem){/*!@.duet-heading.h1*/.duet-heading.h1.sc-duet-heading{font-size:2.25rem}}@media (min-width: 42.8571428571rem){/*!@.duet-heading.h1*/.duet-heading.h1.sc-duet-heading{font-size:3rem}}@media (max-width: 22.5em){/*!@.duet-heading.h1*/.duet-heading.h1.sc-duet-heading{font-size:1.5rem}}/*!@.duet-heading.h2*/.duet-heading.h2.sc-duet-heading{font-size:5.8vw}/*!@.duet-heading.h2.duet-p-0*/.duet-heading.h2.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h2.duet-m-0*/.duet-heading.h2.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 25.8620689655rem){/*!@.duet-heading.h2*/.duet-heading.h2.sc-duet-heading{font-size:1.5rem}}@media (min-width: 38.7931034483rem){/*!@.duet-heading.h2*/.duet-heading.h2.sc-duet-heading{font-size:2.25rem}}@media (max-width: 22.5em){/*!@.duet-heading.h2*/.duet-heading.h2.sc-duet-heading{font-size:1.375rem}}/*!@.duet-heading.h3*/.duet-heading.h3.sc-duet-heading{margin-bottom:12px !important;font-size:4.2vw}/*!@.duet-heading.h3.duet-p-0*/.duet-heading.h3.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h3.duet-m-0*/.duet-heading.h3.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 29.7619047619rem){/*!@.duet-heading.h3*/.duet-heading.h3.sc-duet-heading{font-size:1.25rem}}@media (min-width: 35.7142857143rem){/*!@.duet-heading.h3*/.duet-heading.h3.sc-duet-heading{font-size:1.5rem}}/*!@.duet-heading.h3.duet-theme-turva*/.duet-heading.h3.duet-theme-turva.sc-duet-heading{font-style:normal}/*!@.duet-heading.h3.duet-heading-border*/.duet-heading.h3.duet-heading-border.sc-duet-heading{padding-bottom:20px}/*!@.duet-heading.h4*/.duet-heading.h4.sc-duet-heading{margin-bottom:8px !important;font-size:4vw;letter-spacing:0}/*!@.duet-heading.h4.duet-p-0*/.duet-heading.h4.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h4.duet-m-0*/.duet-heading.h4.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 27.5rem){/*!@.duet-heading.h4*/.duet-heading.h4.sc-duet-heading{font-size:1.1rem}}@media (min-width: 31.25rem){/*!@.duet-heading.h4*/.duet-heading.h4.sc-duet-heading{font-size:1.25rem}}/*!@.duet-heading.h4.duet-theme-turva*/.duet-heading.h4.duet-theme-turva.sc-duet-heading{font-style:normal;font-weight:700}/*!@.duet-heading.h4.duet-heading-border*/.duet-heading.h4.duet-heading-border.sc-duet-heading{padding-bottom:20px}/*!@.duet-heading.h5*/.duet-heading.h5.sc-duet-heading{margin-bottom:8px !important;font-size:4vw;font-weight:600;letter-spacing:0}/*!@.duet-heading.h5.duet-p-0*/.duet-heading.h5.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h5.duet-m-0*/.duet-heading.h5.duet-m-0.sc-duet-heading{margin:0 !important}@media (max-width: 27.5rem){/*!@.duet-heading.h5*/.duet-heading.h5.sc-duet-heading{font-size:1.1rem}}@media (min-width: 28.4090909091rem){/*!@.duet-heading.h5*/.duet-heading.h5.sc-duet-heading{font-size:1.1363636364rem}}/*!@.duet-heading.h5.duet-theme-turva*/.duet-heading.h5.duet-theme-turva.sc-duet-heading{font-style:normal;font-weight:700}/*!@.duet-heading.h5.duet-heading-border*/.duet-heading.h5.duet-heading-border.sc-duet-heading{padding-bottom:16px}/*!@.duet-heading.h6*/.duet-heading.h6.sc-duet-heading{margin-bottom:8px !important;font-size:1rem;font-weight:600;letter-spacing:0}/*!@.duet-heading.h6.duet-p-0*/.duet-heading.h6.duet-p-0.sc-duet-heading{padding:0 !important}/*!@.duet-heading.h6.duet-m-0*/.duet-heading.h6.duet-m-0.sc-duet-heading{margin:0 !important}/*!@.duet-heading.h6.duet-theme-turva*/.duet-heading.h6.duet-theme-turva.sc-duet-heading{font-style:normal;font-weight:700}/*!@.duet-heading.h6.duet-heading-border*/.duet-heading.h6.duet-heading-border.sc-duet-heading{padding-bottom:16px}/*!@.duet-heading.duet-semibold, .duet-heading.duet-theme-turva.duet-semibold*/.duet-heading.duet-semibold.sc-duet-heading,.duet-heading.duet-theme-turva.duet-semibold.sc-duet-heading{font-style:normal !important;font-weight:600 !important}";
 
 class DuetHeading {
   constructor(hostRef) {
@@ -9974,7 +10411,7 @@ class DuetHeading {
      */
     this.margin = "auto";
     /**
-     * Enable or disable the border underneath the heading.
+     * Enable or disable the border underneath the heading, solid will darken the border
      */
     this.border = false;
     /**
@@ -10011,7 +10448,8 @@ class DuetHeading {
     const color = getColorByName(this.color);
     return (hAsync(TagName, { class: {
         "duet-heading": true,
-        "duet-heading-border": this.border,
+        "duet-heading-border": this.border !== false,
+        "duet-heading-border-solid": this.border === "solid",
         "duet-semibold": this.weight === "semibold",
         "duet-heading-hyphenate": this.hyphenate,
         "duet-m-0": this.margin === "none",
@@ -10028,7 +10466,7 @@ class DuetHeading {
       "level": [513],
       "margin": [1],
       "visualLevel": [1, "visual-level"],
-      "border": [4],
+      "border": [8],
       "weight": [1],
       "color": [1],
       "theme": [1025],
@@ -10287,22 +10725,92 @@ class DuetHero {
   }; }
 }
 
-const duetIconCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-icon,*.sc-duet-icon::after,*.sc-duet-icon::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-icon-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:inline-block;width:auto;max-width:100%;color:inherit;-webkit-tap-highlight-color:transparent}@media (max-width: 35.9375em){/*!@:host(.duet-icon-has-outline)*/.duet-icon-has-outline.sc-duet-icon-h{margin-bottom:0 !important}}@media (max-width: 35.9375em){/*!@:host(.duet-icon-has-background)*/.duet-icon-has-background.sc-duet-icon-h{margin-bottom:0 !important}}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-icon-h{margin:0 !important}@media (max-width: 35.9375em){/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-icon-h{margin:0 !important}}/*!@.duet-icon*/.duet-icon.sc-duet-icon{-webkit-user-select:none;user-select:none;width:100%;height:100%;transform-origin:top center}/*!@.duet-icon.duet-icon-has-outline*/.duet-icon.duet-icon-has-outline.sc-duet-icon{padding:12px;border-style:solid;border-width:1px;border-radius:50%}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-has-outline*/.duet-icon.duet-icon-has-outline.sc-duet-icon{outline:1px solid transparent;transform:scale(0.8)}}/*!@.duet-icon.duet-icon-has-background*/.duet-icon.duet-icon-has-background.sc-duet-icon{padding:16px;color:white;border-radius:50%}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-has-background*/.duet-icon.duet-icon-has-background.sc-duet-icon{outline:1px solid transparent;transform:scale(0.8)}}/*!@.duet-icon.duet-icon-has-background.duet-theme-turva, .duet-icon.duet-icon-has-background.duet-theme-default*/.duet-icon.duet-icon-has-background.duet-theme-turva.sc-duet-icon,.duet-icon.duet-icon-has-background.duet-theme-default.sc-duet-icon{color:white}/*!@.duet-icon.duet-icon-has-background.xxx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xxx-small .duet-icon-svg*/.duet-icon.duet-icon-has-background.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon,.duet-icon.duet-icon-has-outline.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@.duet-icon.duet-icon-has-background.xx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xx-small .duet-icon-svg*/.duet-icon.duet-icon-has-background.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon,.duet-icon.duet-icon-has-outline.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:16px;height:16px}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-not-responsive*/.duet-icon.duet-icon-not-responsive.sc-duet-icon{transform:scale(1) !important}}/*!@.duet-icon.duet-theme-default*/.duet-icon.duet-theme-default.sc-duet-icon{color:#0077b3}/*!@.duet-icon.duet-theme-turva*/.duet-icon.duet-theme-turva.sc-duet-icon{color:#c60c30}/*!@.duet-icon.auto .duet-icon-svg*/.duet-icon.auto.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:100%;height:100%}/*!@.duet-icon.xxx-small .duet-icon-svg*/.duet-icon.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:7px;height:7px}/*!@.duet-icon.duet-icon-has-background.xxx-small*/.duet-icon.duet-icon-has-background.xxx-small.sc-duet-icon{padding:6px}/*!@.duet-icon.duet-icon-has-outline.xxx-small*/.duet-icon.duet-icon-has-outline.xxx-small.sc-duet-icon{padding:4px}/*!@.duet-icon.xx-small .duet-icon-svg*/.duet-icon.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@.duet-icon.duet-icon-has-background.xx-small*/.duet-icon.duet-icon-has-background.xx-small.sc-duet-icon{padding:8px}/*!@.duet-icon.duet-icon-has-outline.xx-small*/.duet-icon.duet-icon-has-outline.xx-small.sc-duet-icon{padding:7px}/*!@.duet-icon.x-small .duet-icon-svg*/.duet-icon.x-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:16px;height:16px}/*!@.duet-icon.duet-icon-has-outline.x-small*/.duet-icon.duet-icon-has-outline.x-small.sc-duet-icon{padding:10px}/*!@.duet-icon.duet-icon-has-background.x-small*/.duet-icon.duet-icon-has-background.x-small.sc-duet-icon{padding:12px}/*!@.duet-icon.small .duet-icon-svg*/.duet-icon.small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:20px;height:20px}/*!@.duet-icon.duet-icon-has-background.small*/.duet-icon.duet-icon-has-background.small.sc-duet-icon{padding:14px}/*!@.duet-icon.large .duet-icon-svg*/.duet-icon.large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:30px;height:30px}/*!@.duet-icon.x-large .duet-icon-svg*/.duet-icon.x-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:36px;height:36px}/*!@.duet-icon.xx-large .duet-icon-svg*/.duet-icon.xx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:48px;height:48px}/*!@.duet-icon.xxx-large .duet-icon-svg*/.duet-icon.xxx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:48px;height:48px}@media (min-width: 48em){/*!@.duet-icon.xxx-large .duet-icon-svg*/.duet-icon.xxx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:72px;height:72px}}/*!@.duet-icon .duet-icon-svg*/.duet-icon.sc-duet-icon .duet-icon-svg.sc-duet-icon{display:block;width:24px;min-width:100%;height:24px;font-size:0}/*!@.duet-icon svg*/.duet-icon.sc-duet-icon svg.sc-duet-icon{width:100%;min-width:100%;fill:currentColor}";
-
-class DuetIcon {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Theme of the icon. This setting will be overridden when you set the color
-     * property
-     */
-    this.theme = "";
-    /**
-     * Icon name from Duet to display.
-     */
-    this.name = "action-add";
-    /**
-     * Controls the margin of the component.
+const cleanupSvg = (svgContent) => {
+  if (typeof document === "undefined" || !svgContent) {
+    return;
+  }
+  const div = document.createElement("div");
+  div.innerHTML = svgContent;
+  // setup this way to ensure it works on our buddy IE
+  for (let i = div.childNodes.length - 1; i >= 0; i--) {
+    const child = div.childNodes[i];
+    if (child.nodeName.toLowerCase() !== "svg") {
+      div.removeChild(div.childNodes[i]);
+    }
+  }
+  return div.firstElementChild;
+};
+const isValid = (elm) => {
+  if (elm.nodeName.toLowerCase() === "script") {
+    return false;
+  }
+  for (let i = 0; i < elm.attributes.length; i++) {
+    const attribute = elm.attributes[i];
+    if (attribute.name.toLowerCase().indexOf("on") === 0) {
+      return false;
+    }
+  }
+  if (elm.children) {
+    for (let i = 0; i < elm.children.length; i++) {
+      if (!isValid(elm.children[i])) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+const buildIconUrl = (iconName) => {
+  // under normal operations the Icons should always be loaded from the CDN
+  {
+    return `${Env.cdnURIProd}/icons/${Env.duetIconVersion}/lib/assets/${iconName}.svg`;
+  }
+};
+const iconCache = {};
+function fetchIconByUrl(url) {
+  if (iconCache[url]) {
+    return iconCache[url];
+  }
+  // we create a function that covers all the fetching, cleanup, validation etc,
+  // this way we can perform that work just once, and then return the same promise in future.
+  async function doFetch() {
+    const res = await fetch(url);
+    if (!res.ok) {
+      throw new Error(`SVG request failed: ${res.status} ${res.statusText}`);
+    }
+    const responseText = await res.text();
+    const svgElement = cleanupSvg(responseText);
+    if (!isValid(svgElement)) {
+      throw new Error("SVG validation failed");
+    }
+    // OuterHTML does not unfortunately work here with IE11
+    // was previously: resolve(svgElement.outerHTML)
+    const div = document.createElement("div");
+    div.appendChild(svgElement);
+    return div.innerHTML;
+  }
+  // we do not `await` the fetch, as we only care about initiating the work,
+  // it's the responsibility of the calling code to wait for the response.
+  const req = doFetch();
+  // cache for the repeat requests
+  return (iconCache[url] = req);
+}
+
+const duetIconCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-icon,*.sc-duet-icon::after,*.sc-duet-icon::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-icon-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:inline-block;width:auto;max-width:100%;color:inherit;-webkit-tap-highlight-color:transparent}@media (max-width: 35.9375em){/*!@:host(.duet-icon-has-outline)*/.duet-icon-has-outline.sc-duet-icon-h{margin-bottom:0 !important}}@media (max-width: 35.9375em){/*!@:host(.duet-icon-has-background)*/.duet-icon-has-background.sc-duet-icon-h{margin-bottom:0 !important}}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-icon-h{margin:0 !important}@media (max-width: 35.9375em){/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-icon-h{margin:0 !important}}/*!@.duet-icon*/.duet-icon.sc-duet-icon{-webkit-user-select:none;user-select:none;width:100%;height:100%;transform-origin:top center}/*!@.duet-icon.duet-icon-has-outline*/.duet-icon.duet-icon-has-outline.sc-duet-icon{padding:12px;border-style:solid;border-width:1px;border-radius:50%}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-has-outline*/.duet-icon.duet-icon-has-outline.sc-duet-icon{outline:1px solid transparent;transform:scale(0.8)}}/*!@.duet-icon.duet-icon-has-background*/.duet-icon.duet-icon-has-background.sc-duet-icon{padding:16px;color:white;border-radius:50%}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-has-background*/.duet-icon.duet-icon-has-background.sc-duet-icon{outline:1px solid transparent;transform:scale(0.8)}}/*!@.duet-icon.duet-icon-has-background.duet-theme-turva, .duet-icon.duet-icon-has-background.duet-theme-default*/.duet-icon.duet-icon-has-background.duet-theme-turva.sc-duet-icon,.duet-icon.duet-icon-has-background.duet-theme-default.sc-duet-icon{color:white}/*!@.duet-icon.duet-icon-has-background.xxx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xxx-small .duet-icon-svg*/.duet-icon.duet-icon-has-background.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon,.duet-icon.duet-icon-has-outline.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@.duet-icon.duet-icon-has-background.xx-small .duet-icon-svg, .duet-icon.duet-icon-has-outline.xx-small .duet-icon-svg*/.duet-icon.duet-icon-has-background.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon,.duet-icon.duet-icon-has-outline.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:16px;height:16px}@media (max-width: 35.9375em){/*!@.duet-icon.duet-icon-not-responsive*/.duet-icon.duet-icon-not-responsive.sc-duet-icon{transform:scale(1) !important}}/*!@.duet-icon.duet-theme-default*/.duet-icon.duet-theme-default.sc-duet-icon{color:#0077b3}/*!@.duet-icon.duet-theme-turva*/.duet-icon.duet-theme-turva.sc-duet-icon{color:#c60c30}/*!@.duet-icon.auto .duet-icon-svg*/.duet-icon.auto.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:100%;height:100%}/*!@.duet-icon.xxx-small .duet-icon-svg*/.duet-icon.xxx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:7px;height:7px}/*!@.duet-icon.duet-icon-has-background.xxx-small*/.duet-icon.duet-icon-has-background.xxx-small.sc-duet-icon{padding:6px}/*!@.duet-icon.duet-icon-has-outline.xxx-small*/.duet-icon.duet-icon-has-outline.xxx-small.sc-duet-icon{padding:4px}/*!@.duet-icon.xx-small .duet-icon-svg*/.duet-icon.xx-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:10px;height:10px}/*!@.duet-icon.duet-icon-has-background.xx-small*/.duet-icon.duet-icon-has-background.xx-small.sc-duet-icon{padding:8px}/*!@.duet-icon.duet-icon-has-outline.xx-small*/.duet-icon.duet-icon-has-outline.xx-small.sc-duet-icon{padding:7px}/*!@.duet-icon.x-small .duet-icon-svg*/.duet-icon.x-small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:16px;height:16px}/*!@.duet-icon.duet-icon-has-outline.x-small*/.duet-icon.duet-icon-has-outline.x-small.sc-duet-icon{padding:10px}/*!@.duet-icon.duet-icon-has-background.x-small*/.duet-icon.duet-icon-has-background.x-small.sc-duet-icon{padding:12px}/*!@.duet-icon.small .duet-icon-svg*/.duet-icon.small.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:20px;height:20px}/*!@.duet-icon.duet-icon-has-background.small*/.duet-icon.duet-icon-has-background.small.sc-duet-icon{padding:14px}/*!@.duet-icon.large .duet-icon-svg*/.duet-icon.large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:30px;height:30px}/*!@.duet-icon.x-large .duet-icon-svg*/.duet-icon.x-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:36px;height:36px}/*!@.duet-icon.xx-large .duet-icon-svg*/.duet-icon.xx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:48px;height:48px}/*!@.duet-icon.xxx-large .duet-icon-svg*/.duet-icon.xxx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:48px;height:48px}@media (min-width: 48em){/*!@.duet-icon.xxx-large .duet-icon-svg*/.duet-icon.xxx-large.sc-duet-icon .duet-icon-svg.sc-duet-icon{width:72px;height:72px}}/*!@.duet-icon .duet-icon-svg*/.duet-icon.sc-duet-icon .duet-icon-svg.sc-duet-icon{display:block;width:24px;min-width:100%;height:24px;font-size:0}/*!@.duet-icon svg*/.duet-icon.sc-duet-icon svg.sc-duet-icon{width:100%;min-width:100%;fill:currentColor}";
+
+class DuetIcon {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Theme of the icon. This setting will be overridden when you set the color
+     * property
+     */
+    this.theme = "";
+    /**
+     * Icon name from Duet to display.
+     */
+    this.name = "action-add";
+    /**
+     * Controls the margin of the component.
      */
     this.margin = "auto";
     /**
@@ -10343,7 +10851,7 @@ class DuetIcon {
     if (this.src && this.icon) {
       console.warn("[DUET COMPONENTS]: <duet-icon> should have either have src or icon attributes, but not both. icon attribute will take precedence", "icon:", this.icon, "src:", this.src);
     }
-    this.loadIcon();
+    return this.loadIcon();
   }
   async loadIcon() {
     // static icon known at build-time, so we can set it synchronously
@@ -10351,9 +10859,13 @@ class DuetIcon {
       this.svgContent = this.icon;
       return;
     }
-    // on server, don't make requests
-    {
-      return;
+    // dynamically load icon from url
+    const src = this.src ? this.src : buildIconUrl(this.name);
+    try {
+      this.svgContent = await fetchIconByUrl(src);
+    }
+    catch (e) {
+      console.warn(`[DUET COMPONENTS]: <duet-icon> could not load SVG from URL: ${src}.`, e);
     }
   }
   /**
@@ -10463,7 +10975,7 @@ function cleanValue(input, regex) {
   return newValue;
 }
 
-const duetInputCss = "*.sc-duet-input,*.sc-duet-input::after,*.sc-duet-input::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-input-h{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:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:bottom}.sc-duet-input-h:last-child,.sc-duet-input-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-input-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-input-h{width:100% !important}.duet-m-0.sc-duet-input-h{margin:0 !important}duet-tooltip.sc-duet-input{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-input{position:relative;top:4px;right:auto}}duet-caption.sc-duet-input:not(:last-of-type){margin-bottom:0}.duet-input-icon.sc-duet-input{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;font-size:0;line-height:normal;color:#00294d;pointer-events:none;transform:translateY(-50%)}.duet-theme-turva.sc-duet-input .duet-input-icon.sc-duet-input{color:#171c3a}.duet-input-container.sc-duet-input{position:relative;width:100%;height:100%}.duet-input.sc-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:#00294d !important;cursor:initial !important;background:white !important;background-clip:initial !important;border:1px solid #909599 !important;border-radius:4px !important;box-shadow:initial !important;transition:box-shadow 150ms ease, border 150ms ease !important}.duet-input.is-number.sc-duet-input{padding-right:112px !important}.duet-input.is-date.sc-duet-input{padding-right:64px !important}.has-error.sc-duet-input .duet-input.sc-duet-input{border-color:#de2362 !important}.has-error.sc-duet-input .duet-input.sc-duet-input+.duet-input-icon.sc-duet-input{color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input{border-color:#e02a0d !important}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input+.duet-input-icon.sc-duet-input{color:#e02a0d !important}.has-icon.sc-duet-input .duet-input.sc-duet-input{padding-right:48px !important}.duet-theme-turva.sc-duet-input .duet-input.sc-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:#171c3a !important;border-color:#747475 !important}.duet-input.sc-duet-input::-ms-clear{display:none}.duet-input.sc-duet-input::-webkit-contacts-auto-fill-button{display:none !important}.duet-input.sc-duet-input::-webkit-input-placeholder{color:#657787;opacity:1 !important;transition:color 300ms ease}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-webkit-input-placeholder{color:#747475}.duet-input.sc-duet-input:focus::-webkit-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus::-webkit-input-placeholder{color:#cfcfd1}.duet-input.sc-duet-input::-moz-placeholder{color:#657787;opacity:1 !important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-moz-placeholder{color:#747475}.duet-input.sc-duet-input:focus::-moz-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus::-moz-placeholder{color:#cfcfd1}.duet-input.sc-duet-input:-ms-input-placeholder{color:#657787}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:-ms-input-placeholder{color:#747475}.duet-input.sc-duet-input:focus:-ms-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus:-ms-input-placeholder{color:#cfcfd1}.duet-input[disabled].sc-duet-input{color:#00294d !important;cursor:text !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva.sc-duet-input .duet-input[disabled].sc-duet-input{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #909599 !important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #747475 !important}.has-error.sc-duet-input .duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #e02a0d}.duet-input.sc-duet-input:focus{border-color:#0077b3 !important;outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus{border-color:#171c3a !important;box-shadow:0 0 0 1px #171c3a !important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus+.duet-input-icon.sc-duet-input{color:#171c3a}.has-error.sc-duet-input .duet-input.sc-duet-input:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input:focus{box-shadow:0 0 0 1px #e02a0d}.duet-input.sc-duet-input:focus+.duet-input-icon.sc-duet-input{color:#0077b3}.duet-input[type=search].sc-duet-input:not(:placeholder-shown):focus+.duet-input-icon.sc-duet-input{display:none}.duet-input.sc-duet-input:not(:focus):not(:hover):invalid{box-shadow:none !important}.duet-input[type=number].sc-duet-input::-webkit-inner-spin-button,.duet-input[type=number].sc-duet-input::-webkit-outer-spin-button,.duet-input[type=time].sc-duet-input::-webkit-inner-spin-button,.duet-input[type=time].sc-duet-input::-webkit-outer-spin-button{display:none;margin:0;-webkit-appearance:none}.duet-input.sc-duet-input::-webkit-search-cancel-button{margin-right:-28px}.duet-input-help.sc-duet-input{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:#657787;border-radius:4px}.duet-input-help.sc-duet-input span.sc-duet-input{display:block;margin-top:8px}.duet-theme-turva.sc-duet-input .duet-input-help.sc-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:#747475}.has-error.sc-duet-input .duet-input-help.sc-duet-input{color:#de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input-help.sc-duet-input{color:#e02a0d}.duet-label-hidden.sc-duet-input duet-label.sc-duet-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-input-relative.sc-duet-input{position:relative;width:100%}";
+const duetInputCss = "*.sc-duet-input,*.sc-duet-input::after,*.sc-duet-input::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-input-h{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:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:bottom}.sc-duet-input-h:last-child,.sc-duet-input-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-input-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-input-h{width:100% !important}.duet-m-0.sc-duet-input-h{margin:0 !important}duet-tooltip.sc-duet-input{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-input{position:relative;top:4px;right:auto}}duet-caption.sc-duet-input:not(:last-of-type){margin-bottom:0}.duet-input-placeholder.sc-duet-input{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:white}.duet-input-icon.sc-duet-input{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;font-size:0;line-height:normal;color:#00294d;pointer-events:none;transform:translateY(-50%)}.duet-theme-turva.sc-duet-input .duet-input-icon.sc-duet-input{color:#171c3a}.duet-input-container.sc-duet-input{position:relative;width:100%;height:100%}.duet-input.sc-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:#00294d !important;cursor:initial !important;background:white !important;background-clip:initial !important;border:1px solid #909599 !important;border-radius:4px !important;box-shadow:initial !important;transition:box-shadow 150ms ease, border 150ms ease !important}.duet-input.is-number.sc-duet-input{padding-right:112px !important}.duet-input.is-date.sc-duet-input{padding-right:64px !important}.has-error.sc-duet-input .duet-input.sc-duet-input{border-color:#de2362 !important}.has-error.sc-duet-input .duet-input.sc-duet-input+.duet-input-icon.sc-duet-input{color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input{border-color:#e02a0d !important}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input+.duet-input-icon.sc-duet-input{color:#e02a0d !important}.has-icon.sc-duet-input .duet-input.sc-duet-input{padding-right:48px !important}.duet-theme-turva.sc-duet-input .duet-input.sc-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:#171c3a !important;border-color:#747475 !important}.duet-input.sc-duet-input::-ms-clear{display:none}.duet-input.sc-duet-input::-webkit-contacts-auto-fill-button{display:none !important}.duet-input.sc-duet-input::-webkit-input-placeholder{color:#657787;opacity:1 !important;transition:color 300ms ease}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-webkit-input-placeholder{color:#747475}.duet-input.sc-duet-input:focus::-webkit-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus::-webkit-input-placeholder{color:#cfcfd1}.duet-input.sc-duet-input::-moz-placeholder{color:#657787;opacity:1 !important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input::-moz-placeholder{color:#747475}.duet-input.sc-duet-input:focus::-moz-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus::-moz-placeholder{color:#cfcfd1}.duet-input.sc-duet-input:-ms-input-placeholder{color:#657787}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:-ms-input-placeholder{color:#747475}.duet-input.sc-duet-input:focus:-ms-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus:-ms-input-placeholder{color:#cfcfd1}.duet-input[disabled].sc-duet-input{color:#00294d !important;cursor:text !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva.sc-duet-input .duet-input[disabled].sc-duet-input{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #909599 !important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #747475 !important}.has-error.sc-duet-input .duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input:hover:not(:disabled){box-shadow:0 0 0 1px #e02a0d}.duet-input.sc-duet-input:focus{border-color:#0077b3 !important;outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus{border-color:#171c3a !important;box-shadow:0 0 0 1px #171c3a !important}.duet-theme-turva.sc-duet-input .duet-input.sc-duet-input:focus+.duet-input-icon.sc-duet-input{color:#171c3a}.has-error.sc-duet-input .duet-input.sc-duet-input:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input.sc-duet-input:focus{box-shadow:0 0 0 1px #e02a0d}.duet-input.sc-duet-input:focus+.duet-input-icon.sc-duet-input{color:#0077b3}.duet-input[type=search].sc-duet-input:not(:placeholder-shown):focus+.duet-input-icon.sc-duet-input{display:none}.duet-input.sc-duet-input:not(:focus):not(:hover):invalid{box-shadow:none !important}.duet-input[type=number].sc-duet-input::-webkit-inner-spin-button,.duet-input[type=number].sc-duet-input::-webkit-outer-spin-button,.duet-input[type=time].sc-duet-input::-webkit-inner-spin-button,.duet-input[type=time].sc-duet-input::-webkit-outer-spin-button{display:none;margin:0;-webkit-appearance:none}.duet-input.sc-duet-input::-webkit-search-cancel-button{margin-right:-28px}.duet-input-help.sc-duet-input{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:#657787;border-radius:4px}.duet-input-help.sc-duet-input span.sc-duet-input{display:block;margin-top:8px}.duet-theme-turva.sc-duet-input .duet-input-help.sc-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:#747475}.has-error.sc-duet-input .duet-input-help.sc-duet-input{color:#de2362}.duet-theme-turva.has-error.sc-duet-input .duet-input-help.sc-duet-input{color:#e02a0d}.duet-label-hidden.sc-duet-input duet-label.sc-duet-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-input-relative.sc-duet-input{position:relative;width:100%}";
 
 const icons = {
   search: formSearch,
@@ -10603,7 +11115,7 @@ class DuetInput {
       // (in webkit based browsers settings value trigger cursor position and will set it to EndOfText)
       restoreCursor();
     }
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
     const emitEvent = () => this.duetChange.emit({
       value: this.value,
       component: "duet-input",
@@ -10622,7 +11134,7 @@ class DuetInput {
   componentWillLoad() {
     inheritGlobalTheme(this);
     this.disallowedPatternChange();
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
   }
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
@@ -10657,12 +11169,12 @@ class DuetInput {
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-icon": !!this.icon || (this.type !== "text" && this.type !== "tel" && this.type !== "password"),
         "has-error": !!this.error,
-      } }, hAsync("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (hAsync("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (hAsync("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), this.placeholder && this.echoPlaceholder && this.value && (hAsync("duet-caption", { id: this.topCaptionPlaceholderId, size: "small" }, this.placeholder)), hAsync("div", { class: "duet-input-relative" }, hAsync("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.type, class: {
+      } }, hAsync("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (hAsync("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (hAsync("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), hAsync("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && this.value && (hAsync("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), hAsync("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.type, class: {
         "duet-input": true,
         disabled: this.disabled,
         "is-number": this.component === "number",
         "is-date": this.component === "date",
-      }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.icon && this.type !== "text" && this.type !== "tel" && this.type !== "password" && (hAsync("div", { class: "duet-input-icon" }, hAsync("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.icon && (hAsync("div", { class: "duet-input-icon" }, hAsync("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), hAsync("slot", null)), hAsync("span", { class: "duet-input-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && hAsync("span", null, this.error)))));
+      }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.icon && this.type !== "text" && this.type !== "tel" && this.type !== "password" && (hAsync("div", { class: "duet-input-icon" }, hAsync("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.icon && (hAsync("div", { class: "duet-input-icon" }, hAsync("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), hAsync("slot", null)), hAsync("span", { class: "duet-input-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && hAsync("span", { class: "duet-input-error" }, this.error)))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -12105,13 +12617,16 @@ class DuetNumberInput {
   }; }
 }
 
-const duetParagraphCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-paragraph,*.sc-duet-paragraph::after,*.sc-duet-paragraph::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-paragraph-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}/*!@.duet-paragraph*/.duet-paragraph.sc-duet-paragraph{margin-bottom:16px !important;display:block;width:100%;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-style:normal;font-weight:400;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:#00294d}/*!@.duet-paragraph.duet-p-0*/.duet-paragraph.duet-p-0.sc-duet-paragraph{padding:0 !important}/*!@.duet-paragraph.duet-m-0*/.duet-paragraph.duet-m-0.sc-duet-paragraph{margin:0 !important}/*!@.duet-paragraph.duet-theme-turva*/.duet-paragraph.duet-theme-turva.sc-duet-paragraph{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}/*!@.duet-paragraph.duet-paragraph-small*/.duet-paragraph.duet-paragraph-small.sc-duet-paragraph{font-size:0.875rem}/*!@.duet-paragraph.duet-m-0*/.duet-paragraph.duet-m-0.sc-duet-paragraph{margin:0 !important}/*!@.duet-paragraph.intro*/.duet-paragraph.intro.sc-duet-paragraph{font-size:2.7vw;margin-bottom:28px !important;-webkit-hyphens:inherit;hyphens:inherit}@media (max-width: 37.037037037rem){/*!@.duet-paragraph.intro*/.duet-paragraph.intro.sc-duet-paragraph{font-size:1rem}}@media (min-width: 46.2962962963rem){/*!@.duet-paragraph.intro*/.duet-paragraph.intro.sc-duet-paragraph{font-size:1.25rem}}/*!@.duet-paragraph.intro.duet-m-0*/.duet-paragraph.intro.duet-m-0.sc-duet-paragraph{margin:0 !important}/*!@::slotted(a)*/.sc-duet-paragraph-s>a{font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:#0077b3;text-decoration:underline;transition:300ms ease}/*!@::slotted(a).duet-theme-turva*/.sc-duet-paragraph-s>a.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:#c60c30}/*!@::slotted(a):hover*/.sc-duet-paragraph-s>a:hover{color:#004d80;text-decoration:none}/*!@::slotted(a):hover.duet-theme-turva*/.sc-duet-paragraph-s>a:hover.duet-theme-turva{color:#940925}/*!@::slotted(a):active*/.sc-duet-paragraph-s>a:active{opacity:0.75;transition:none}";
+const duetParagraphCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-paragraph,*.sc-duet-paragraph::after,*.sc-duet-paragraph::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-paragraph-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}/*!@.duet-paragraph*/.duet-paragraph.sc-duet-paragraph{margin-bottom:16px !important;display:block;width:100%;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-style:normal;font-weight:400;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:#00294d}/*!@.duet-paragraph.duet-p-0*/.duet-paragraph.duet-p-0.sc-duet-paragraph{padding:0 !important}/*!@.duet-paragraph.duet-m-0*/.duet-paragraph.duet-m-0.sc-duet-paragraph{margin:0 !important}/*!@.duet-paragraph.duet-theme-turva*/.duet-paragraph.duet-theme-turva.sc-duet-paragraph{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}/*!@.duet-paragraph.duet-paragraph-small*/.duet-paragraph.duet-paragraph-small.sc-duet-paragraph{font-size:0.875rem}/*!@.duet-paragraph.duet-paragraph-semi-bold*/.duet-paragraph.duet-paragraph-semi-bold.sc-duet-paragraph{font-weight:600}/*!@.duet-paragraph.duet-paragraph-bold*/.duet-paragraph.duet-paragraph-bold.sc-duet-paragraph{font-weight:700}/*!@.duet-paragraph.duet-m-0*/.duet-paragraph.duet-m-0.sc-duet-paragraph{margin:0 !important}/*!@.duet-paragraph.intro*/.duet-paragraph.intro.sc-duet-paragraph{font-size:2.7vw;margin-bottom:28px !important;-webkit-hyphens:inherit;hyphens:inherit}@media (max-width: 37.037037037rem){/*!@.duet-paragraph.intro*/.duet-paragraph.intro.sc-duet-paragraph{font-size:1rem}}@media (min-width: 46.2962962963rem){/*!@.duet-paragraph.intro*/.duet-paragraph.intro.sc-duet-paragraph{font-size:1.25rem}}/*!@.duet-paragraph.intro.duet-m-0*/.duet-paragraph.intro.duet-m-0.sc-duet-paragraph{margin:0 !important}/*!@::slotted(a)*/.sc-duet-paragraph-s>a{font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:#0077b3;text-decoration:underline;transition:300ms ease}/*!@::slotted(a).duet-theme-turva*/.sc-duet-paragraph-s>a.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:#c60c30}/*!@::slotted(a):hover*/.sc-duet-paragraph-s>a:hover{color:#004d80;text-decoration:none}/*!@::slotted(a):hover.duet-theme-turva*/.sc-duet-paragraph-s>a:hover.duet-theme-turva{color:#940925}/*!@::slotted(a):active*/.sc-duet-paragraph-s>a:active{opacity:0.75;transition:none}";
 
+/**
+ * @part duet-paragraph - piercing selector for styling the paragraph
+ */
 class DuetParagraph {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
-     * Theme of the card.
+     * Theme of the paragraph.
      */
     this.theme = "";
     /**
@@ -12122,6 +12637,10 @@ class DuetParagraph {
      * Controls the size of the paragraph.
      */
     this.size = "medium";
+    /**
+     * Controls the Font-Weight of the paragraph.
+     */
+    this.weight = undefined;
     /**
      * Style variation of the paragraph.
      */
@@ -12147,10 +12666,12 @@ class DuetParagraph {
     return (hAsync("p", { class: {
         "duet-paragraph": true,
         "duet-paragraph-small": this.size === "small",
+        "duet-paragraph-semi-bold": this.weight === "semi-bold",
+        "duet-paragraph-bold": this.weight === "bold",
         "duet-m-0": this.margin === "none",
         [this.variation]: true,
         "duet-theme-turva": this.theme === "turva",
-      }, style: { color } }, hAsync("slot", null)));
+      }, style: { color }, part: "duet-paragraph" }, hAsync("slot", null)));
   }
   get element() { return getElement(this); }
   static get style() { return duetParagraphCss; }
@@ -12161,6 +12682,7 @@ class DuetParagraph {
       "theme": [1025],
       "margin": [1],
       "size": [1],
+      "weight": [1],
       "variation": [1],
       "color": [1]
     },
@@ -12170,6 +12692,84 @@ class DuetParagraph {
   }; }
 }
 
+const duetProgressCss = "*,*::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:inherit}.duet-progress{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:1px;}.duet-progress .progress-bar{position:relative;display:block;width:100%;height:inherit;min-height:1px;background-color:#f3f9fc;border-radius:0;box-shadow:none}.duet-theme-turva .duet-progress .progress-bar{background-color:#fcf3f4}.duet-progress .progress-bar>span{display:block;height:inherit;text-indent:-9999px;background-color:#0077b3;border-radius:0}.duet-theme-turva .duet-progress .progress-bar>span{background-color:#c60c30}.duet-progress progress[value]{display:flex;width:100%;height:inherit;min-height:1px;color:#0077b3;border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.duet-theme-turva .duet-progress progress[value]{color:#c60c30}.duet-progress progress[value]::-webkit-progress-bar{background-color:#f3f9fc;border-radius:0}.duet-theme-turva .duet-progress progress[value]::-webkit-progress-bar{background-color:#fcf3f4}.duet-progress progress[value]::-webkit-progress-value{background-color:#0077b3;background-size:35px 20px, 100% 100%, 100% 100%;border-radius:0;-webkit-animation:animate-stripes 5s linear infinite;animation:animate-stripes 5s linear infinite}.duet-theme-turva .duet-progress progress[value]::-webkit-progress-value{background-color:#c60c30}.duet-progress progress[value] ::-moz-progress-bar{background-color:#f3f9fc}.duet-theme-turva .duet-progress progress[value] ::-moz-progress-bar{background-color:#fcf3f4}";
+
+class DuetProgress {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Own Properties
+     */
+    this.progressId = createID("DuetProgress");
+    this.progressLabelId = createID("DuetProgressLabel");
+    /**
+     * Defaults for accessibleLabel
+     */
+    this.accessibleLabelUploadDefaults = {
+      fi: ["lähetys valmis", "lähetys käynnissä"],
+      sv: ["Uppladdningen är klar", "Uppladdning pågår"],
+      en: ["upload completed", "upload in progress"],
+    };
+    /**
+     * Adds accessible label for upload in progress and upload complete states
+     * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en:  ["completed", "in progress"]}
+     */
+    this.accessibleLabelUpload = getLocaleString(this.accessibleLabelUploadDefaults);
+    /**
+     * Progress of the bar, a value from 0-100
+     */
+    this.progress = 0;
+    /**
+     * Height of progressbar
+     */
+    this.height = "10px";
+    /**
+     * Theme of the input.
+     */
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (hAsync(Host, null, hAsync("div", { "aria-live": this.accessibleLabel ? "polite" : "off", "aria-hidden": this.accessibleLabel ? "false" : "true", "aria-atomic": "true", style: {
+        height: this.height,
+      }, id: this.progressId, class: {
+        "duet-progress": true,
+        "duet-progress-done": this.progress === 100,
+        "duet-progress-start": this.progress === 0,
+        "duet-progress-inprogress": this.progress < 99 && this.progress !== 0,
+        "duet-theme-turva": this.theme === "turva",
+      } }, hAsync("duet-visually-hidden", null, hAsync("label", { htmlFor: this.progressLabelId }, this.progress !== 0 && (hAsync("span", null, this.accessibleLabel, ", ", this.accessibleLabelUpload[this.progress < 99 ? 1 : 0])))), this.caption && (hAsync("div", { class: "duet-progress-caption" }, hAsync("span", null, this.caption))), hAsync("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" }, hAsync("div", { class: "progress-bar" }, hAsync("span", { style: { width: `${this.progress}%;` } }, "Progress: ", this.progress, "%"))))));
+  }
+  get element() { return getElement(this); }
+  static get style() { return duetProgressCss; }
+  static get cmpMeta() { return {
+    "$flags$": 0,
+    "$tagName$": "duet-progress",
+    "$members$": {
+      "accessibleDescribedBy": [1, "accessible-described-by"],
+      "accessibleLabel": [1, "accessible-label"],
+      "accessibleLabelUploadDefaults": [1, "accessible-label-upload-defaults"],
+      "accessibleLabelUpload": [1, "accessible-label-upload"],
+      "progress": [1538],
+      "caption": [1],
+      "height": [1],
+      "theme": [1025]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["progress", "progress"]]
+  }; }
+}
+
 const duetRadioCss = "*.sc-duet-radio,*.sc-duet-radio::after,*.sc-duet-radio::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-radio-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:28px !important;margin-bottom:12px !important;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-radio-h:last-child,.sc-duet-radio-h:last-of-type{margin-right:0 !important}.vertical.sc-duet-radio-h{margin-right:0 !important}.horizontal.sc-duet-radio-h{margin-bottom:0 !important;width:auto}.horizontal.sc-duet-radio-h .duet-label.sc-duet-radio span.sc-duet-radio{max-width:100%}@media (min-width: 48em){.horizontal-responsive.sc-duet-radio-h{margin-right:28px !important;margin-bottom:0 !important;width:auto}.horizontal-responsive.sc-duet-radio-h:last-child,.horizontal-responsive.sc-duet-radio-h:last-of-type{margin-right:0 !important}.horizontal-responsive.sc-duet-radio-h .duet-label.sc-duet-radio span.sc-duet-radio{max-width:100%}}.duet-m-0.sc-duet-radio-h{margin:0 !important}.sc-duet-radio-h:last-child:not(:only-child){margin-right:0 !important;margin-bottom:0 !important}.duet-label.sc-duet-radio{position:relative;z-index:100;display:flex;width:100%;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:#00294d;cursor:pointer;background:transparent}.duet-theme-turva.sc-duet-radio .duet-label.sc-duet-radio{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-label.sc-duet-radio span.sc-duet-radio{flex-grow:1;font-size:1rem}.duet-label-hidden.sc-duet-radio .duet-label.sc-duet-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-radio-container.sc-duet-radio{position:relative;width:100%;height:100%}.duet-radio.sc-duet-radio{padding:14px !important;position:absolute;top:0;left:0;z-index:200;width:100%;height:100%;cursor:pointer;opacity:0}.duet-radio.sc-duet-radio+label.sc-duet-radio::before{z-index:100;flex-shrink:0;width:20px;height:20px;margin:2px 10px 1px 1px;content:\"\";background:white;border:1px solid #00294d;border-radius:50%}.duet-theme-turva.sc-duet-radio .duet-radio.sc-duet-radio+label.sc-duet-radio::before{border-color:#171c3a}.duet-radio.sc-duet-radio:focus+label.sc-duet-radio::before{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva.sc-duet-radio .duet-radio.sc-duet-radio:focus+label.sc-duet-radio::before{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-radio.sc-duet-radio:checked+label.sc-duet-radio::after{position:absolute;top:6px;left:5px;z-index:200;flex-shrink:0;width:12px;height:12px;content:\"\";background:#00294d;border-radius:50%}.duet-theme-turva.sc-duet-radio .duet-radio.sc-duet-radio:checked+label.sc-duet-radio::after{background:#171c3a}.duet-radio[disabled].sc-duet-radio{cursor:default}.duet-radio[disabled].sc-duet-radio+label.sc-duet-radio{color:#657787}.duet-theme-turva.sc-duet-radio .duet-radio[disabled].sc-duet-radio+label.sc-duet-radio{color:#747475}.duet-radio[disabled].sc-duet-radio+label.sc-duet-radio::before{border-color:#cfd2d4}.duet-theme-turva.sc-duet-radio .duet-radio[disabled].sc-duet-radio+label.sc-duet-radio::before{border-color:#cfcfd1}.duet-radio[disabled].sc-duet-radio:checked+label.sc-duet-radio::before{border:1px solid #657787}.duet-radio[disabled].sc-duet-radio:checked+label.sc-duet-radio::after{background:#657787}.duet-theme-turva.sc-duet-radio .duet-radio[disabled].sc-duet-radio:checked+label.sc-duet-radio::after{background:#747475;border-color:#747475}";
 
 class DuetRadio {
@@ -12658,7 +13258,7 @@ class DuetRangeSlider {
   }; }
 }
 
-const duetSelectCss = "@charset \"UTF-8\";*.sc-duet-select,*.sc-duet-select::after,*.sc-duet-select::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-select-h{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:inline-flex;width:100%;max-width:100%;vertical-align:bottom}.sc-duet-select-h:last-child,.sc-duet-select-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-select-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-select-h{width:100% !important}}.duet-m-0.sc-duet-select-h{margin:0 !important}duet-tooltip.sc-duet-select{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-select{position:relative;top:4px;right:auto}}.duet-select-container.sc-duet-select{position:relative;width:100%}.duet-select-wrapper.sc-duet-select{position:relative;width:100%;padding:15px 14px !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;line-height:1.25}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper.sc-duet-select::after{content:\"  \"}.duet-select-wrapper.sc-duet-select select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:200;width:100%;height:100%;padding:0;margin:0;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;cursor:pointer;border:0;outline:none;opacity:0}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#909599;box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#747475;box-shadow:0 0 0 1px #747475}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#171c3a}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#0077b3}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select{cursor:default !important}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#00294d !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.duet-select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:block;width:100%;min-width:8rem;padding:12px 14px !important;padding-right:48px !important;overflow:hidden;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.5;color:#00294d;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#de2362 !important}.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#e02a0d !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#e02a0d !important}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;border-color:#747475}.duet-select.sc-duet-select svg.sc-duet-select{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;color:#00294d;pointer-events:none;transform:translateY(-50%)}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select svg.sc-duet-select{color:#171c3a}.duet-select-help.sc-duet-select{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:#657787;border-radius:4px}.duet-select-help.sc-duet-select span.sc-duet-select{display:block;margin-top:8px}.duet-theme-turva.sc-duet-select .duet-select-help.sc-duet-select{color:#747475}.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#e02a0d}.duet-label-hidden.sc-duet-select duet-label.sc-duet-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const duetSelectCss = "@charset \"UTF-8\";*.sc-duet-select,*.sc-duet-select::after,*.sc-duet-select::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-select-h{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:inline-flex;width:100%;max-width:100%;vertical-align:bottom}.sc-duet-select-h:last-child,.sc-duet-select-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-select-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-select-h{width:100% !important}}.duet-m-0.sc-duet-select-h{margin:0 !important}duet-tooltip.sc-duet-select{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-select{position:relative;top:4px;right:auto}}.duet-select-placeholder.sc-duet-select{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:white}.duet-select-container.sc-duet-select{position:relative;width:100%}.duet-select-wrapper.sc-duet-select{position:relative;width:100%;padding:15px 14px !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;line-height:1.25}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper.sc-duet-select::after{content:\"  \"}.duet-select-wrapper.sc-duet-select select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:200;width:100%;height:100%;padding:0;margin:0;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;cursor:pointer;border:0;outline:none;opacity:0}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#909599;box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#747475;box-shadow:0 0 0 1px #747475}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#171c3a}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#0077b3}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select{cursor:default !important}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#00294d !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.duet-select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:block;width:100%;min-width:8rem;padding:12px 14px !important;padding-right:48px !important;overflow:hidden;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.5;color:#00294d;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#de2362 !important}.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#e02a0d !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#e02a0d !important}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;border-color:#747475}.duet-select.sc-duet-select svg.sc-duet-select{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;color:#00294d;pointer-events:none;transform:translateY(-50%)}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select svg.sc-duet-select{color:#171c3a}.duet-select-help.sc-duet-select{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:#657787;border-radius:4px}.duet-select-help.sc-duet-select span.sc-duet-select{display:block;margin-top:8px}.duet-theme-turva.sc-duet-select .duet-select-help.sc-duet-select{color:#747475}.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#e02a0d}.duet-label-hidden.sc-duet-select duet-label.sc-duet-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
 function isOptionGroup(item) {
   return "options" in item;
@@ -12780,14 +13380,14 @@ class DuetSelect {
     if (this.nativeSelect) {
       this.nativeSelect.value = this.value;
     }
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
   }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
     this.refresh();
   }
   /**
@@ -12830,7 +13430,7 @@ class DuetSelect {
         "duet-theme-turva": this.theme === "turva",
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
-      } }, hAsync("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (hAsync("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (hAsync("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), this.placeholder && this.echoPlaceholder && this.value && (hAsync("duet-caption", { id: this.topCaptionPlaceholderId, size: "small" }, this.placeholder)), hAsync("div", { class: "duet-select-wrapper" }, hAsync("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required, "aria-describedby": this.accessibleDescribedBy }, this.placeholder && (hAsync("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (hAsync("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+      } }, hAsync("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (hAsync("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (hAsync("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), hAsync("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (hAsync("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), hAsync("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required, "aria-describedby": this.accessibleDescribedBy }, this.placeholder && (hAsync("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (hAsync("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
       return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
     }))), hAsync("div", { class: "duet-select", "aria-hidden": "true" }, hAsync("span", { key: this.value }, this.getSelectedItemLabel()), hAsync("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))), hAsync("span", { class: "duet-select-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && hAsync("span", null, this.error)))));
   }
@@ -13263,7 +13863,7 @@ class DuetTab {
   }; }
 }
 
-const duetTabGroupCss = "*.sc-duet-tab-group,*.sc-duet-tab-group::after,*.sc-duet-tab-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-tab-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;display:block;width:100%}.duet-tab-group-tabs.sc-duet-tab-group{margin-bottom:28px !important;display:block;width:100%;max-width:100%;padding-top:2px;list-style:none}.duet-tab-group-tabs.duet-m-0.sc-duet-tab-group{margin:0 !important}.duet-tab-group-tabs.duet-tab-group-hidden.sc-duet-tab-group{display:none}@media (min-width: 36em){.duet-tab-group-tabs.duet-tab-group-hidden.sc-duet-tab-group{display:block}}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-group-tabs.sc-duet-tab-group{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-group-tabs.sc-duet-tab-group{border-bottom-color:#e4e4e6 !important}@media (min-width: 36em){duet-select.sc-duet-tab-group{display:none !important}}.duet-tab-button.sc-duet-tab-group{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:20px;margin-top:-2px;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;line-height:1.1;color:#00294d !important;text-align:left;text-decoration:none;cursor:pointer;background:white;border:2px solid #e1e3e6;border-style:solid;border-radius:0;transition:150ms ease}.duet-tab-button.duet-p-0.sc-duet-tab-group{padding:0 !important}.duet-tab-button.duet-m-0.sc-duet-tab-group{margin:0 !important}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a !important;border-color:#e4e4e6}.duet-tab-button.duet-p-0.sc-duet-tab-group{padding:0 !important}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group{display:inline-block;width:auto;margin-left:-2px;border-right:2px solid #e1e3e6;border-radius:0}}.duet-tab-button.sc-duet-tab-group:hover{z-index:200;border-color:#909599}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group:hover{border-color:#747475 !important}.duet-tab-button.sc-duet-tab-group:active{opacity:0.75;transition:none}.duet-tab-button.selected.sc-duet-tab-group{z-index:201;color:white !important;background:#00294d;border-color:#00294d;outline:0;box-shadow:none !important}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:white !important;background-color:#444445;border-color:#444445 !important}.duet-tab-button.sc-duet-tab-group:focus{z-index:200;outline:0}.user-is-tabbing.sc-duet-tab-group-h .duet-tab-button.sc-duet-tab-group:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}.user-is-tabbing.sc-duet-tab-group-h .duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-button.sc-duet-tab-group:first-child{border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group:first-child{border-top-right-radius:0;border-bottom-left-radius:4px}}.duet-tab-button.sc-duet-tab-group:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group:last-child{border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group{display:inline-block;width:auto;padding-right:0;padding-left:0;border:0;border-radius:0;transition:none}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group+.duet-tab-button.sc-duet-tab-group{margin-left:36px}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:#0077b3 !important;background:white;border-bottom:3px solid #0077b3}.duet-theme-turva.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:#c60c30 !important;border-bottom-color:#c60c30 !important}.duet-tab-group-content.sc-duet-tab-group{position:relative;width:100%;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:#00294d;text-align:left}.duet-theme-turva.sc-duet-tab-group .duet-tab-group-content.sc-duet-tab-group{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}";
+const duetTabGroupCss = "*.sc-duet-tab-group,*.sc-duet-tab-group::after,*.sc-duet-tab-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-tab-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;display:block;width:100%}.duet-tab-group-tabs.sc-duet-tab-group{margin-bottom:28px !important;display:block;width:100%;max-width:100%;padding-top:2px;list-style:none}.duet-tab-group-tabs.duet-m-0.sc-duet-tab-group{margin:0 !important}.duet-tab-group-tabs.duet-tab-group-hidden.sc-duet-tab-group{display:none}@media (min-width: 36em){.duet-tab-group-tabs.duet-tab-group-hidden.sc-duet-tab-group{display:block}}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-group-tabs.sc-duet-tab-group{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-group-tabs.sc-duet-tab-group{border-bottom-color:#e4e4e6 !important}@media (min-width: 36em){duet-select.sc-duet-tab-group{display:none !important}}.duet-tab-button.sc-duet-tab-group{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:20px;margin-top:-2px;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;line-height:1.1;color:#00294d !important;text-align:left;text-decoration:none;cursor:pointer;background:white;border:2px solid #e1e3e6;border-style:solid;border-radius:0;transition:150ms ease}.duet-tab-button.duet-p-0.sc-duet-tab-group{padding:0 !important}.duet-tab-button.duet-m-0.sc-duet-tab-group{margin:0 !important}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a !important;border-color:#e4e4e6}.duet-tab-button.duet-p-0.sc-duet-tab-group{padding:0 !important}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group{display:inline-block;width:auto;margin-left:-2px;border-right:2px solid #e1e3e6;border-radius:0}}.duet-tab-button.sc-duet-tab-group:hover{z-index:200;border-color:#909599}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group:hover{border-color:#747475 !important}.duet-tab-button.sc-duet-tab-group:active{opacity:0.75;transition:none}.duet-tab-button.selected.sc-duet-tab-group{z-index:201;color:white !important;background:#00294d;border-color:#00294d;outline:0;box-shadow:none !important}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:white !important;background-color:#171c3a;border-color:#171c3a !important}.duet-tab-button.sc-duet-tab-group:focus{z-index:200;outline:0}.user-is-tabbing.sc-duet-tab-group-h .duet-tab-button.sc-duet-tab-group:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}.user-is-tabbing.sc-duet-tab-group-h .duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-button.sc-duet-tab-group:first-child{border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group:first-child{border-top-right-radius:0;border-bottom-left-radius:4px}}.duet-tab-button.sc-duet-tab-group:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group:last-child{border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group{display:inline-block;width:auto;padding-right:0;padding-left:0;border:0;border-radius:0;transition:none}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group+.duet-tab-button.sc-duet-tab-group{margin-left:36px}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:#0077b3 !important;background:white;border-bottom:3px solid #0077b3}.duet-theme-turva.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:#c60c30 !important;border-bottom-color:#c60c30 !important}.duet-tab-group-content.sc-duet-tab-group{position:relative;width:100%;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:#00294d;text-align:left}.duet-theme-turva.sc-duet-tab-group .duet-tab-group-content.sc-duet-tab-group{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}";
 
 class DuetTabGroup {
   constructor(hostRef) {
@@ -13591,7 +14191,7 @@ class DuetTable {
   }; }
 }
 
-const duetTextareaCss = "*.sc-duet-textarea,*.sc-duet-textarea::after,*.sc-duet-textarea::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-textarea-h{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}.sc-duet-textarea-h:last-child,.sc-duet-textarea-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-textarea-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-textarea-h{width:100% !important}}.duet-m-0.sc-duet-textarea-h{margin:0 !important}duet-tooltip.sc-duet-textarea{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-textarea{position:relative;top:4px;right:auto}}.duet-textarea-container.sc-duet-textarea{position:relative;width:100%;height:100%}.duet-textarea-container.sc-duet-textarea .duet-input-top-caption.sc-duet-textarea{display:none}.duet-textarea-container.duet-input-top-caption-shown.sc-duet-textarea .duet-input-top-caption.sc-duet-textarea{display:flex !important}.duet-textarea.sc-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:#00294d;resize:vertical;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-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:#171c3a;border-color:#747475}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:#e02a0d !important}.duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:#657787;opacity:1 !important;transition:color 300ms ease}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus::-webkit-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus::-webkit-input-placeholder{color:#cfcfd1}.duet-textarea.sc-duet-textarea::-moz-placeholder{color:#657787;opacity:1 !important}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-moz-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus::-moz-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus::-moz-placeholder{color:#cfcfd1}.duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:#657787}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus:-ms-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus:-ms-input-placeholder{color:#cfcfd1}.duet-textarea[disabled].sc-duet-textarea{color:#657787 !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important}.duet-theme-turva.sc-duet-textarea .duet-textarea[disabled].sc-duet-textarea{color:#747475 !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important}.duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #747475}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #e02a0d}.duet-textarea.sc-duet-textarea:focus{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{box-shadow:0 0 0 1px #e02a0d}.duet-textarea.sc-duet-textarea:not(:focus):not(:hover):invalid{box-shadow:none}.duet-textarea-help.sc-duet-textarea{font-size:0.875rem;line-height:1.25}.duet-textarea-help.sc-duet-textarea span.sc-duet-textarea{display:block;margin-top:8px}.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:#de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:#e02a0d}.duet-label-hidden.sc-duet-textarea duet-label.sc-duet-textarea{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-character-count.sc-duet-textarea{display:block;margin:8px 0 0 auto}";
+const duetTextareaCss = "*.sc-duet-textarea,*.sc-duet-textarea::after,*.sc-duet-textarea::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-textarea-h{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}.sc-duet-textarea-h:last-child,.sc-duet-textarea-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-textarea-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-textarea-h{width:100% !important}}.duet-m-0.sc-duet-textarea-h{margin:0 !important}duet-tooltip.sc-duet-textarea{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-textarea{position:relative;top:4px;right:auto}}.duet-textarea-container.sc-duet-textarea{position:relative;width:100%;height:100%}.duet-textarea-container.sc-duet-textarea .duet-input-top-caption.sc-duet-textarea{display:none}.duet-textarea-container.duet-input-top-caption-shown.sc-duet-textarea .duet-input-top-caption.sc-duet-textarea{display:flex !important}.duet-textarea-wrapper.sc-duet-textarea{position:relative}.duet-textarea-placeholder.sc-duet-textarea{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:white}.duet-textarea.sc-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:#00294d;resize:vertical;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-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:#171c3a;border-color:#747475}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:#e02a0d !important}.duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:#657787;opacity:1 !important;transition:color 300ms ease}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus::-webkit-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus::-webkit-input-placeholder{color:#cfcfd1}.duet-textarea.sc-duet-textarea::-moz-placeholder{color:#657787;opacity:1 !important}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-moz-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus::-moz-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus::-moz-placeholder{color:#cfcfd1}.duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:#657787}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus:-ms-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus:-ms-input-placeholder{color:#cfcfd1}.duet-textarea[disabled].sc-duet-textarea{color:#657787 !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important}.duet-theme-turva.sc-duet-textarea .duet-textarea[disabled].sc-duet-textarea{color:#747475 !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important}.duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #747475}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #e02a0d}.duet-textarea.sc-duet-textarea:focus{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{box-shadow:0 0 0 1px #e02a0d}.duet-textarea.sc-duet-textarea:not(:focus):not(:hover):invalid{box-shadow:none}.duet-textarea-help.sc-duet-textarea{font-size:0.875rem;line-height:1.25}.duet-textarea-help.sc-duet-textarea span.sc-duet-textarea{display:block;margin-top:8px}.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:#de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:#e02a0d}.duet-label-hidden.sc-duet-textarea duet-label.sc-duet-textarea{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-character-count.sc-duet-textarea{display:block;margin:8px 0 0 auto}";
 
 const CharacterCount = ({ value, maxlength, label, theme }) => {
   if (maxlength == null) {
@@ -13692,7 +14292,7 @@ class DuetTextarea {
         cleanValue(this.nativeInput, this.disallowPatternRegex);
       }
       this.value = this.nativeInput.value;
-      this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+      this.isCaptionVisible = !!this.caption;
       this.duetInput.emit({
         originalEvent: ev,
         value: this.value,
@@ -13731,7 +14331,7 @@ class DuetTextarea {
   componentWillLoad() {
     inheritGlobalTheme(this);
     this.disallowedPatternChange();
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
     if (this.counter && this.maxlength == null) {
       console.warn("[DUET WARNING]: counter will only take effect if maxlength is set");
     }
@@ -13765,7 +14365,7 @@ class DuetTextarea {
         "duet-label-hidden": this.labelHidden,
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
-      } }, hAsync("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (hAsync("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (hAsync("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), this.placeholder && this.echoPlaceholder && this.value && (hAsync("duet-caption", { id: this.topCaptionPlaceholderId, size: "small" }, this.placeholder)), hAsync("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier }), hAsync("duet-grid", { alignment: "stretch" }, hAsync("duet-grid-item", { margin: "none", fill: true }, hAsync("div", { class: "duet-textarea-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && hAsync("span", null, this.error))), hAsync("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (hAsync(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
+      } }, hAsync("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (hAsync("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (hAsync("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), hAsync("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (hAsync("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), hAsync("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), hAsync("duet-grid", { alignment: "stretch" }, hAsync("duet-grid-item", { margin: "none", fill: true }, hAsync("div", { class: "duet-textarea-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && hAsync("span", null, this.error))), hAsync("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (hAsync(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -14317,6 +14917,1246 @@ class DuetTray {
   }; }
 }
 
+var errorCodes = [
+	{
+		type: "default",
+		system_message: "unknown error",
+		message: {
+			fi: "Tapahtui tuntematon virhe, ole hyvä ja yritä uudelleen.",
+			sv: "Ett okänt fel uppstod, försök igen.",
+			en: "An unknown error occured, please try again."
+		}
+	},
+	{
+		type: "400",
+		system_message: "Bad Request: The server could not understand the request due to invalid syntax.",
+		message: {
+			fi: "Tiedostoa ei hyväksytty.",
+			sv: "Servern avvisade din fil.",
+			en: "The server rejected your file."
+		}
+	},
+	{
+		type: "401",
+		system_message: "Not Authenticated: The client must authenticate itself to get the requested response...",
+		message: {
+			fi: "Vain kirjautunut käyttäjä voi lähettää tiedostoja.",
+			sv: "Du måste vara inloggad för att ladda upp filer.",
+			en: "You need to be logged in to upload files."
+		}
+	},
+	{
+		type: "403",
+		system_message: "No Access: The client does not have access rights to the content.",
+		message: {
+			fi: "Ei oikeuksia lähettää tiedostoja.",
+			sv: "Du har inte rätt åtkomsträttigheter för att ladda upp filer.",
+			en: "You do not have the correct access rights to upload files."
+		}
+	},
+	{
+		type: "413",
+		system_message: "Payload too large",
+		message: {
+			fi: "Tiedosto oli liian vastaanotettavaksi.",
+			sv: "Filen var för stor för servern att hantera.",
+			en: "The file was to large for the server to handle."
+		}
+	},
+	{
+		type: "415",
+		system_message: "Unsupported media type",
+		message: {
+			fi: "Tiedoston tyyppi oli väärä.",
+			sv: "Servern avvisade filen eftersom den hade fel typ.",
+			en: "The server rejected the file because it had the wrong type."
+		}
+	},
+	{
+		type: "429",
+		system_message: "Too many request from same address",
+		message: {
+			fi: "Liian monta yritystä, ole hyvä ja yritä myöhemmin uudelleen.",
+			sv: "Servern har fått många förfrågningar från dig, försök igen senare.",
+			en: "The server has received to many request from you, please try again later."
+		}
+	},
+	{
+		type: "500",
+		system_message: "Internal Server Error",
+		message: {
+			fi: "Palvelin ilmoitti tuntemattomasta virheestä ja lataus epäonnistui.",
+			sv: "Servern rapporterade ett okänt fel och uppladdningen misslyckades.",
+			en: "The server reported an unknown error and the upload failed."
+		}
+	},
+	{
+		type: "duet-upload-100",
+		system_message: "File extension not allowed",
+		message: {
+			fi: "Tiedoston tyyppi ei ole sallittu.",
+			sv: "Du kan inte ladda upp filer av den type.",
+			en: "You cannot upload files with that extension."
+		}
+	},
+	{
+		type: "duet-upload-001",
+		system_message: "File transfer failed",
+		message: {
+			fi: "Tiedoston lähetys keskeytyi, ole hyvä ja yritä uudelleen.",
+			sv: "Din anslutning till servern avbröts, försök igen.",
+			en: "Your connection to the server was interrupted, try again."
+		}
+	},
+	{
+		type: "duet-upload-101",
+		system_message: "File mimetype not allowed",
+		message: {
+			fi: "Tiedoston tyyppi ei ole sallittu.",
+			sv: "Du kan inte ladda upp filer av den typ.",
+			en: "You cannot upload files of that type."
+		}
+	},
+	{
+		type: "duet-upload-201",
+		system_message: "File is too large",
+		message: {
+			fi: "Tiedosto on liian iso.",
+			sv: "Filen är större än tillåtet.",
+			en: "The file is larger than permitted."
+		}
+	},
+	{
+		type: "duet-upload-202",
+		system_message: "The combined size of all files is too large",
+		message: {
+			fi: "Tiedostojen yhteenlaskettu koko on liian iso.",
+			sv: "Du har nått den maximala kombinerade filstorleken.",
+			en: "You have reached the maximum combined filesize."
+		}
+	},
+	{
+		type: "duet-upload-301",
+		system_message: "The maximum file limit has been reached",
+		message: {
+			fi: "Liitteiden maksimimäärä saavutettu.",
+			sv: "Maximalt antal bilagor har uppnåtts.",
+			en: "Maximum number of attachments reached."
+		}
+	}
+];
+
+const getError = (code) => {
+  let error = {
+    type: undefined,
+    system_message: undefined,
+    message: undefined,
+  };
+  error = errorCodes.filter(errorItem => {
+    // the == is intentional we may be comparing numbers to strings - and that is ok here
+    return errorItem.type == code;
+  })[0];
+  if (!error) {
+    error = errorCodes.filter(errorItem => {
+      return errorItem.type === "default";
+    })[0];
+  }
+  return error;
+};
+const getI18nError = (errorCode) => {
+  const errorFromJson = getError(errorCode);
+  const i18String = getLocaleString(errorFromJson.message);
+  if (i18String === "" || !i18String) {
+    return errorFromJson.system_message;
+  }
+  else {
+    return i18String;
+  }
+};
+
+const ErrorItem = ({ data }) => {
+  const { item, error } = data;
+  const { name } = item;
+  const { type } = error;
+  return (hAsync("span", { class: "duet-upload-item-error", role: "status" },
+    hAsync("duet-paragraph", { class: "duet-upload-item-name", color: "danger", margin: "none", weight: "semi-bold" },
+      hAsync("duet-icon", { margin: "none", size: "xx-small", name: "messaging-attachment" }),
+      " ",
+      name),
+    hAsync("duet-paragraph", { class: "duet-upload-item-error-label", size: "small", margin: "none", color: "danger" }, getI18nError(type))));
+};
+
+const ProgressItem = ({ progress, name }) => (hAsync("span", null,
+  hAsync("duet-paragraph", { color: "secondary", margin: "none", size: "small" }, name),
+  hAsync("duet-spacer", { size: "xx-small" }),
+  hAsync("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+
+const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) {
+    return "0 Bytes";
+  }
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};
+
+const SuccessItem = ({ data, showLinks }) => {
+  const { item, size, uploaded, url, meta } = data;
+  const { name } = item;
+  const ContentName = (hAsync("span", { class: "duet-upload-item-name" },
+    hAsync("duet-icon", { margin: "none", size: "xx-small", name: "messaging-attachment" }),
+    hAsync("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+    name));
+  const SizeText = (hAsync("span", { class: "duet-upload-item-size", style: { fontSize: "14px", fontWeight: "400" } },
+    "(",
+    formatBytes(size),
+    ")"));
+  const FilenameLine = uploaded && url && showLinks ? (hAsync("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+    hAsync("duet-link", { url: url, external: true }, ContentName),
+    hAsync("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+    SizeText)) : (hAsync("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" },
+    ContentName,
+    hAsync("duet-spacer", { size: "xx-small", direction: "horizontal" }),
+    SizeText));
+  const Badges = meta && meta.badges ? (hAsync("span", null,
+    hAsync("duet-spacer", { size: "xx-small" }),
+    meta.badges.map(badgeText => (hAsync("duet-badge", { color: "primary" }, badgeText))))) : undefined;
+  return (hAsync("span", { class: "duet-upload-item-success" },
+    hAsync("div", null, FilenameLine),
+    Badges));
+};
+
+const validateFileExtension = (name, allowedExtensions) => {
+  if (!allowedExtensions) {
+    return true;
+  }
+  const ext = name.split(".");
+  const validExtension = allowedExtensions.split(",");
+  const extension = ext[ext.length - 1];
+  return validExtension.includes(extension);
+};
+const validateFileMime = (type, allowedMimetypes) => {
+  if (!allowedMimetypes || !type) {
+    return true;
+  }
+  const validMimeTypes = allowedMimetypes.split(",");
+  let valid = false;
+  validMimeTypes.forEach(mimeType => {
+    const allowedTypes = mimeType.split("/");
+    const fileType = type.split("/");
+    if (allowedTypes[0] === fileType[0] && (allowedTypes[1] === fileType[1] || allowedTypes[1] === "*")) {
+      valid = true;
+    }
+  });
+  return valid;
+};
+const validateFileSize = (size, maxBytes) => {
+  if (!maxBytes || !size) {
+    return true;
+  }
+  return maxBytes >= size;
+};
+const validateFile = (item, validators) => {
+  const { allowedMimetypes, allowedExtensions, maxBytes } = validators;
+  let valid = false;
+  let errorMessage = getError("default");
+  if (item) {
+    const { name, type, size } = item;
+    const mime = validateFileMime(type, allowedMimetypes);
+    const ext = validateFileExtension(name, allowedExtensions);
+    const bytes = validateFileSize(size, maxBytes);
+    if (!mime) {
+      errorMessage = getError("duet-upload-101");
+    }
+    if (!ext) {
+      errorMessage = getError("duet-upload-100");
+    }
+    if (!bytes) {
+      errorMessage = getError("duet-upload-201");
+    }
+    valid = mime && ext && bytes;
+  }
+  else {
+    valid = false;
+  }
+  return {
+    valid,
+    errorMessage: valid ? undefined : getLocaleString(errorMessage.message),
+    errorSystem: valid ? undefined : errorMessage.system_message,
+    errorType: valid ? undefined : errorMessage.type,
+  };
+};
+const validateTotalSizeIsAboveMax = (filelist, maxTotalBytes) => {
+  let total = 0;
+  if (maxTotalBytes) {
+    filelist.forEach(item => {
+      if (item.valid && item.size) {
+        total += item.size;
+      }
+    });
+    if (total < maxTotalBytes) {
+      return true;
+    }
+  }
+  return false;
+};
+const validateTotalAmountIsAboveMax = (filelist, maxFiles) => {
+  let total = 0;
+  if (maxFiles) {
+    filelist.forEach(item => {
+      if (item.valid) {
+        total++;
+      }
+    });
+    if (total > maxFiles) {
+      return true;
+    }
+  }
+  return false;
+};
+
+const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress }) => {
+  const { type = "POST", xhr, uri, argument = null, headers = null } = options;
+  xhr.open(type, `${uri}${argument || ""}`, true);
+  const { data, name } = payload;
+  // headers must be added after open
+  if (headers) {
+    Object.keys(headers).forEach(key => {
+      xhr.setRequestHeader(key, headers[key]);
+    });
+  }
+  if (type === "POST") {
+    xhr.onreadystatechange = () => {
+      // Call a function when the state changes.
+      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 200 && xhr.status < 300) {
+        // Request finished without errors
+        onSuccess(xhr, name, xhr.status);
+      }
+      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status >= 300 && xhr.status < 999) {
+        // Request finished with errors
+        onFailure(xhr, name, xhr.status);
+      }
+    };
+    onProgress(name);
+  }
+  xhr.send(data);
+  return xhr;
+};
+
+const duetUploadCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-upload,*.sc-duet-upload::after,*.sc-duet-upload::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-upload-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@::slotted([slot=header])*/.sc-duet-upload-s>[slot=header]{margin-bottom:16px}/*!@::slotted([slot=fileheader])*/.sc-duet-upload-s>[slot=fileheader]{margin:16px 0 0 0}/*!@::slotted([slot=filefooter])*/.sc-duet-upload-s>[slot=filefooter]{margin-top:16px}/*!@.duet-upload*/.duet-upload.sc-duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@.duet-upload-item-size*/.duet-upload-item-size.sc-duet-upload{font-size:0.75rem;font-weight:400}/*!@.duet-upload-filelist*/.duet-upload-filelist.sc-duet-upload{margin-bottom:25px}/*!@.duet-upload-filelist-empty*/.duet-upload-filelist-empty.sc-duet-upload{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:#f5f8fa}";
+
+/**
+ * @slot header  - named slot - to place content after description / caption
+ * @slot fileheader - named slot - to place content above "filelist" (only displayed when "filelist" contains items)
+ * @slot filelist - named slot - should always contain a configurable duet-editable-table or a component that exposes the same functionality
+ * @slot filefooter - named slot - to place content below "filelist" (only displayed when "filelist" contains items)
+ */
+class DuetUpload {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.duetChange = createEvent$2(this, "duetChange", 3);
+    this.duetBlur = createEvent$2(this, "duetBlur", 7);
+    this.duetFocus = createEvent$2(this, "duetFocus", 7);
+    this.duetDone = createEvent$2(this, "duetDone", 3);
+    this.duetState = createEvent$2(this, "duetState", 3);
+    this.duetDelete = createEvent$2(this, "duetDelete", 3);
+    this.duetCancel = createEvent$2(this, "duetCancel", 3);
+    this.duetProgress = createEvent$2(this, "duetProgress", 3);
+    this.duetUpload = createEvent$2(this, "duetUpload", 3);
+    /**
+     * Own Properties
+     */
+    this.buttonId = createID("DuetButton");
+    this.labelId = createID("DuetLabel");
+    this.uploadId = createID("DuetUpload");
+    this.editableTableId = createID("DuetEditableTable");
+    this.filesInProgress = new Map();
+    this.fileMaxReached = false;
+    this.bytesMaxReached = false;
+    //region Internally exposed properties
+    /**
+     * Properties
+     */
+    this.DefaultGroups = {
+      inprogress: "inprogress",
+      success: "success",
+      failure: "failure",
+    };
+    /**
+     * State() variables
+     */
+    this.tick = Date.now();
+    /**
+     * If external is set to true, the upload component will not actually upload the files, but only keep states
+     * it will be up to you to handle the upload and return progress information to the upload-component
+     */
+    this.external = false;
+    /**
+     * If set the upload component will not display an upload button, you will have to create on yourself
+     * and call the exposed methods startUpload
+     */
+    this.hideButton = false;
+    /**
+     * Default actions added to all files
+     */
+    this.actions = [
+      {
+        icon: "action-delete",
+        color: "color-danger",
+        color_hover: "category-home",
+        id: "delete",
+        map: ["success", "failure"],
+        label: {
+          fi: "Poista tiedosto",
+          en: "Poista tiedosto",
+          sv: "Ta bort filen",
+        },
+      },
+      {
+        icon: "navigation-close",
+        color: "primary",
+        color_hover: "category-home",
+        id: "cancel",
+        map: ["inprogress"],
+        label: {
+          fi: "Keskeytä lähetys",
+          en: "Cancel the upload",
+          sv: "Stop överföringen",
+        },
+      },
+    ];
+    /**
+     * If enabled the filelist will create links on successfully uploaded items,
+     * this requires the server can respond with link URIs in the correct format
+     */
+    this.showLinks = false;
+    /**
+     * Property to change the aria upload progress text read aloud by screenreaders
+     * @default {
+        fi: "Lisää liite",
+        sv: "Lägg till en bilaga",
+        en: "Choose files",
+      }
+     */
+    this.statusLabelDefaults = {
+      fi: {
+        inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
+        inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
+        done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
+        doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
+        files: "tiedostot",
+        file: "tiedosto",
+      },
+      sv: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+        done: "Alla {filesTotal} har lagts till",
+        doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+        files: "filer",
+        file: "fil",
+      },
+      en: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+        done: "All {filesTotal} added successfully",
+        doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
+        files: "tiedostoa",
+        file: "tiedosto",
+      },
+    };
+    /**
+     * Strings used for the status aria-label
+     */
+    this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
+    /**
+     * Property to change descriptionDefaults defaults on the component.
+     * normally you would handle these strings on an application level and override @label when needed
+     * @default {
+        fi: "Lisää liite",
+        sv: "Lägg till en bilaga",
+        en: "Add an attachment",
+      }
+     */
+    this.buttonLabelDefaults = {
+      fi: "Lisää liite",
+      sv: "Lägg till en bilaga",
+      en: "Add an attachment",
+    };
+    /**
+     * Label of button
+     * @default { fi: "Lisää liite", sv: "Lägg till en bilaga", en: "Add an attachment" }
+     */
+    this.buttonLabel = getLocaleString(this.buttonLabelDefaults);
+    /**
+     * accessible Label of button
+     */
+    this.accessibleButtonLabel = undefined;
+    /**
+     * Theme of the input.
+     */
+    this.theme = "";
+    /**
+     * Makes the input component disabled. This prevents users from being able to
+     * interact with the upload component, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * 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;
+    /**
+     * Visually hides the groups labels in the editable table list used to display the list of files
+     */
+    this.hideGroups = false;
+    /**
+     * Map of string that contain list of uploaded files.
+     */
+    this.files = new Map();
+    /**
+     * Property to read if filelist contains errors or not
+     */
+    this.valid = !this.required;
+    /**
+     * Property to change labelDefaults defaults on the component.
+     * normally you would handle these strings on an application level and override @label when needed
+     * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+     */
+    this.labelDefaults = {
+      fi: "Lisää liite",
+      sv: "Lägg till en bilaga",
+      en: "Add attachments",
+    };
+    /**
+     * Label for the input.
+     * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+     */
+    this.label = getLocaleString(this.labelDefaults);
+    /**
+     * Property to change descriptionDefaults defaults on the component.
+     * normally you would handle these strings on an application level and override @label when needed
+     * @default {
+        fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
+        sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
+        en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.",
+      }
+     */
+    this.descriptionDefaults = {
+      fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
+      sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
+      en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.",
+    };
+    /**
+     * Description for the upload component.
+     * @default {
+        fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
+        sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
+        en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.",
+      }
+     */
+    this.description = getLocaleString(this.descriptionDefaults);
+    /**
+     * Defaults for the filelist's empty state.
+     * @default {
+        fi: "Ei vielä lisättyjä tiedostoja.",
+        sv: "Inga filer har lagts till ännu.",
+        en: "No files added yet.",
+       }
+     */
+    this.fileListEmptyDefaults = {
+      fi: "Ei vielä lisättyjä tiedostoja.",
+      sv: "Inga filer har lagts till ännu.",
+      en: "No files added yet.",
+    };
+    /**
+     * Label for the filelist's empty state.
+     * @default { fi: "Ei vielä lisättyjä tiedostoja.",sv: "Inga filer har lagts till ännu.",en: "No files added yet."}
+     */
+    this.fileListEmpty = getLocaleString(this.fileListEmptyDefaults);
+    /**
+     * Display the input in error state along with an error message.
+     */
+    this.error = "";
+    /**
+     * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
+     */
+    this.maxBytes = 200000000;
+    /**
+     * Use maxBytesTotal to specify the maximum size in Bytes of All files combined that can be uploaded.
+     */
+    this.maxBytesTotal = undefined;
+    /**
+     * Use maxFiles to specify the maximum amount of files that can be uploaded
+     */
+    this.maxFiles = 99;
+    /**
+     * A string of commaseperated file type values that are allowed
+     * @example: .pdf,.doc,.docx
+     */
+    this.allowedExtensions = "all";
+    /**
+     * A string of commaseperated mime type values that are allowed
+     * @example: image/*,application/msword,
+     */
+    this.allowedMimetypes = "*";
+    /**
+     * Use multiple to allow the user to select multiple files when uploading
+     */
+    this.multiple = true;
+    /**
+     * Use limitSelection to enforce the value in allowedExtension & allowedMimetypes when selecting files,
+     * by default this is off, setting this to true will limit the users choices to what has been explicitly set
+     */
+    this.limitSelection = false;
+    //region Private functions
+    /**
+     * Private functions
+     */
+    this.listenForActionEvents = () => {
+      this.element.addEventListener("duetEditableItemAction", (e) => {
+        const detail = e.detail;
+        const { action, keyName, originalEvent } = detail;
+        switch (action) {
+          case "delete":
+            this.onDelete(keyName, originalEvent);
+            break;
+          case "cancel":
+            this.onCancel(keyName, originalEvent);
+            break;
+          // code block
+        }
+      });
+    };
+    this.verifyValidity = () => {
+      const { invalid, valid } = this.getFilesAsArray();
+      const oldValid = this.valid;
+      this.valid = invalid.length === 0 && valid.length !== 0;
+      if (this.valid !== oldValid) {
+        this.duetState.emit({
+          originalEvent: undefined,
+          data: { valid: this.valid, from: "componentWillRender" },
+          component: "duet-upload",
+        });
+      }
+    };
+    this.getGroupFromItemData = (item) => {
+      if (item.valid && item.progress === 100) {
+        // if the item has a group, move the file to that group instead
+        // of into the standard success group
+        if (item.group) {
+          return item.group;
+        }
+        return this.DefaultGroups.success;
+      }
+      else if (item.progress > 0 && item.progress !== 100) {
+        return this.DefaultGroups.inprogress;
+      }
+      else if (!item.valid) {
+        return this.DefaultGroups.failure;
+      }
+      else if (item.group) {
+        return item.group;
+      }
+      else {
+        return "none";
+      }
+    };
+    this.getItemHTMLFromItemData = (data, group) => {
+      if (group === this.DefaultGroups.success) {
+        return hAsync(SuccessItem, { data: data, showLinks: this.showLinks });
+      }
+      else if (group === this.DefaultGroups.inprogress) {
+        return hAsync(ProgressItem, { progress: data.progress, name: data.item.name });
+      }
+      else if (group === this.DefaultGroups.failure) {
+        return hAsync(ErrorItem, { data: data });
+      }
+      else if (data.group) {
+        return data.html;
+      }
+      else {
+        return "none";
+      }
+    };
+    this.convertToDuetEditableTableItems = () => {
+      // we're always recreating the map - in order to force an update down stream.
+      const itemData = new Map();
+      //walk the files Map and convert to DuetEditableTableItemData
+      this.files.forEach((data, key, _originalMap) => {
+        const group = this.getGroupFromItemData(data);
+        const item = this.getItemHTMLFromItemData(data, group);
+        itemData.set(key, {
+          uid: data.uid,
+          item,
+          group,
+        });
+      });
+      return itemData;
+    };
+    this.kick = debounce(() => {
+      this.tick = Date.now();
+    }, 30); // will trigger re-render
+    this.genHashName = () => Date.now().toString(36) + Math.random();
+    this.updateValueInMap = (item, key, value, kick = true) => {
+      const fileItem = this.files.get(item);
+      fileItem[key] = value;
+      this.files.set(item, fileItem);
+      if (kick) {
+        this.kick();
+      }
+    };
+    this.updateProgress = (ev, name) => {
+      console.log(this.filesInProgress.size);
+      const updateProgressHelper = percentComplete => {
+        this.updateValueInMap(name, "progress", percentComplete);
+        this.onProgress(name, percentComplete, ev);
+      };
+      if (ev.lengthComputable) {
+        const percentComplete = (ev.loaded / ev.total) * 100;
+        updateProgressHelper(percentComplete);
+      }
+      else {
+        console.log("cant read progress");
+      }
+    };
+    this.trackProgress = (name, remove = false) => {
+      if (remove) {
+        this.filesInProgress.delete(name);
+      }
+      else {
+        this.filesInProgress.set(name, "inprogress");
+      }
+      if (this.filesInProgress.size === 0) {
+        this.onDone();
+      }
+    };
+    this.getFilesAsArray = () => {
+      const filesInQueue = [];
+      const filesInError = [];
+      this.files.forEach(value => {
+        if (value.valid && !value.deleted) {
+          filesInQueue.push(value);
+        }
+        else if (!value.valid && !value.deleted) {
+          filesInError.push(value);
+        }
+      });
+      return { valid: filesInQueue, invalid: filesInError };
+    };
+    this.resetFormFields = () => {
+      /**
+       * You cannot modify a FileList, nor remove single items from it
+       * This completely removes all items in the FileList
+       * We reset the form fields to always be able to re-upload files
+       * and because we handle all uploads and states internally in the component (not relying on native form elements)
+       */
+      this.nativeInput.value = "";
+    };
+    this.startUpload = async (ev, metaData = undefined) => {
+      await this.setFocus();
+      this.metaData = metaData;
+      this.nativeInput.click();
+      this.onUpload(ev, metaData);
+      ev.stopPropagation();
+      ev.preventDefault();
+      return;
+    };
+    //endregion
+    //region Eventlisteners for the XHR requests
+    /**
+     * Eventlisteners for the XHR requests
+     */
+    this.transferComplete = name => {
+      this.updateValueInMap(name, "progress", 100, false);
+      this.trackProgress(name, true);
+    };
+    this.transferDone = (xhr, name, status) => {
+      this.updateValueInMap(name, "status", status, false);
+      this.updateValueInMap(name, "uploaded", true, false);
+      try {
+        const response = JSON.parse(xhr.response);
+        this.updateValueInMap(name, "url", response.url);
+      }
+      catch (e) {
+        this.updateValueInMap(name, "url", null);
+        console.error("Server did not respond with expected response {url: string}");
+      }
+      return;
+    };
+    this.transferDoneWithFailure = (xhr, name, status) => {
+      try {
+        const { error } = JSON.parse(xhr.response);
+        this.updateValueInMap(name, "error", { message: error.message, type: error.type }, false);
+      }
+      catch (e) {
+        console.error("Server did not respond with expected response error:{message: string, type: int}");
+        this.updateValueInMap(name, "error", { type: status }, false);
+      }
+      this.updateValueInMap(name, "valid", false, true);
+    };
+    this.transferFailed = name => {
+      this.updateValueInMap(name, "error", getError("duet-upload-001"));
+    };
+    this.transferCanceled = name => {
+      this.files.delete(name);
+      this.validateTotals(name);
+      this.kick();
+    };
+    this.validateTotals = (name) => {
+      const isTotalSizeOverMaxSize = validateTotalSizeIsAboveMax(this.files, this.maxBytesTotal);
+      const isTotalFileAmountAboveMax = validateTotalAmountIsAboveMax(this.files, this.maxFiles);
+      if (isTotalSizeOverMaxSize && name) {
+        this.updateValueInMap(name, "error", getError("duet-upload-202"), false);
+      }
+      if (isTotalFileAmountAboveMax && name) {
+        this.updateValueInMap(name, "error", getError("duet-upload-301"), false);
+      }
+      this.bytesMaxReached = isTotalSizeOverMaxSize;
+      this.fileMaxReached = isTotalFileAmountAboveMax;
+      return {
+        bytesMaxReached: isTotalSizeOverMaxSize,
+        fileMaxReached: isTotalFileAmountAboveMax,
+      };
+    };
+    this.onDelete = (key, ev) => {
+      const deletedItem = this.files.get(key);
+      this.files.delete(key);
+      this.validateTotals();
+      this.kick();
+      this.duetDelete.emit({
+        originalEvent: ev,
+        data: { deletion: deletedItem },
+        component: "duet-upload",
+      });
+      if (!this.external) {
+        this.makeXHRDeleteRequest(deletedItem);
+      }
+      this.resetFormFields();
+    };
+    this.onCancel = (key, ev) => {
+      const cancelledItem = this.files.get(key);
+      this.files.delete(key);
+      if (!this.external) {
+        const { xhr } = cancelledItem;
+        xhr.abort();
+      }
+      else {
+        this.kick();
+      }
+      this.resetFormFields();
+      this.duetCancel.emit({
+        originalEvent: ev,
+        data: { cancelled: cancelledItem },
+        component: "duet-upload",
+      });
+    };
+    this.onUpload = (ev, metaData) => {
+      this.duetUpload.emit({
+        originalEvent: ev,
+        metaData,
+        component: "duet-upload",
+      });
+    };
+    this.onBlur = (ev) => {
+      this.duetBlur.emit({
+        originalEvent: ev,
+        component: "duet-upload",
+      });
+    };
+    this.onProgress = (key, percentComplete, ev) => {
+      this.duetChange.emit({
+        originalEvent: ev,
+        data: {
+          key,
+          percentComplete,
+        },
+        component: "duet-upload",
+      });
+    };
+    this.onFocus = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        component: "duet-upload",
+      });
+    };
+    this.onDone = () => {
+      this.duetDone.emit({
+        component: "duet-upload",
+        data: { files: this.files },
+      });
+    };
+  }
+  watchValidHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.kick();
+    }
+  }
+  //endregion
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.listenForActionEvents();
+  }
+  componentWillRender() {
+    // listen to the events from the component
+    this.verifyValidity();
+  }
+  //endregion
+  //region XHR requests
+  /**
+   * XHR request utilities
+   */
+  makeXHRPostRequest(data) {
+    const xhr = new XMLHttpRequest();
+    const name = data.get("name");
+    xhr.upload.addEventListener("progress", ev => {
+      this.updateProgress(ev, name);
+    });
+    xhr.upload.addEventListener("load", () => {
+      this.transferComplete(name);
+    });
+    xhr.upload.addEventListener("error", () => {
+      this.transferFailed(name);
+    });
+    xhr.upload.addEventListener("abort", () => {
+      this.transferCanceled(name);
+    });
+    return makeXhrRequest({
+      payload: { data, name },
+      options: { type: "POST", uri: this.uri, xhr, argument: null, headers: null },
+      onFailure: this.transferDoneWithFailure,
+      onSuccess: this.transferDone,
+      onProgress: this.trackProgress,
+    });
+  }
+  makeXHRDeleteRequest(data) {
+    const { uid, item } = data;
+    const xhr = new XMLHttpRequest();
+    // don't present server issues to user on deletes, just remove them from the visible list
+    return makeXhrRequest({
+      payload: { data: null, name },
+      options: {
+        type: "DELETE",
+        xhr,
+        uri: this.uri,
+        arguments: `?key=${uid}&name=${item.name}`,
+        headers: {
+          "x-fileuid": uid,
+          "x-filename": item.name,
+        },
+      },
+      onFailure: this.transferDoneWithFailure,
+      onSuccess: this.transferDone,
+      onProgress: this.trackProgress,
+    });
+  }
+  //endregion
+  //region EventHandlers
+  /**
+   * Component event handling.
+   */
+  async onChange(ev) {
+    var _a;
+    const selectedFiles = Array.from((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.files);
+    // FileList is a nice array like structure but
+    // to ensure uniqueness of files we use a mapping structure and
+    // key to the name (makes it easier to delete as well)
+    if (selectedFiles) {
+      for (const item of selectedFiles) {
+        const { valid, errorMessage, errorType, errorSystem } = validateFile(item, {
+          maxBytes: this.maxBytes,
+          allowedExtensions: this.allowedExtensions,
+          allowedMimetypes: this.allowedMimetypes,
+        });
+        const uid = this.genHashName();
+        const fileListItem = {
+          uid,
+          item: item,
+          size: item.size,
+          meta: this.metaData,
+          uploaded: false,
+          valid,
+          error: {
+            type: valid ? undefined : errorType,
+            message: valid ? undefined : errorMessage,
+            system_message: valid ? undefined : errorSystem,
+          },
+          progress: 0,
+          deleted: false,
+          xhr: false,
+          url: false,
+        };
+        this.files.set(item.name, fileListItem);
+        // validate that we haven't hit any maxfiles or maxbytes limits before we upload
+        const { bytesMaxReached, fileMaxReached } = this.validateTotals(item.name);
+        if (bytesMaxReached) {
+          // in case one of the global maxes have been reached, invalidate the file
+          this.updateValueInMap(item.name, "valid", false, false);
+        }
+        else if (fileMaxReached) {
+          // in case one of the global maxes have been reached, invalidate the file
+          this.updateValueInMap(item.name, "valid", false, false);
+        }
+        else if (valid && !this.external) {
+          // if all is well AND external file upload handling has not been set, start upload
+          const data = new FormData();
+          data.append("file", item);
+          data.append("uid", uid);
+          data.append("name", item.name);
+          data.append("metadata", JSON.stringify({ uid, url: this.uri, size: item.size, meta: fileListItem.meta }));
+          try {
+            fileListItem.xhr = await this.makeXHRPostRequest(data);
+          }
+          catch (e) {
+            // in case one of the global maxes have been reached, invalidate the file
+            this.updateValueInMap(item.name, "valid", false, false);
+          }
+        }
+        // kick the stat to force update
+        this.kick();
+      }
+    }
+    // reset the form, so that a user may upload a file again (with the same name)
+    this.resetFormFields();
+    // reset the internal metaData state
+    this.metaData = undefined;
+    this.duetChange.emit({
+      originalEvent: ev,
+      data: { files: this.files },
+      component: "duet-upload",
+    });
+  }
+  //endregion
+  /**
+   * Sets focus on the specified `duet-input`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus(options) {
+    if (this.nativeInput) {
+      this.nativeInput.focus(options);
+    }
+    return;
+  }
+  /**
+   * Method for invoking the upload sequence
+   */
+  async upload(metaData = undefined) {
+    await this.setFocus();
+    this.metaData = metaData;
+    this.nativeInput.click();
+    return;
+  }
+  /**
+   * Get list of files, divided in errors and valid sections
+   */
+  async getFiles() {
+    if (!this.files || this.files.size === 0) {
+      return false;
+    }
+    return this.getFilesAsArray();
+  }
+  /**
+   * Convenience method for updating a of an item in the files attribute
+   */
+  async updateValue(item, key, value) {
+    this.updateValueInMap(item, key, value);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.uploadId;
+    let caption = this.description.replace(/{maxfiles}/g, this.maxFiles.toString());
+    caption = caption.replace(/{maxbytes}/g, `${Math.floor(this.maxBytes / 1024 / 1024)} MB`);
+    caption = caption.replace(/{filetypes}/g, this.allowedExtensions.split(",").join(", "));
+    return (hAsync(Host, { class: { "duet-m-0": this.margin === "none" } }, hAsync("duet-fieldset", { label: this.label, caption: caption }, hAsync("slot", { name: "header" }), !this.files.size && (hAsync("duet-label", { theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
+        "duet-upload-filelist-empty": !this.files.size,
+        "duet-upload-filelist": true,
+        "duet-upload-filelist-filled": this.files.size,
+      }, id: this.labelId, for: identifier }, this.fileListEmpty)), !!this.files.size && hAsync("slot", { name: "fileheader" }), !!this.files.size && (hAsync("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.statusMessageLabel })), !!this.files.size && (hAsync("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, items: this.convertToDuetEditableTableItems() })), !!this.files.size && hAsync("slot", { name: "filefooter" }), hAsync("duet-spacer", { size: "large" }), !this.hideButton && (hAsync("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle" }, this.buttonLabel)), hAsync("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (hAsync("duet-alert", null, this.fileMaxReached && getI18nError("duet-upload-301"), this.bytesMaxReached && getI18nError("duet-upload-202"))), hAsync("duet-spacer", { size: "medium" }), hAsync("duet-visually-hidden", null, hAsync("input", { ref: input => {
+        this.nativeInput = input;
+      }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
+        "duet-upload": true,
+      }, disabled: this.disabled, "aria-hidden": "true", required: this.required, name: this.name, id: this.identifier, multiple: this.multiple, capture: "user" })))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "valid": ["watchValidHandler"]
+  }; }
+  static get style() { return duetUploadCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-upload",
+    "$members$": {
+      "accessibleActiveDescendant": [1, "accessible-active-descendant"],
+      "accessibleDescribedBy": [1, "accessible-described-by"],
+      "accessibleControls": [1, "accessible-controls"],
+      "accessibleOwns": [1, "accessible-owns"],
+      "external": [4],
+      "hideButton": [4, "hide-upload-button"],
+      "actions": [1],
+      "uri": [1],
+      "showLinks": [4, "show-links"],
+      "caption": [1],
+      "statusLabelDefaults": [1, "status-label-default"],
+      "statusMessageLabel": [16],
+      "buttonLabelDefaults": [1, "button-label-default"],
+      "buttonLabel": [1, "button-label"],
+      "accessibleButtonLabel": [1, "accessible-button-label"],
+      "theme": [1025],
+      "disabled": [516],
+      "identifier": [1],
+      "margin": [1],
+      "required": [4],
+      "groups": [1],
+      "hideGroups": [4, "hide-table-labels"],
+      "files": [1040],
+      "valid": [1540],
+      "labelDefaults": [1, "label-default"],
+      "label": [1],
+      "descriptionDefaults": [1, "description-default"],
+      "description": [1],
+      "fileListEmptyDefaults": [1, "list-empty-default"],
+      "fileListEmpty": [1, "file-list-empty"],
+      "error": [1],
+      "name": [1],
+      "maxBytes": [2, "max-bytes"],
+      "maxBytesTotal": [2, "max-bytes-total"],
+      "maxFiles": [2, "max-files"],
+      "allowedExtensions": [1, "allowed-extensions"],
+      "allowedMimetypes": [1, "allowed-mimetypes"],
+      "multiple": [4],
+      "limitSelection": [4, "limit-selection"],
+      "value": [1025],
+      "tick": [32],
+      "setFocus": [64],
+      "upload": [64],
+      "getFiles": [64],
+      "updateValue": [64]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["disabled", "disabled"], ["valid", "valid"]]
+  }; }
+}
+
+class DuetUploadAriaStatus {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * State() variables
+     */
+    this.statusMessage = null;
+    /**
+     * State() variables
+     */
+    this.statusMessageLabel = null;
+    /**
+     * Adds accessible label that is read aloud
+     */
+    this.accessibleAriaLive = "polite";
+    /**
+     * valid file amount
+     */
+    this.valid = undefined;
+    /**
+     * total files
+     */
+    this.total = undefined;
+    /**
+     * invalid file amount
+     */
+    this.invalid = undefined;
+    /**
+     * valid file amount
+     */
+    this.inprogress = undefined;
+    /**
+     * Component lifecycle events.
+     */
+    this.replacePlaceHolders = (statusString) => {
+      const addFiles = (amount) => {
+        return amount > 1 ? `${amount} ${this.statusMessageLabel.files}` : `${amount} ${this.statusMessageLabel.file}`;
+      };
+      return statusString
+        .replace("{filesUploaded}", addFiles(this.valid))
+        .replace("{filesInProgress}", addFiles(this.inprogress))
+        .replace("{filesTotal}", addFiles(this.total))
+        .replace("{filesWithErrors}", addFiles(this.invalid));
+    };
+    this.getStatusMessage = () => {
+      const { done, inProgress, doneWithErrors, inProgressWithErrors } = this.statusMessageLabel;
+      const hasErrors = this.invalid > 0;
+      const isInProgress = this.inprogress > 0;
+      const isInProgressWithErrors = this.inprogress > 0 && hasErrors;
+      const isDone = this.valid === this.total && !isInProgress && !hasErrors;
+      const isDoneWithErrors = this.valid + this.invalid === this.total && !isInProgress;
+      if (isDone) {
+        this.statusMessage = this.replacePlaceHolders(done);
+        return;
+      }
+      else if (isInProgressWithErrors) {
+        this.statusMessage = this.replacePlaceHolders(inProgressWithErrors);
+        return;
+      }
+      else if (isInProgress) {
+        this.statusMessage = this.replacePlaceHolders(inProgress);
+        return;
+      }
+      else if (isDoneWithErrors) {
+        this.statusMessage = this.replacePlaceHolders(doneWithErrors);
+        return;
+      }
+      return;
+    };
+  }
+  watchHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.getStatusMessage();
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (hAsync(Host, { role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, hAsync("duet-visually-hidden", null, this.statusMessage)));
+  }
+  static get watchers() { return {
+    "valid": ["watchHandler"],
+    "invalid": ["watchHandler"],
+    "inprogress": ["watchHandler"],
+    "total": ["watchHandler"]
+  }; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-upload-aria-status",
+    "$members$": {
+      "statusMessageLabel": [16],
+      "accessibleAriaLive": [1, "accessible-aria-live"],
+      "valid": [2],
+      "total": [2],
+      "invalid": [2],
+      "inprogress": [2],
+      "statusMessage": [32]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
+}
+
 const duetVisuallyHiddenCss = "/*!@:host*/.sc-duet-visually-hidden-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;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}";
 
 class DuetVisuallyHidden {
@@ -14354,6 +16194,9 @@ registerComponents([
   DuetCookieConsent,
   DuetDatePicker,
   DuetDivider,
+  DuetEditableTable,
+  DuetEditableTableButton,
+  DuetEditableTableItem,
   DuetEmptyState,
   DuetFieldset,
   DuetFooter,
@@ -14375,6 +16218,7 @@ registerComponents([
   DuetNotificationDrawer,
   DuetNumberInput,
   DuetParagraph,
+  DuetProgress,
   DuetRadio,
   DuetRadioGroup,
   DuetRangeSlider,
@@ -14390,6 +16234,8 @@ registerComponents([
   DuetToggle,
   DuetTooltip,
   DuetTray,
+  DuetUpload,
+  DuetUploadAriaStatus,
   DuetVisuallyHidden,
 ]);