@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/cjs/duet-number-input.cjs.entry.js

@@ -3,19 +3,40 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CKsfMbRW.js');
+var _commonjsHelpers = require('./_commonjsHelpers-4N64IRaP.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.js');
+var createId = require('./create-id-DtslnIOq.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-CYOjMfnd.js');
+var slotUtils = require('./slot-utils-D4QyzHw3.js');
+require('./string-utils-B35hEUBv.js');
 
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const keyboardUtils = require('./keyboard-utils-681e11ec.js');
-const languageUtils = require('./language-utils-b5940c7b.js');
-const slotUtils = require('./slot-utils-382633cf.js');
-require('./string-utils-7b13c16e.js');
+var actionAdd;
+var hasRequiredActionAdd;
 
-var actionAdd={"title":"action-add","tags":"action add plus","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 24a.75.75 0 0 1-.75-.75v-10.5H.75a.75.75 0 0 1 0-1.5h10.5V.75a.75.75 0 0 1 1.5 0v10.5h10.5a.75.75 0 0 1 0 1.5h-10.5v10.5A.75.75 0 0 1 12 24z\"/></svg>"};
+function requireActionAdd () {
+	if (hasRequiredActionAdd) return actionAdd;
+	hasRequiredActionAdd = 1;
+	actionAdd={"title":"action-add","tags":"action add plus","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 24a.75.75 0 0 1-.75-.75v-10.5H.75a.75.75 0 0 1 0-1.5h10.5V.75a.75.75 0 0 1 1.5 0v10.5h10.5a.75.75 0 0 1 0 1.5h-10.5v10.5A.75.75 0 0 1 12 24z\"/></svg>"};
+	return actionAdd;
+}
+
+var actionAddExports = requireActionAdd();
+var addIcon = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(actionAddExports);
+
+var actionSubtract;
+var hasRequiredActionSubtract;
+
+function requireActionSubtract () {
+	if (hasRequiredActionSubtract) return actionSubtract;
+	hasRequiredActionSubtract = 1;
+	actionSubtract={"title":"action-subtract","tags":"action subtract minus remove delete cancel","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 12.788a.75.75 0 0 1 0-1.5h22.5a.75.75 0 0 1 0 1.5z\"/></svg>"};
+	return actionSubtract;
+}
 
-var actionSubtract={"title":"action-subtract","tags":"action subtract minus remove delete cancel","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 12.788a.75.75 0 0 1 0-1.5h22.5a.75.75 0 0 1 0 1.5z\"/></svg>"};
+var actionSubtractExports = requireActionSubtract();
+var subtractIcon = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(actionSubtractExports);
 
 /**
  *  function that takes a string value or number and looks for any character resembling a minus,
@@ -74,8 +95,7 @@ function ConvertToEnUS(value, locale, replaceThousands = false) {
 const roundTo = (val, multiple) => Math.round(val / multiple) * multiple;
 const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
 
-const duetNumberInputCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;line-height:1.25;text-align:left;vertical-align:bottom}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}.duet-number-container{position:relative;width:100%}.duet-number-buttons{-webkit-user-select:none;user-select:none;position:absolute;top:1px;right:1px;z-index:200;width:96px;height:calc(100% - 2px)}.duet-number-buttons .duet-number-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50%;height:100%;text-align:center;cursor:pointer;background:transparent;-webkit-appearance:none;appearance:none}.duet-number-buttons .duet-number-button[aria-disabled=true],.duet-number-buttons .duet-number-button:disabled{pointer-events:none}.duet-number-buttons .duet-number-button[aria-disabled=true] duet-icon,.duet-number-buttons .duet-number-button:disabled duet-icon{opacity:0.4}.duet-number-buttons .duet-number-button:active duet-icon{transform:translateY(1px)}.duet-number-buttons .duet-number-button:focus{outline:0}:host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus{z-index:2;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus{box-shadow:0 0 0 2px #171c3a !important}.duet-number-buttons .duet-number-button:first-of-type{border-left:1px solid rgb(181, 198, 208)}.duet-number-buttons .duet-number-button:first-of-type::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%)}.duet-number-buttons .duet-number-button:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}.duet-number-buttons .duet-number-button:last-of-type::before{position:absolute;top:20%;left:0;width:1px;height:60%;content:\"\";background:rgb(212, 223, 229)}:host(.duet-theme-turva) .duet-number-buttons .duet-number-button:first-of-type::before{background:linear-gradient(to left, rgba(199, 202, 207, 0.2) 0%, rgba(199, 202, 207, 0.2) 1px, rgba(199, 202, 207, 0.1) 1px, rgba(199, 202, 207, 0) 100%)}:host(.duet-theme-turva) .duet-number-buttons .duet-number-button:last-of-type::before{background:rgb(222, 224, 228)}";
-const DuetNumberInputStyle0 = duetNumberInputCss;
+const duetNumberInputCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;line-height:1.25;vertical-align:bottom;text-align:left}:host:last-child,:host:last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host:last-of-type{margin-right:16px !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}.duet-number-container{position:relative;width:100%}.duet-number-buttons{-webkit-user-select:none;user-select:none;position:absolute;top:1px;right:1px;z-index:200;width:96px;height:calc(100% - 2px)}.duet-number-buttons .duet-number-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:50%;height:100%;text-align:center;-webkit-appearance:none;appearance:none;cursor:pointer;background:transparent}.duet-number-buttons .duet-number-button:focus{outline:0}:host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus{outline:2px solid;outline-offset:0;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus,:host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus,:host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-number-buttons .duet-number-button[aria-disabled=true],.duet-number-buttons .duet-number-button:disabled{pointer-events:none}.duet-number-buttons .duet-number-button[aria-disabled=true] duet-icon,.duet-number-buttons .duet-number-button:disabled duet-icon{opacity:0.4}.duet-number-buttons .duet-number-button:active duet-icon{transform:translateY(1px)}:host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus{z-index:2}.duet-number-buttons .duet-number-button:first-of-type{border-left:1px solid rgb(181, 198, 208)}.duet-number-buttons .duet-number-button:first-of-type::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%)}.duet-number-buttons .duet-number-button:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}.duet-number-buttons .duet-number-button:last-of-type::before{position:absolute;top:20%;left:0;z-index:-1;width:1px;height:60%;content:\"\";background:rgb(212, 223, 229)}:host(.duet-theme-turva) .duet-number-buttons .duet-number-button:first-of-type::before{background:linear-gradient(to left, rgba(199, 202, 207, 0.2) 0%, rgba(199, 202, 207, 0.2) 1px, rgba(199, 202, 207, 0.1) 1px, rgba(199, 202, 207, 0) 100%)}:host(.duet-theme-turva) .duet-number-buttons .duet-number-button:last-of-type::before{background:rgb(222, 224, 228)}:host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:first-of-type::before{background:linear-gradient(to left, rgba(178, 194, 205, 0.2) 0%, rgba(178, 194, 205, 0.2) 1px, rgba(178, 194, 205, 0.1) 1px, rgba(178, 194, 205, 0) 100%)}:host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:last-of-type::before{background:rgb(212, 221, 226)}";
 
 const DuetNumberInput = class {
     constructor(hostRef) {
@@ -86,6 +106,149 @@ const DuetNumberInput = class {
         this.duetFocus = index.createEvent(this, "duetFocus", 7);
         this.inputId = createId.createID("DuetInput");
         this.proxyId = createId.createID("DuetInput");
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @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 = languageUtils.getLanguage();
+        /**
+         * Locale used to format the entered value. Note that localization is used only for decimal separator, as using thousands
+         * separators would break keyboard input.
+         */
+        this.locale = languageUtils.getLocale(this.language).locale;
+        /**
+         * Unit for the number input.
+         */
+        this.unit = languageUtils.getLocale(this.language).money;
+        /**
+         * Details of the component
+         */
+        this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
+        this.accessibleDescription = undefined;
+        /**
+         * Defaults for accessibleLive
+         * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
+         */
+        this.accessibleLiveDefaults = {
+            fi: "{current} euroa valittuna",
+            en: "{current} euros selected",
+            sv: "{current} euro valt",
+        };
+        /**
+         * Format of message used to announce current amount when switching between amounts. Note that the default has "euros"
+         * so if you use another unit is is essential you set this attribute to reflect that unit.
+         * The string {current} is replaced with the current amount.
+         * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
+         */
+        this.accessibleLive = languageUtils.getLocaleString(this.accessibleLiveDefaults, this.language);
+        /**
+         * Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead.
+         */
+        this.accessibleLiveEnabled = true;
+        /**
+         * Defaults for accessibleAdd
+         * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+         */
+        this.accessibleAddDefaults = {
+            fi: "Lisää summaan",
+            en: "Add to the amount",
+            sv: "Lägg till beloppet",
+        };
+        /**
+         * Accessible label for the add button that is read for screen reader users.
+         * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
+         */
+        this.accessibleAdd = languageUtils.getLocaleString(this.accessibleAddDefaults, this.language);
+        /**
+         * Defaults for accessibleSubtract
+         * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+         */
+        this.accessibleSubtractDefaults = {
+            fi: "Vähennä summasta",
+            en: "Subtract from the amount",
+            sv: "Dra från beloppet",
+        };
+        /**
+         * Accessible label for the subtract button that is read for screen reader users.
+         * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
+         */
+        this.accessibleSubtract = languageUtils.getLocaleString(this.accessibleSubtractDefaults, this.language);
+        /**
+         * Theme of the input.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Minimum value.
+         */
+        this.min = 0;
+        /**
+         * Defaults for Label
+         * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        this.labelDefaults = {
+            fi: "Nimilappu",
+            en: "Label",
+            sv: "Etikett",
+        };
+        /**
+         * Label for the number input.
+         * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        this.label = languageUtils.getLocaleString(this.labelDefaults, this.language);
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Maximum value.
+         */
+        this.max = 1000000;
+        /**
+         * Display the input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        this.tooltip = "";
+        /**
+         * Step amount.
+         */
+        this.step = 5000;
+        /**
+         * Controls whether or not value gets rounded to the nearest
+         * multiple of a step on blur. Set to "false" to disable this behaviour.
+         */
+        this.rounding = true;
+        /**
+         * Makes the number input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the input is required or not. Please note that this is required for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
         /**
          * Component event handling.
          */
@@ -194,13 +357,13 @@ const DuetNumberInput = class {
         };
         this.localizeValue = (value) => {
             // Returns a localized string that can be used as input value.
-            return value.toLocaleString(this.locale);
+            return value.toLocaleString(this.locale, { useGrouping: false });
         };
         this.setValue = (value) => {
             // Set the localized prop value.
             this.value = this.localizeValue(value);
             // Finally also set the visible input value and unit.
-            this.duetInputElement.value = `${this.value} ${this.unit}`;
+            this.duetInputElement.value = `${this.value}${this.getUnitString()}`;
         };
         this.add = (ev) => {
             // If this was called via a html button, prevent the default functionality
@@ -249,58 +412,6 @@ const DuetNumberInput = class {
             this.value = this.localizeValue(newValue);
             this.emitChange(ev);
         };
-        this.language = languageUtils.getLanguage();
-        this.locale = languageUtils.getLocale(this.language).locale;
-        this.unit = languageUtils.getLocale(this.language).money;
-        this.focusedValue = undefined;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleLiveDefaults = {
-            fi: "{current} euroa valittuna",
-            en: "{current} euros selected",
-            sv: "{current} euro valt",
-        };
-        this.accessibleLive = languageUtils.getLocaleString(this.accessibleLiveDefaults, this.language);
-        this.accessibleLiveEnabled = true;
-        this.accessibleAddDefaults = {
-            fi: "Lisää summaan",
-            en: "Add to the amount",
-            sv: "Lägg till beloppet",
-        };
-        this.accessibleAdd = languageUtils.getLocaleString(this.accessibleAddDefaults, this.language);
-        this.accessibleSubtractDefaults = {
-            fi: "Vähennä summasta",
-            en: "Subtract from the amount",
-            sv: "Dra från beloppet",
-        };
-        this.accessibleSubtract = languageUtils.getLocaleString(this.accessibleSubtractDefaults, this.language);
-        this.theme = "";
-        this.margin = "auto";
-        this.expand = false;
-        this.identifier = undefined;
-        this.min = 0;
-        this.labelDefaults = {
-            fi: "Nimilappu",
-            en: "Label",
-            sv: "Etikett",
-        };
-        this.label = languageUtils.getLocaleString(this.labelDefaults, this.language);
-        this.labelHidden = false;
-        this.max = 1000000;
-        this.name = undefined;
-        this.error = "";
-        this.tooltip = "";
-        this.step = 5000;
-        this.rounding = true;
-        this.role = undefined;
-        this.disabled = false;
-        this.required = false;
-        this.value = undefined;
     }
     /**
      * Component lifecycle events.
@@ -350,6 +461,10 @@ const DuetNumberInput = class {
             this.emitNull(ev);
         }
     }
+    // prefix existing unit with white space or return empty string if no unit
+    getUnitString() {
+        return this.unit ? ` ${this.unit}` : "";
+    }
     formatAnnouncement() {
         const current = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
         if (current == null) {
@@ -363,16 +478,16 @@ const DuetNumberInput = class {
      */
     render() {
         const identifier = this.identifier || this.inputId;
-        const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
+        const maxlength = `${this.localizeValue(this.max)}${this.getUnitString()}`.length;
         const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
-        return (index.h(index.Host, { key: '3da7c782ce445861599dc9a836d50866b7950bef', class: {
+        return (index.h(index.Host, { key: '238b4be322c64eeb2ad779617a1b5cc7b5185bb9', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, index.h("div", { key: 'a42d62f6fbf766e1d8ca3289cedad8c0da51683d', class: "duet-number-container" }, index.h("duet-input", { key: '802ffebd0db05445c6644fac9a8cd77a36a2df32', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, index.h("slot", { key: 'e724d4f60cb5ae0847b2280ff46141601b922955', name: "tooltip" }), index.h("div", { key: 'bddebaeb4d842b216f3c5ab57d27398c9072ecba', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, index.h("button", { key: '9c0809c67e56135776e7f7730a11f5f2da4fabd8', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, index.h("duet-visually-hidden", { key: 'd8771c771af162cf210be52b909ff79a6e0b7e49' }, this.accessibleSubtract, " ", this.step), index.h("duet-icon", { key: '35c87ddeaf36725a3c5502711615eae4f15e4329', icon: actionSubtract.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), index.h("button", { key: '8988e8d80684cdd0d3a561e3e418d5bdf799d0de', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, index.h("duet-visually-hidden", { key: '163ab6c2ccdc27ec467ff3acdb2ece1b789c57d7' }, this.accessibleAdd, " ", this.step), index.h("duet-icon", { key: 'da61399d82dcb9263d33dd636279857685fda111', icon: actionAdd.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (index.h("duet-visually-hidden", { key: '4370e4cd37e5acc790bec55999ec64bfcd5b2467', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            } }, index.h("div", { key: '9226593291fc8c8b5c1d3a9dc58882d960e2d563', class: "duet-number-container" }, index.h("duet-input", { key: '3946db15d60ce52debcd986b4606d617e263a1b3', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, index.h("slot", { key: 'c61230be816c479bfe6b18c45f822888c5aa4e70', name: "tooltip" }), index.h("div", { key: '11440983439e723525666d658db5f4b5ac39980c', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, index.h("button", { key: '17ae7a71c8ad6e3d8cb662fb00612abf80c1af77', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, index.h("duet-visually-hidden", { key: 'f8a8a0a2f886746f73f3bd92a6e6936fd0703cea' }, this.accessibleSubtract, " ", this.step), index.h("duet-icon", { key: 'fdc8f88ae3a53fa28c1a35d6eea40abdc16059b1', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), index.h("button", { key: 'bffe46f71c030e615ffab560100c58ab432ab473', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, index.h("duet-visually-hidden", { key: '836ff349ced5ca5fa0c4559ca429c90603e53ed2' }, this.accessibleAdd, " ", this.step), index.h("duet-icon", { key: '4468b28ee8bdefaf4b7a02db3996efca23c5870c', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (index.h("duet-visually-hidden", { key: '9a0005f7f8713f9dfc54297f2fc5ee4948b7e0c3', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     get element() { return index.getElement(this); }
 };
-DuetNumberInput.style = DuetNumberInputStyle0;
+DuetNumberInput.style = duetNumberInputCss;
 
 exports.duet_number_input = DuetNumberInput;

package/lib/cjs/duet-overlay.cjs.entry.js

@@ -3,31 +3,52 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CKsfMbRW.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.js');
 
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-
-const duetOverlayCss = ".duet-overlay{position:fixed;top:0;left:0;display:block;width:100%;height:100%;visibility:visible;background:rgb(8, 42, 77);opacity:0.3}.duet-overlay.duet-theme-turva{background:rgb(23, 28, 58)}.duet-overlay.keep-stacking-context{position:absolute;top:unset;left:unset;z-index:unset !important}.duet-overlay.modal-overlay{z-index:-1}.duet-overlay.hidden{visibility:hidden;opacity:0}.duet-overlay.dark{opacity:0.85}.duet-overlay.white{background:rgb(255, 255, 255);opacity:0.9}.duet-overlay.white.duet-theme-turva{background:rgb(255, 255, 255)}.duet-overlay.display-x-small{display:none}@media (max-width: 35.9375em){.duet-overlay.display-x-small{display:block}}.duet-overlay.display-x-small.not{display:block}@media (max-width: 35.9375em){.duet-overlay.display-x-small.not{display:none}}.duet-overlay.display-small{display:none}@media (min-width: 36em){.duet-overlay.display-small{display:block}}.duet-overlay.display-small.not{display:block}@media (min-width: 36em){.duet-overlay.display-small.not{display:none}}.duet-overlay.display-medium{display:none}@media (min-width: 48em){.duet-overlay.display-medium{display:block}}.duet-overlay.display-medium.not{display:block}@media (min-width: 48em){.duet-overlay.display-medium.not{display:none}}.duet-overlay.display-large{display:none}@media (min-width: 62em){.duet-overlay.display-large{display:block}}.duet-overlay.display-large.not{display:block}@media (min-width: 62em){.duet-overlay.display-large.not{display:none}}.duet-overlay.transition-slowly{transition:600ms ease}.duet-overlay.transition-quickly{transition:300ms ease}";
-const DuetOverlayStyle0 = duetOverlayCss;
+const duetOverlayCss = ".duet-overlay{position:fixed;top:0;left:0;display:block;visibility:visible;width:100%;height:100%;background:rgb(8, 42, 77);opacity:0.3}.duet-overlay.duet-theme-turva{background:rgb(23, 28, 58)}.duet-overlay.keep-stacking-context{position:absolute;top:unset;left:unset;z-index:unset !important}.duet-overlay.modal-overlay{z-index:-1}.duet-overlay.hidden{visibility:hidden;opacity:0}.duet-overlay.dark{opacity:0.85}.duet-overlay.white{background:rgb(255, 255, 255);opacity:0.9}.duet-overlay.white.duet-theme-turva{background:rgb(255, 255, 255)}.duet-overlay.display-x-small{display:none}@media (max-width: 35.9375em){.duet-overlay.display-x-small{display:block}}.duet-overlay.display-x-small.not{display:block}@media (max-width: 35.9375em){.duet-overlay.display-x-small.not{display:none}}.duet-overlay.display-small{display:none}@media (min-width: 36em){.duet-overlay.display-small{display:block}}.duet-overlay.display-small.not{display:block}@media (min-width: 36em){.duet-overlay.display-small.not{display:none}}.duet-overlay.display-medium{display:none}@media (min-width: 48em){.duet-overlay.display-medium{display:block}}.duet-overlay.display-medium.not{display:block}@media (min-width: 48em){.duet-overlay.display-medium.not{display:none}}.duet-overlay.display-large{display:none}@media (min-width: 62em){.duet-overlay.display-large{display:block}}.duet-overlay.display-large.not{display:block}@media (min-width: 62em){.duet-overlay.display-large.not{display:none}}.duet-overlay.transition-slowly{transition:600ms ease}.duet-overlay.transition-quickly{transition:300ms ease}:host(.duet-theme-turva2) .duet-overlay.duet-theme-turva{background:rgb(23, 42, 59)}";
 
 const DuetOverlay = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.getDisplayBreakpoint = () => {
-            if (this.displayDevice.startsWith("not")) {
-                return this.displayDevice.substring(this.displayDevice.indexOf("-") + 1);
-            }
-            return this.displayDevice;
-        };
+        /**
+         * Open
+         */
         this.visible = true;
+        /**
+         * Keep stacking context
+         */
         this.keepStackingContext = false;
+        /**
+         * Modal overlay
+         */
         this.modalOverlay = false;
+        /**
+         * Theme
+         */
         this.theme = "";
+        /**
+         * Mode
+         */
         this.displayDevice = "all";
+        /**
+         * Transition
+         */
         this.transition = "slowly";
+        /**
+         * Z-index
+         */
         this.zIndex = "400";
+        /**
+         * Variation, dark and white can be used when we want to have text on the overlay
+         */
         this.variation = "default";
+        this.getDisplayBreakpoint = () => {
+            if (this.displayDevice.startsWith("not")) {
+                return this.displayDevice.substring(this.displayDevice.indexOf("-") + 1);
+            }
+            return this.displayDevice;
+        };
     }
     /**
      * Component lifecycle events.
@@ -40,7 +61,7 @@ const DuetOverlay = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: 'd8f034b2c2abc3f7adc006ba65c93afe843bdb2b', "aria-hidden": "true" }, index.h("div", { key: '25c36326e9753e221143c4fbcb502ed37e31a2d2', style: { zIndex: this.zIndex }, class: {
+        return (index.h(index.Host, { key: '26baa0d4cb1ad61e8428e4cd0e3b244df2ac1a05', "aria-hidden": "true" }, index.h("div", { key: '37b1a25497fdde38c5102fa3deac28f2fbde193b', style: { zIndex: this.zIndex }, class: {
                 "duet-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "keep-stacking-context": this.keepStackingContext,
@@ -54,7 +75,8 @@ const DuetOverlay = class {
                 [this.variation]: true,
             } })));
     }
+    get element() { return index.getElement(this); }
 };
-DuetOverlay.style = DuetOverlayStyle0;
+DuetOverlay.style = duetOverlayCss;
 
 exports.duet_overlay = DuetOverlay;

package/lib/cjs/duet-page-heading.cjs.entry.js

@@ -3,22 +3,27 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CKsfMbRW.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.js');
 
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-
-const duetPageHeadingCss = "*,*::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;display:block;width:100%}.duet-page-heading{position:relative;display:block;width:100%;margin:0 auto;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\";color:rgb(8, 42, 77)}.duet-page-heading.duet-p-0{padding:0 !important}.duet-page-heading.duet-m-0{margin:0 !important}.duet-page-heading.auto{overflow:visible}.duet-page-heading.auto .heading,.duet-page-heading.auto .background{max-width:none}.duet-page-heading.fluid,.duet-page-heading.narrow{padding:0 16px}@media (min-width: 36em){.duet-page-heading.fluid{padding:0 28px}}@media (min-width: 62em){.duet-page-heading.fluid{padding:0 56px}}@media (min-width: 76.25em){.duet-page-heading.fluid{max-width:1110px;padding:0}}.duet-page-heading.narrow{max-width:888px}@media (min-width: 36em){.duet-page-heading.narrow{padding:0 48px}}@media (min-width: 48em){.duet-page-heading.narrow{padding:0 72px}}.duet-page-heading .heading{max-width:744px;padding:48px 90px 16px 0}@media (min-width: 48em){.duet-page-heading .heading{padding:72px 150px 40px 0}}.duet-page-heading:not(.has-icon) .heading{padding-right:0}.duet-page-heading .background{position:absolute;top:0;right:0;left:0;width:100%;max-width:744px;height:104px;margin:0 auto;margin:0 auto}@media (min-width: 48em){.duet-page-heading .background{height:165px}}.duet-page-heading .background .background-mask{position:absolute;top:-20px;right:0;display:block;width:286px;height:331px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIxIiBoZWlnaHQ9IjI1NyIgdmlld0JveD0iMCAwIDcyMSAyNTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8yODIwXzY5OTkxKSI+CjxwYXRoIGQ9Ik04MC4xNzA1IDIzLjE4MTVDOTEuOTY5OSAxOC44NjU5IDEwMi44NyAxMS42NTU5IDExMi45MDkgMS41NjQ0OEMxMjMuNzcgLTguMzA1MjcgMTM0LjM4MiAtMTguMjAxMSAxNDQuODI2IC0yOC4xODgyQzE1NS4yNDMgLTM4LjE2MjIgMTY1LjkwOCAtNDguMDg0MSAxNzYuNzQzIC01Ny45Mjc4QzE3OC44MTYgLTU5LjA0OSAxODAuNDk4IC02MC4yODc3IDE4MS43ODggLTYxLjY1NjdDMTgzLjA2NiAtNjMuMDEyNiAxODUuNDY1IC02Mi4yODI1IDE4OS4wMTIgLTU5LjQ3OTNDMTg0LjczNSAtNTEuMTM1IDE4MC43NTkgLTQyLjk2MDIgMTc3LjAxNyAtMzQuOTAyN0MxNzMuMjg4IC0yNi44NDUyIDE2Ny42ODEgLTE5LjEyNjggMTYwLjIxMSAtMTEuNzYwM0MxNTIuNzUzIC00LjM4MDgzIDE0NC45NTYgMy4zMTE1MiAxMzYuODQ3IDExLjM2OUMxMjguNzI0IDE5LjQyNjUgMTIwLjk2NiAyNy4xNDUgMTEzLjQ4MyAzNC40OTg0Qzk3LjQ5OCA0OS44MTggNzkuNjYyIDU2LjAyNDEgNjAuMDAwOCA1My4xNjg4QzQwLjI4NzQgNTAuMzEzNSAyNS41NDE0IDM5LjA3NDcgMTUuNjk3NyAxOS40Nzg2QzMuOTI0NDUgLTIuMzcyOTkgLTEuMjI1NTUgLTI0LjQ3MjQgMC4yNDc3NDMgLTQ2Ljc4MDNDMS4yNTE2NyAtNjcuNDg0NiAzLjQwMjkzIC04Ny43OTc4IDYuODA1ODQgLTEwNy43NzJDMTAuMTk1NyAtMTI3LjczMyAxNS43MTA4IC0xNDcuNDg2IDIzLjMzOCAtMTY3LjA0M0MyNi4zMTA3IC0xNzQuMDMxIDI5LjAwOTUgLTE4MC44NSAzMS40NzM3IC0xODcuNTY0QzMzLjkxMTggLTE5NC4yMjcgMzYuNTMyNCAtMjAwLjY2OCAzOS4yNTc0IC0yMDYuODQ4QzQxLjgxMjggLTIwOS41NzIgNDMuNDY4NiAtMjEyLjEyOCA0NC4xODU3IC0yMTQuNTRDNTMuMDI1NSAtMjI5LjM3NyA2Mi44MyAtMjM3Ljk5NSA3My42Mzg1IC0yNDAuNDMzQzg0LjM5NDggLTI0Mi44NzEgOTguMTM2OSAtMjM5LjgyMSAxMTQuODEyIC0yMzEuMzJDMTI3Ljk0MiAtMjI1LjYwOSAxMzMuMzkyIC0yMTYuMTA1IDEzMS4xNDkgLTIwMi43OTNDMTMwLjE3MSAtMTkwLjgzNyAxMjcuOTk0IC0xNzkuMjU5IDEyNC42MTcgLTE2OC4wMkMxMjAuMDQxIC0xNTIuNzc5IDExNS40MzggLTEzNy41NTEgMTEwLjg0OSAtMTIyLjMyMkMxMDYuMjczIC0xMDcuMDgxIDEwMS4yNzkgLTkxLjk2OTkgOTUuODk0MyAtNzcuMDAyM0M4NS41OTQzIC00OC42MDU3IDc5LjQyNzQgLTE5LjQyNjcgNzcuNDA2NSAxMC41NjA2Qzc3LjcxOTQgMTIuNDEyIDc4LjA0NTMgMTQuMjYzNSA3OC4zNTgzIDE2LjA4ODhDNzguNjcxMiAxNy45NDAyIDc5LjI3MDkgMjAuMyA4MC4xNzA1IDIzLjE5NDRNMTEwLjkxNCAtMjk2Ljc1N0MxMDkuNTQ1IC0yOTguMDM1IDEwNy4zMTYgLTI5OS4zNTIgMTA0LjIzOSAtMzAwLjczNEMxMDEuMTYyIC0zMDIuMDkgOTguMjQxMiAtMzA0LjA1OSA5NS41NDIzIC0zMDYuNjI3QzkwLjA3OTQgLTMxMS43NzcgODYuOTc2MyAtMzE4LjE2NiA4Ni4yMzMyIC0zMjUuODE5Qzg1LjQ2NCAtMzMzLjQ3MiA4Ny4zODA1IC0zNDAuNTUyIDkxLjk2OTkgLTM0Ny4wNThDOTMuMjIxNSAtMzQ4LjQxNCA5NC4xNDcyIC0zNDkuMjM1IDk0LjY4MTggLTM0OS41MjJDOTUuMTkwMyAtMzQ5Ljc5NiA5Ni4xMDI5IC0zNTAuNjA0IDk3LjM5MzcgLTM1MS45OTlDMTA5LjY3NSAtMzU3LjkwNiAxMjIuNDE0IC0zNTYuNjkzIDEzNS42MzQgLTM0OC4zMzZDMTQ2Ljk1MSAtMzQyLjMyNSAxNTIuMDg4IC0zMzMuMzE2IDE1MS4xMzYgLTMyMS4zNkwxNDguMjI5IC0zMTEuNzM4QzE0NC42NjkgLTI5Ny4wNyAxMzUuNTY5IC0yOTEuNTAzIDEyMC45MTQgLTI5NS4wNjJDMTE5LjA1IC0yOTQuNzIzIDExNS43MzggLTI5NS4yOTcgMTEwLjkxNCAtMjk2Ljc0NCIgZmlsbD0iI0Y1RjVGNyIvPgo8cGF0aCBkPSJNMjQyLjc2NyAyMTUuNTE4QzI0NS4wODggMjEzLjU4OCAyNDcuMjc4IDIxMi4xMDIgMjQ5LjM3NyAyMTAuOTY4QzI1MS40NSAyMDkuODU5IDI1My41MzYgMjA4Ljc1MSAyNTUuNjIyIDIwNy42MDRDMjc0LjIyNyAxOTIuMjg0IDI5MC41NzcgMTc3LjE2IDMwNC43MjMgMTYyLjE5M0MzMTUuNjg4IDE0OC45NDYgMzI2LjYxNCAxMzUuODU2IDMzNy40ODggMTIyLjk4N0MzNDguMzYxIDExMC4xMTkgMzU4Ljg4MyA5Ni45Mzc1IDM2OS4wNjYgODMuNDE3MUMzNzYuNDQ1IDczLjQzMDEgMzg0LjU4MSA2My44NjAyIDM5My40NDcgNTQuNzQ2NkM0MDIuMyA0NS42NDYxIDQxMC44MjYgMzYuMjMyNyA0MTkuMDAxIDI2LjQ4MDNDNDIxLjgwNCAyMi45NzMxIDQyNC4yMjkgMjAuMDAwNCA0MjYuMjg5IDE3LjU0OTNDNDI4LjMyMyAxNS4xMjQzIDQzMC41MDEgMTIuOTMzOCA0MzIuODM1IDExLjAxNzNDNDM0LjkwOCA5LjkwOTA2IDQzNi43NDYgOS41ODMwMSA0MzguMzYzIDEwLjA2NTRDNDM5Ljk1MyAxMC41NDc5IDQ0MS43OTIgMTAuMjQ4IDQ0My45MDQgOS4xMTM3MUM0NDMuMTg3IDExLjUxMjcgNDQyLjgyMiAxMy4zOTAzIDQ0Mi44ODcgMTQuNjk0QzQ0Mi45MjYgMTYuMDIzOSA0NDIuMjg3IDE3LjM2NjggNDQxLjAwOSAxOC43MjI3QzQyNC42NDcgNDYuOTYzIDQwNy42ODQgNzIuODE3MyAzOTAuMTIyIDk2LjMxMTdDMzc2LjY0MSAxMTQuOTU2IDM2My4xNDcgMTMyLjkwOSAzNDkuNjM5IDE1MC4yMjRDMzM2LjEwNiAxNjcuNTI1IDMyMi4yMiAxODUuMzYxIDMwNy45NDQgMjAzLjc1OEMzMDEuNTI5IDIxMC41MzcgMjk1LjM4OCAyMTcuMiAyODkuNDk1IDIyMy43MTlDMjgzLjU4OSAyMzAuMjI1IDI3Ny40MzUgMjM2LjkgMjcxLjAyIDI0My42NjdDMjU4LjkyMSAyNTQuODggMjQ0LjQ4OCAyNTkuMjM0IDIyNy43MzQgMjU2Ljc5NkMxOTYuODYgMjUxLjg4MSAxNzYuMDI1IDIzNi44NzQgMTY1LjIxNyAyMTEuNzg5QzE1NC42OTUgMTg4LjU2OCAxNDkuNTMyIDE2Ni41MDggMTQ5LjcwMiAxNDUuNjA4QzE0Ny45NDIgMTEzLjY3OCAxNDguMzA3IDgxLjk0MzggMTUwLjgxIDUwLjQxOEMxNTMuMyAxOC44NzkyIDE1OC4zMiAtMTIuMzIwNyAxNjUuODY5IC00My4yMDc3QzE4MC4xNzIgLTEwNS4yMDMgMTk4LjU2OCAtMTY2LjQwMyAyMjEuMTExIC0yMjYuODA4QzIzMi4wODkgLTI1Ny41MjYgMjQ0LjQyMyAtMjg3LjYxOCAyNTguMSAtMzE3LjA5NkMyNzEuNzc2IC0zNDYuNTc1IDI4Ni4zNzkgLTM3NS41MDcgMzAxLjk3MiAtNDA0LjAwOEMzMTIuOTUgLTQyNS45OSAzMjQuNjMyIC00NDcuMzQ2IDMzNi45NzkgLTQ2OC4wNjNDMzQ5LjMxMyAtNDg4Ljc1NCAzNjIuNDk1IC01MDkuMjI0IDM3Ni40MzIgLTUyOS40NTlDNDAzLjg2NCAtNTY4LjI5OSA0MzQuMTkgLTYwMy42NzEgNDY3LjM5OCAtNjM1LjU3NUM0NzUuNjM4IC02NDIuNjgxIDQ4My45OTUgLTY0OS4zMTcgNDkyLjQwNSAtNjU1LjUxQzUwMC44MjggLTY2MS42NzcgNTEwLjM5NyAtNjY2LjY1OCA1MjEuMTU0IC02NzAuMzk5QzU0NS4yNzQgLTY3Ny45NjEgNTY3LjcxMiAtNjc2Ljg3OSA1ODguMzkxIC02NjcuMTY2QzYwNC43MjcgLTY2MC40NzggNjEzLjY3MSAtNjQ5LjUxMyA2MTUuMjEgLTYzNC4yMTlDNjE3LjU5NiAtNjI0Ljc1NCA2MTguMTk1IC02MTMuNjcxIDYxNi45ODMgLTYwMC45NTlDNjEwLjMyIC01NTguNDgxIDU5Ny44NTYgLTUxNS41MzQgNTc5LjU1MSAtNDcyLjE5NkM1NjUuNDMxIC00MzkuODIzIDU0OS4wODEgLTQwOC43NTMgNTMwLjUyOCAtMzc5LjAwMUM1MTEuOTM2IC0zNDkuMjYxIDQ5Mi42MTQgLTMxOS45NTIgNDcyLjYgLTI5MS4wOTlDNDY1LjQ1NiAtMjgxLjkyIDQ1Ny45NDYgLTI3MS41MDMgNDUwLjEyMyAtMjU5LjkxMkM0MzMuNTc4IC0yMzYuOTc4IDQxNS42MzcgLTIxNS4xMjYgMzk2LjI4OSAtMTk0LjM1N0MzNzYuOTAyIC0xNzMuNTYxIDM1NS44NDUgLTE1NC4zOTYgMzMzLjA2OCAtMTM2LjgyQzMyMC4zODIgLTEyNi42OSAzMTIuNTMzIC0xMTUuMDg2IDMwOS40ODIgLTEwMi4wNDhDMzA0LjE4OSAtODQuNDQ2OCAyOTguOTc0IC02Ny4wNDExIDI5My43OTggLTQ5Ljg0NEMyODguNjIxIC0zMi42NDY5IDI4My43NzEgLTE1LjExMDggMjc5LjI4NiAyLjcxMjFDMjc1LjI3MSAxOC45NzA1IDI3MS4zMDcgMzQuOTgxIDI2Ny40MjIgNTAuODM1MkMyNjMuNTIzIDY2LjY2MzMgMjU5Ljk2NCA4Mi44NDM0IDI1Ni43NyA5OS4zMzY1QzI1My41NDkgMTE1LjgwMyAyNTAuNjgxIDEzMi42MjIgMjQ4LjE1MiAxNDkuNzQxQzI0NS42MDkgMTY2Ljg2IDI0My4xMzIgMTgzLjc5NyAyNDAuNzQ2IDIwMC40OThDMjQxLjA0NiAyMDIuMzM3IDI0MS4zMDcgMjA0LjM5NiAyNDEuNTE1IDIwNi42MTNDMjQxLjY5OCAyMDguODY4IDI0Mi4xMjggMjExLjg0MSAyNDIuNzggMjE1LjUxOE01NjQuMzIyIC02MjIuMDgxQzU2MS43MjggLTYxOS4zNDMgNTU4LjExNiAtNjE2LjA4MyA1NTMuNDg4IC02MTIuMjM3QzU0Mi4yMzYgLTU5OC4xNjkgNTMwLjk1OCAtNTgzLjkwNiA1MTkuNjI4IC01NjkuNDU5QzUwOC4yNTkgLTU1NC45ODcgNDk4LjA1IC01MzkuOTQxIDQ4OS4wMTUgLTUyNC4zNzRDNDU5LjIzNiAtNDc0Ljg2OSA0MzIuNzY5IC00MjMuOTU2IDQwOS42MDEgLTM3MS42MDhDMzg2LjQxOSAtMzE5LjI0OCAzNjUuMTkzIC0yNjUuNDQgMzQ1LjkzNiAtMjEwLjE3MkMzNDUuNzAyIC0yMDkuMzc3IDM0NS43MDIgLTIwOC43MTIgMzQ2LjAxNSAtMjA4LjE5QzM0Ni4yNjIgLTIwNy42NTYgMzQ2LjE4NCAtMjA2LjU4NyAzNDUuNzE1IC0yMDUuMDA5QzM0OS4zNzggLTIwNS42MjIgMzUxLjM2IC0yMDYuMzM5IDM1MS42MDggLTIwNy4xNDdDMzU1LjQ2NyAtMjExLjIxNSAzNTkuNTA5IC0yMTUuMjMxIDM2My43NDYgLTIxOS4xOTRDMzY3Ljk5NyAtMjIzLjE0NSAzNzEuNzY1IC0yMjcuNjgyIDM3NS4wNzYgLTIzMi44MTlDNDAyLjg4NiAtMjY3LjE2MSA0MjguNzE0IC0zMDIuMTQyIDQ1Mi41MzUgLTMzNy43MzZDNDc2LjM2OCAtMzczLjMwMyA0OTguNTMzIC00MTAuNjk2IDUxOS4wNjggLTQ0OS44ODhDNTQzLjg1MyAtNDk3LjM3MiA1NTkuNTc3IC01NDYuNzM0IDU2Ni4yNTIgLTU5Ny45MzRDNTY2LjY0MyAtNjAyLjE4NSA1NjYuOTE3IC02MDYuMDE4IDU2Ny4xIC02MDkuNDZDNTY3LjI0MyAtNjEyLjkwMiA1NjYuMzE3IC02MTcuMSA1NjQuMzM2IC02MjIuMDgxIiBmaWxsPSIjRjVGNUY3Ii8+CjxwYXRoIGQ9Ik02OTYuNTE1IDE4OS4wNjRDNzA0LjYzOCAxODQuMzk2IDcxMi42ODIgMTc5LjYxMSA3MjAuNjg4IDE3NC43MzVWMTM0LjA1N0M2OTcuODE5IDE0OC41MDMgNjczLjgwMyAxNTkuNjM3IDY0OC42MDEgMTY3LjQyMUM2MjIuMDgyIDE3NS42MzUgNTk0LjU1OCAxODAuNjY3IDU2Ni4wMTggMTgyLjU1OEM1NTAuOTIgMTgzLjI2MiA1NDEuMjk4IDE4MS44OTMgNTM3LjEgMTc4LjQzOEM1MzIuODc2IDE3NS4wMDkgNTI5LjA5NSAxNjUuNzUyIDUyNS43NTcgMTUwLjc0NUw1MjMuOTU4IDEzMC41NDlDNTIzLjMzMiAxMTguMTI0IDUyNC43NjYgMTA2Ljc1NSA1MjguMzM5IDk2LjQyODlDNTMxLjg1OSA4Ni4xNTUgNTM2LjEyMiA3NS42MjAzIDU0MS4xMTYgNjQuODc3QzU0NS42MTQgNjQuNDg1OSA1NDkuNTY0IDY0LjM2ODUgNTUzLjAzMiA2NC41MzhDNTU2LjQ3NSA2NC42OTQ1IDU2MC40MzggNjQuNTc3MSA1NjQuOTQ5IDY0LjE3MjlDNTg1Ljg3NSA2NC4zNjg1IDYwNy42MzYgNjEuNzQ3OSA2MzAuMjY5IDU2LjI4NDlDNjUyLjA4MiA1MC42MjY1IDY3MC40IDQxLjI3ODIgNjg1LjI3NyAyOC4yNTMzQzY5NC45MzggMTkuNzc4NiA3MDQuMDI1IDEwLjM3ODMgNzEyLjU2NSAwLjA5MTMwODZINjM5LjUyNkM2MjAuMjU2IDE2Ljk4ODUgNTk2Ljk0NCAyNy40ODQxIDU2OS41MzkgMzEuNDYwN0M1NjcuNjYxIDMxLjc3MzYgNTY2LjM1NyAzMS44MTI3IDU2NS41NzUgMzEuNTY1QzU2NC43NTQgMzEuMzMwMyA1NjMuODI4IDMxLjUxMjggNTYyLjgxMSAzMi4wNDc0QzU2MS45OSAzMS44MTI3IDU2MS42NTEgMzEuNDk5OCA1NjEuNzgxIDMxLjA4MjZDNTYxLjg5OCAzMC42OTE1IDU2MS41NDYgMzAuMzY1NSA1NjAuNzUxIDMwLjEzMDhDNTYwLjk5OSAyOS4zMzU1IDU2MC45MDcgMjguODY2MSA1NjAuNTE2IDI4Ljc2MThDNTYwLjA5OSAyOC42MTg0IDU2MC4wMzQgMjguMTYyIDU2MC4yOTUgMjcuMzUzN0M1NjUuMzc5IDE4LjE3NDkgNTcwLjc3NyA5LjEwMDU1IDU3Ni40MzYgMC4wOTEzMDg2SDQzMC4xNzZDNDI0LjIwNCAxMi42NzMgNDE5LjA1NCAyNS45NDU2IDQxNC44MyAzOS45ODc1QzQwNi40NzMgNjEuOTU2NSA0MDQuMjgyIDgyLjI2OTcgNDA4LjI4NSAxMDAuOTY2QzQxMi4wMTQgMTIwLjQ1OCA0MTguODMzIDEzOC40NjMgNDI4LjcyOCAxNTQuOTgyQzQzOC42MTEgMTcxLjUyOCA0NTIuNDU4IDE4NS4wODcgNDcwLjI1NCAxOTUuN0M0OTAuNzM3IDIwOC44ODEgNTEyLjE0NSAyMTcuNzIxIDUzNC40MDEgMjIyLjI0NUM1NTYuNjQ0IDIyNi43NTcgNTc5Ljg2NSAyMjYuNTA5IDYwNC4xMTUgMjIxLjU2N0M2MDkuNjQzIDIyMC42MTYgNjE1LjI2MyAyMTkuNDY4IDYyMC45MjEgMjE4LjA5OUM2MjYuNTY3IDIxNi43NTYgNjMyLjI3NyAyMTUuMTkyIDYzOC4wNTMgMjEzLjQxOUM2NTkuMDU3IDIwNy41MjUgNjc4LjU2MiAxOTkuMzkgNjk2LjU0MSAxODkuMDc3IiBmaWxsPSIjRjVGNUY3Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjgyMF82OTk5MSI+CjxyZWN0IHdpZHRoPSI3MjEiIGhlaWdodD0iMjU2Ljg0OCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K\");background-repeat:no-repeat;background-size:contain}@media (min-width: 48em){.duet-page-heading .background .background-mask{top:-40px;width:502px;height:577px}}.duet-page-heading .background .brand-shape{position:absolute;top:-157px;right:-20px;width:185px;height:185px;background:rgb(0, 119, 179);border-radius:20%;mix-blend-mode:normal;opacity:0.2;transform:rotate(7deg)}@media (min-width: 48em){.duet-page-heading .background .brand-shape{top:-280px;right:-40px;width:325px;height:325px}}.duet-page-heading .background .brand-shape.second-shape{top:-182px;right:100px;width:207px;height:207px;background:rgb(11, 114, 136);opacity:0.1}@media (min-width: 48em){.duet-page-heading .background .brand-shape.second-shape{top:-325px;right:200px;width:365px;height:365px}}.duet-page-heading .background .brand-shaped-icon{position:absolute;top:20px;right:16px;display:flex;align-items:center;justify-content:center;width:85px;width:60px;height:85px;height:60px;background:rgba(0, 119, 179, 0.75);border-radius:25%;mix-blend-mode:normal;transform:rotate(7deg)}@media (min-width: 48em){.duet-page-heading .background .brand-shaped-icon{right:36px;width:93px;height:93px}}.duet-page-heading .background .brand-shaped-icon duet-icon{width:60px;height:60px;transform:rotate(-7deg)}@media (min-width: 48em){.duet-page-heading .background .brand-shaped-icon duet-icon{width:75px;height:75px}}.duet-page-heading.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(8, 42, 77)}.duet-page-heading.duet-theme-turva .brand-shaped-icon{background:rgba(198, 12, 48, 0.9);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}.duet-page-heading.duet-theme-turva .brand-shaped-icon duet-icon{position:relative;top:-3px}.duet-page-heading .progress-indicator{display:flex;flex-direction:row;gap:4px}.duet-page-heading .progress-step{width:100%;height:4px;background-color:rgb(181, 198, 208);border-radius:2px}.duet-page-heading .progress-step.active{background-color:rgb(0, 119, 179)}";
-const DuetPageHeadingStyle0 = duetPageHeadingCss;
+const duetPageHeadingCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;display:block;width:100%}.duet-page-heading{position:relative;display:block;width:100%;margin:0 auto;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\";color:rgb(8, 42, 77)}.duet-page-heading.duet-p-0{padding:0 !important}.duet-page-heading.duet-m-0{margin:0 !important}.duet-page-heading.auto{overflow:visible}.duet-page-heading.auto .heading,.duet-page-heading.auto .background{max-width:none}.duet-page-heading.fluid,.duet-page-heading.narrow{padding:0 16px}@media (min-width: 36em){.duet-page-heading.fluid{padding:0 28px}}@media (min-width: 62em){.duet-page-heading.fluid{padding:0 56px}}@media (min-width: 76.25em){.duet-page-heading.fluid{max-width:1110px;padding:0}}.duet-page-heading.narrow{max-width:888px}@media (min-width: 36em){.duet-page-heading.narrow{padding:0 48px}}@media (min-width: 48em){.duet-page-heading.narrow{padding:0 72px}}.duet-page-heading .heading{max-width:744px;padding:48px 90px 16px 0}@media (min-width: 48em){.duet-page-heading .heading{padding:72px 150px 40px 0}}.duet-page-heading:not(.has-icon) .heading{padding-right:0}.duet-page-heading .background{position:absolute;top:0;right:0;left:0;width:100%;max-width:744px;height:104px;margin:0 auto;margin:0 auto}@media (min-width: 48em){.duet-page-heading .background{height:165px}}.duet-page-heading .background .background-mask{position:absolute;top:-20px;right:0;display:block;width:286px;height:331px;pointer-events:none;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIxIiBoZWlnaHQ9IjI1NyIgdmlld0JveD0iMCAwIDcyMSAyNTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8yODIwXzY5OTkxKSI+CjxwYXRoIGQ9Ik04MC4xNzA1IDIzLjE4MTVDOTEuOTY5OSAxOC44NjU5IDEwMi44NyAxMS42NTU5IDExMi45MDkgMS41NjQ0OEMxMjMuNzcgLTguMzA1MjcgMTM0LjM4MiAtMTguMjAxMSAxNDQuODI2IC0yOC4xODgyQzE1NS4yNDMgLTM4LjE2MjIgMTY1LjkwOCAtNDguMDg0MSAxNzYuNzQzIC01Ny45Mjc4QzE3OC44MTYgLTU5LjA0OSAxODAuNDk4IC02MC4yODc3IDE4MS43ODggLTYxLjY1NjdDMTgzLjA2NiAtNjMuMDEyNiAxODUuNDY1IC02Mi4yODI1IDE4OS4wMTIgLTU5LjQ3OTNDMTg0LjczNSAtNTEuMTM1IDE4MC43NTkgLTQyLjk2MDIgMTc3LjAxNyAtMzQuOTAyN0MxNzMuMjg4IC0yNi44NDUyIDE2Ny42ODEgLTE5LjEyNjggMTYwLjIxMSAtMTEuNzYwM0MxNTIuNzUzIC00LjM4MDgzIDE0NC45NTYgMy4zMTE1MiAxMzYuODQ3IDExLjM2OUMxMjguNzI0IDE5LjQyNjUgMTIwLjk2NiAyNy4xNDUgMTEzLjQ4MyAzNC40OTg0Qzk3LjQ5OCA0OS44MTggNzkuNjYyIDU2LjAyNDEgNjAuMDAwOCA1My4xNjg4QzQwLjI4NzQgNTAuMzEzNSAyNS41NDE0IDM5LjA3NDcgMTUuNjk3NyAxOS40Nzg2QzMuOTI0NDUgLTIuMzcyOTkgLTEuMjI1NTUgLTI0LjQ3MjQgMC4yNDc3NDMgLTQ2Ljc4MDNDMS4yNTE2NyAtNjcuNDg0NiAzLjQwMjkzIC04Ny43OTc4IDYuODA1ODQgLTEwNy43NzJDMTAuMTk1NyAtMTI3LjczMyAxNS43MTA4IC0xNDcuNDg2IDIzLjMzOCAtMTY3LjA0M0MyNi4zMTA3IC0xNzQuMDMxIDI5LjAwOTUgLTE4MC44NSAzMS40NzM3IC0xODcuNTY0QzMzLjkxMTggLTE5NC4yMjcgMzYuNTMyNCAtMjAwLjY2OCAzOS4yNTc0IC0yMDYuODQ4QzQxLjgxMjggLTIwOS41NzIgNDMuNDY4NiAtMjEyLjEyOCA0NC4xODU3IC0yMTQuNTRDNTMuMDI1NSAtMjI5LjM3NyA2Mi44MyAtMjM3Ljk5NSA3My42Mzg1IC0yNDAuNDMzQzg0LjM5NDggLTI0Mi44NzEgOTguMTM2OSAtMjM5LjgyMSAxMTQuODEyIC0yMzEuMzJDMTI3Ljk0MiAtMjI1LjYwOSAxMzMuMzkyIC0yMTYuMTA1IDEzMS4xNDkgLTIwMi43OTNDMTMwLjE3MSAtMTkwLjgzNyAxMjcuOTk0IC0xNzkuMjU5IDEyNC42MTcgLTE2OC4wMkMxMjAuMDQxIC0xNTIuNzc5IDExNS40MzggLTEzNy41NTEgMTEwLjg0OSAtMTIyLjMyMkMxMDYuMjczIC0xMDcuMDgxIDEwMS4yNzkgLTkxLjk2OTkgOTUuODk0MyAtNzcuMDAyM0M4NS41OTQzIC00OC42MDU3IDc5LjQyNzQgLTE5LjQyNjcgNzcuNDA2NSAxMC41NjA2Qzc3LjcxOTQgMTIuNDEyIDc4LjA0NTMgMTQuMjYzNSA3OC4zNTgzIDE2LjA4ODhDNzguNjcxMiAxNy45NDAyIDc5LjI3MDkgMjAuMyA4MC4xNzA1IDIzLjE5NDRNMTEwLjkxNCAtMjk2Ljc1N0MxMDkuNTQ1IC0yOTguMDM1IDEwNy4zMTYgLTI5OS4zNTIgMTA0LjIzOSAtMzAwLjczNEMxMDEuMTYyIC0zMDIuMDkgOTguMjQxMiAtMzA0LjA1OSA5NS41NDIzIC0zMDYuNjI3QzkwLjA3OTQgLTMxMS43NzcgODYuOTc2MyAtMzE4LjE2NiA4Ni4yMzMyIC0zMjUuODE5Qzg1LjQ2NCAtMzMzLjQ3MiA4Ny4zODA1IC0zNDAuNTUyIDkxLjk2OTkgLTM0Ny4wNThDOTMuMjIxNSAtMzQ4LjQxNCA5NC4xNDcyIC0zNDkuMjM1IDk0LjY4MTggLTM0OS41MjJDOTUuMTkwMyAtMzQ5Ljc5NiA5Ni4xMDI5IC0zNTAuNjA0IDk3LjM5MzcgLTM1MS45OTlDMTA5LjY3NSAtMzU3LjkwNiAxMjIuNDE0IC0zNTYuNjkzIDEzNS42MzQgLTM0OC4zMzZDMTQ2Ljk1MSAtMzQyLjMyNSAxNTIuMDg4IC0zMzMuMzE2IDE1MS4xMzYgLTMyMS4zNkwxNDguMjI5IC0zMTEuNzM4QzE0NC42NjkgLTI5Ny4wNyAxMzUuNTY5IC0yOTEuNTAzIDEyMC45MTQgLTI5NS4wNjJDMTE5LjA1IC0yOTQuNzIzIDExNS43MzggLTI5NS4yOTcgMTEwLjkxNCAtMjk2Ljc0NCIgZmlsbD0iI0Y1RjVGNyIvPgo8cGF0aCBkPSJNMjQyLjc2NyAyMTUuNTE4QzI0NS4wODggMjEzLjU4OCAyNDcuMjc4IDIxMi4xMDIgMjQ5LjM3NyAyMTAuOTY4QzI1MS40NSAyMDkuODU5IDI1My41MzYgMjA4Ljc1MSAyNTUuNjIyIDIwNy42MDRDMjc0LjIyNyAxOTIuMjg0IDI5MC41NzcgMTc3LjE2IDMwNC43MjMgMTYyLjE5M0MzMTUuNjg4IDE0OC45NDYgMzI2LjYxNCAxMzUuODU2IDMzNy40ODggMTIyLjk4N0MzNDguMzYxIDExMC4xMTkgMzU4Ljg4MyA5Ni45Mzc1IDM2OS4wNjYgODMuNDE3MUMzNzYuNDQ1IDczLjQzMDEgMzg0LjU4MSA2My44NjAyIDM5My40NDcgNTQuNzQ2NkM0MDIuMyA0NS42NDYxIDQxMC44MjYgMzYuMjMyNyA0MTkuMDAxIDI2LjQ4MDNDNDIxLjgwNCAyMi45NzMxIDQyNC4yMjkgMjAuMDAwNCA0MjYuMjg5IDE3LjU0OTNDNDI4LjMyMyAxNS4xMjQzIDQzMC41MDEgMTIuOTMzOCA0MzIuODM1IDExLjAxNzNDNDM0LjkwOCA5LjkwOTA2IDQzNi43NDYgOS41ODMwMSA0MzguMzYzIDEwLjA2NTRDNDM5Ljk1MyAxMC41NDc5IDQ0MS43OTIgMTAuMjQ4IDQ0My45MDQgOS4xMTM3MUM0NDMuMTg3IDExLjUxMjcgNDQyLjgyMiAxMy4zOTAzIDQ0Mi44ODcgMTQuNjk0QzQ0Mi45MjYgMTYuMDIzOSA0NDIuMjg3IDE3LjM2NjggNDQxLjAwOSAxOC43MjI3QzQyNC42NDcgNDYuOTYzIDQwNy42ODQgNzIuODE3MyAzOTAuMTIyIDk2LjMxMTdDMzc2LjY0MSAxMTQuOTU2IDM2My4xNDcgMTMyLjkwOSAzNDkuNjM5IDE1MC4yMjRDMzM2LjEwNiAxNjcuNTI1IDMyMi4yMiAxODUuMzYxIDMwNy45NDQgMjAzLjc1OEMzMDEuNTI5IDIxMC41MzcgMjk1LjM4OCAyMTcuMiAyODkuNDk1IDIyMy43MTlDMjgzLjU4OSAyMzAuMjI1IDI3Ny40MzUgMjM2LjkgMjcxLjAyIDI0My42NjdDMjU4LjkyMSAyNTQuODggMjQ0LjQ4OCAyNTkuMjM0IDIyNy43MzQgMjU2Ljc5NkMxOTYuODYgMjUxLjg4MSAxNzYuMDI1IDIzNi44NzQgMTY1LjIxNyAyMTEuNzg5QzE1NC42OTUgMTg4LjU2OCAxNDkuNTMyIDE2Ni41MDggMTQ5LjcwMiAxNDUuNjA4QzE0Ny45NDIgMTEzLjY3OCAxNDguMzA3IDgxLjk0MzggMTUwLjgxIDUwLjQxOEMxNTMuMyAxOC44NzkyIDE1OC4zMiAtMTIuMzIwNyAxNjUuODY5IC00My4yMDc3QzE4MC4xNzIgLTEwNS4yMDMgMTk4LjU2OCAtMTY2LjQwMyAyMjEuMTExIC0yMjYuODA4QzIzMi4wODkgLTI1Ny41MjYgMjQ0LjQyMyAtMjg3LjYxOCAyNTguMSAtMzE3LjA5NkMyNzEuNzc2IC0zNDYuNTc1IDI4Ni4zNzkgLTM3NS41MDcgMzAxLjk3MiAtNDA0LjAwOEMzMTIuOTUgLTQyNS45OSAzMjQuNjMyIC00NDcuMzQ2IDMzNi45NzkgLTQ2OC4wNjNDMzQ5LjMxMyAtNDg4Ljc1NCAzNjIuNDk1IC01MDkuMjI0IDM3Ni40MzIgLTUyOS40NTlDNDAzLjg2NCAtNTY4LjI5OSA0MzQuMTkgLTYwMy42NzEgNDY3LjM5OCAtNjM1LjU3NUM0NzUuNjM4IC02NDIuNjgxIDQ4My45OTUgLTY0OS4zMTcgNDkyLjQwNSAtNjU1LjUxQzUwMC44MjggLTY2MS42NzcgNTEwLjM5NyAtNjY2LjY1OCA1MjEuMTU0IC02NzAuMzk5QzU0NS4yNzQgLTY3Ny45NjEgNTY3LjcxMiAtNjc2Ljg3OSA1ODguMzkxIC02NjcuMTY2QzYwNC43MjcgLTY2MC40NzggNjEzLjY3MSAtNjQ5LjUxMyA2MTUuMjEgLTYzNC4yMTlDNjE3LjU5NiAtNjI0Ljc1NCA2MTguMTk1IC02MTMuNjcxIDYxNi45ODMgLTYwMC45NTlDNjEwLjMyIC01NTguNDgxIDU5Ny44NTYgLTUxNS41MzQgNTc5LjU1MSAtNDcyLjE5NkM1NjUuNDMxIC00MzkuODIzIDU0OS4wODEgLTQwOC43NTMgNTMwLjUyOCAtMzc5LjAwMUM1MTEuOTM2IC0zNDkuMjYxIDQ5Mi42MTQgLTMxOS45NTIgNDcyLjYgLTI5MS4wOTlDNDY1LjQ1NiAtMjgxLjkyIDQ1Ny45NDYgLTI3MS41MDMgNDUwLjEyMyAtMjU5LjkxMkM0MzMuNTc4IC0yMzYuOTc4IDQxNS42MzcgLTIxNS4xMjYgMzk2LjI4OSAtMTk0LjM1N0MzNzYuOTAyIC0xNzMuNTYxIDM1NS44NDUgLTE1NC4zOTYgMzMzLjA2OCAtMTM2LjgyQzMyMC4zODIgLTEyNi42OSAzMTIuNTMzIC0xMTUuMDg2IDMwOS40ODIgLTEwMi4wNDhDMzA0LjE4OSAtODQuNDQ2OCAyOTguOTc0IC02Ny4wNDExIDI5My43OTggLTQ5Ljg0NEMyODguNjIxIC0zMi42NDY5IDI4My43NzEgLTE1LjExMDggMjc5LjI4NiAyLjcxMjFDMjc1LjI3MSAxOC45NzA1IDI3MS4zMDcgMzQuOTgxIDI2Ny40MjIgNTAuODM1MkMyNjMuNTIzIDY2LjY2MzMgMjU5Ljk2NCA4Mi44NDM0IDI1Ni43NyA5OS4zMzY1QzI1My41NDkgMTE1LjgwMyAyNTAuNjgxIDEzMi42MjIgMjQ4LjE1MiAxNDkuNzQxQzI0NS42MDkgMTY2Ljg2IDI0My4xMzIgMTgzLjc5NyAyNDAuNzQ2IDIwMC40OThDMjQxLjA0NiAyMDIuMzM3IDI0MS4zMDcgMjA0LjM5NiAyNDEuNTE1IDIwNi42MTNDMjQxLjY5OCAyMDguODY4IDI0Mi4xMjggMjExLjg0MSAyNDIuNzggMjE1LjUxOE01NjQuMzIyIC02MjIuMDgxQzU2MS43MjggLTYxOS4zNDMgNTU4LjExNiAtNjE2LjA4MyA1NTMuNDg4IC02MTIuMjM3QzU0Mi4yMzYgLTU5OC4xNjkgNTMwLjk1OCAtNTgzLjkwNiA1MTkuNjI4IC01NjkuNDU5QzUwOC4yNTkgLTU1NC45ODcgNDk4LjA1IC01MzkuOTQxIDQ4OS4wMTUgLTUyNC4zNzRDNDU5LjIzNiAtNDc0Ljg2OSA0MzIuNzY5IC00MjMuOTU2IDQwOS42MDEgLTM3MS42MDhDMzg2LjQxOSAtMzE5LjI0OCAzNjUuMTkzIC0yNjUuNDQgMzQ1LjkzNiAtMjEwLjE3MkMzNDUuNzAyIC0yMDkuMzc3IDM0NS43MDIgLTIwOC43MTIgMzQ2LjAxNSAtMjA4LjE5QzM0Ni4yNjIgLTIwNy42NTYgMzQ2LjE4NCAtMjA2LjU4NyAzNDUuNzE1IC0yMDUuMDA5QzM0OS4zNzggLTIwNS42MjIgMzUxLjM2IC0yMDYuMzM5IDM1MS42MDggLTIwNy4xNDdDMzU1LjQ2NyAtMjExLjIxNSAzNTkuNTA5IC0yMTUuMjMxIDM2My43NDYgLTIxOS4xOTRDMzY3Ljk5NyAtMjIzLjE0NSAzNzEuNzY1IC0yMjcuNjgyIDM3NS4wNzYgLTIzMi44MTlDNDAyLjg4NiAtMjY3LjE2MSA0MjguNzE0IC0zMDIuMTQyIDQ1Mi41MzUgLTMzNy43MzZDNDc2LjM2OCAtMzczLjMwMyA0OTguNTMzIC00MTAuNjk2IDUxOS4wNjggLTQ0OS44ODhDNTQzLjg1MyAtNDk3LjM3MiA1NTkuNTc3IC01NDYuNzM0IDU2Ni4yNTIgLTU5Ny45MzRDNTY2LjY0MyAtNjAyLjE4NSA1NjYuOTE3IC02MDYuMDE4IDU2Ny4xIC02MDkuNDZDNTY3LjI0MyAtNjEyLjkwMiA1NjYuMzE3IC02MTcuMSA1NjQuMzM2IC02MjIuMDgxIiBmaWxsPSIjRjVGNUY3Ii8+CjxwYXRoIGQ9Ik02OTYuNTE1IDE4OS4wNjRDNzA0LjYzOCAxODQuMzk2IDcxMi42ODIgMTc5LjYxMSA3MjAuNjg4IDE3NC43MzVWMTM0LjA1N0M2OTcuODE5IDE0OC41MDMgNjczLjgwMyAxNTkuNjM3IDY0OC42MDEgMTY3LjQyMUM2MjIuMDgyIDE3NS42MzUgNTk0LjU1OCAxODAuNjY3IDU2Ni4wMTggMTgyLjU1OEM1NTAuOTIgMTgzLjI2MiA1NDEuMjk4IDE4MS44OTMgNTM3LjEgMTc4LjQzOEM1MzIuODc2IDE3NS4wMDkgNTI5LjA5NSAxNjUuNzUyIDUyNS43NTcgMTUwLjc0NUw1MjMuOTU4IDEzMC41NDlDNTIzLjMzMiAxMTguMTI0IDUyNC43NjYgMTA2Ljc1NSA1MjguMzM5IDk2LjQyODlDNTMxLjg1OSA4Ni4xNTUgNTM2LjEyMiA3NS42MjAzIDU0MS4xMTYgNjQuODc3QzU0NS42MTQgNjQuNDg1OSA1NDkuNTY0IDY0LjM2ODUgNTUzLjAzMiA2NC41MzhDNTU2LjQ3NSA2NC42OTQ1IDU2MC40MzggNjQuNTc3MSA1NjQuOTQ5IDY0LjE3MjlDNTg1Ljg3NSA2NC4zNjg1IDYwNy42MzYgNjEuNzQ3OSA2MzAuMjY5IDU2LjI4NDlDNjUyLjA4MiA1MC42MjY1IDY3MC40IDQxLjI3ODIgNjg1LjI3NyAyOC4yNTMzQzY5NC45MzggMTkuNzc4NiA3MDQuMDI1IDEwLjM3ODMgNzEyLjU2NSAwLjA5MTMwODZINjM5LjUyNkM2MjAuMjU2IDE2Ljk4ODUgNTk2Ljk0NCAyNy40ODQxIDU2OS41MzkgMzEuNDYwN0M1NjcuNjYxIDMxLjc3MzYgNTY2LjM1NyAzMS44MTI3IDU2NS41NzUgMzEuNTY1QzU2NC43NTQgMzEuMzMwMyA1NjMuODI4IDMxLjUxMjggNTYyLjgxMSAzMi4wNDc0QzU2MS45OSAzMS44MTI3IDU2MS42NTEgMzEuNDk5OCA1NjEuNzgxIDMxLjA4MjZDNTYxLjg5OCAzMC42OTE1IDU2MS41NDYgMzAuMzY1NSA1NjAuNzUxIDMwLjEzMDhDNTYwLjk5OSAyOS4zMzU1IDU2MC45MDcgMjguODY2MSA1NjAuNTE2IDI4Ljc2MThDNTYwLjA5OSAyOC42MTg0IDU2MC4wMzQgMjguMTYyIDU2MC4yOTUgMjcuMzUzN0M1NjUuMzc5IDE4LjE3NDkgNTcwLjc3NyA5LjEwMDU1IDU3Ni40MzYgMC4wOTEzMDg2SDQzMC4xNzZDNDI0LjIwNCAxMi42NzMgNDE5LjA1NCAyNS45NDU2IDQxNC44MyAzOS45ODc1QzQwNi40NzMgNjEuOTU2NSA0MDQuMjgyIDgyLjI2OTcgNDA4LjI4NSAxMDAuOTY2QzQxMi4wMTQgMTIwLjQ1OCA0MTguODMzIDEzOC40NjMgNDI4LjcyOCAxNTQuOTgyQzQzOC42MTEgMTcxLjUyOCA0NTIuNDU4IDE4NS4wODcgNDcwLjI1NCAxOTUuN0M0OTAuNzM3IDIwOC44ODEgNTEyLjE0NSAyMTcuNzIxIDUzNC40MDEgMjIyLjI0NUM1NTYuNjQ0IDIyNi43NTcgNTc5Ljg2NSAyMjYuNTA5IDYwNC4xMTUgMjIxLjU2N0M2MDkuNjQzIDIyMC42MTYgNjE1LjI2MyAyMTkuNDY4IDYyMC45MjEgMjE4LjA5OUM2MjYuNTY3IDIxNi43NTYgNjMyLjI3NyAyMTUuMTkyIDYzOC4wNTMgMjEzLjQxOUM2NTkuMDU3IDIwNy41MjUgNjc4LjU2MiAxOTkuMzkgNjk2LjU0MSAxODkuMDc3IiBmaWxsPSIjRjVGNUY3Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjgyMF82OTk5MSI+CjxyZWN0IHdpZHRoPSI3MjEiIGhlaWdodD0iMjU2Ljg0OCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K\");background-repeat:no-repeat;background-size:contain}@media (min-width: 48em){.duet-page-heading .background .background-mask{top:-40px;width:502px;height:577px}}.duet-page-heading .background .brand-shape{position:absolute;top:-157px;right:-20px;width:185px;height:185px;background:rgb(0, 119, 179);border-radius:20%;mix-blend-mode:normal;opacity:0.2;transform:rotate(7deg)}@media (min-width: 48em){.duet-page-heading .background .brand-shape{top:-280px;right:-40px;width:325px;height:325px}}.duet-page-heading .background .brand-shape.second-shape{top:-182px;right:100px;width:207px;height:207px;background:rgb(11, 114, 136);opacity:0.1}@media (min-width: 48em){.duet-page-heading .background .brand-shape.second-shape{top:-325px;right:200px;width:365px;height:365px}}.duet-page-heading .background .brand-shaped-icon{position:absolute;top:20px;right:16px;display:flex;align-items:center;justify-content:center;width:85px;width:60px;height:85px;height:60px;background:rgba(0, 119, 179, 0.75);border-radius:25%;mix-blend-mode:normal;transform:rotate(7deg)}@media (min-width: 48em){.duet-page-heading .background .brand-shaped-icon{right:36px;width:93px;height:93px}}.duet-page-heading .background .brand-shaped-icon duet-icon{width:60px;height:60px;transform:rotate(-7deg)}@media (min-width: 48em){.duet-page-heading .background .brand-shaped-icon duet-icon{width:75px;height:75px}}.duet-page-heading .progress-indicator{display:flex;flex-direction:row;gap:4px}.duet-page-heading .progress-step{width:100%;height:4px;background-color:rgb(181, 198, 208);border-radius:2px}.duet-page-heading .progress-step.active{background-color:rgb(0, 119, 179)}.duet-page-heading.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(8, 42, 77)}.duet-page-heading.duet-theme-turva .brand-shaped-icon{background:rgba(198, 12, 48, 0.9);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.duet-page-heading.duet-theme-turva .brand-shaped-icon duet-icon{position:relative;top:-3px}.duet-page-heading.duet-theme-turva .progress-step{background-color:rgb(199, 202, 207)}.duet-page-heading.duet-theme-turva .progress-step.active{background-color:rgb(198, 12, 48)}:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .background .background-mask{background-image:none}:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .brand-shaped-icon{background:rgb(23, 42, 59);border-radius:16%;-webkit-mask-image:none;mask-image:none;transform:rotate(0)}:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .brand-shaped-icon duet-icon{top:0;transform:rotate(0)}:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .progress-step{background-color:rgb(178, 194, 205)}:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .progress-step.active{background-color:rgb(230, 23, 64)}";
 
 const DuetPageHeading = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Theme of the hero area.
+         */
         this.theme = "";
+        /**
+         * Icon.
+         */
         this.icon = "";
+        /**
+         * Layout.
+         * Values narrow and fluid are deprecated.
+         */
         this.layout = "narrow";
-        this.progressCurrentStep = undefined;
-        this.progressTotalSteps = undefined;
     }
     /**
      * Component lifecycle events.
@@ -41,15 +46,15 @@ const DuetPageHeading = class {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (index.h("div", { key: '9effa4b9be0ae8f00bf5d788432fda116d34b81d', class: {
+        return (index.h("div", { key: 'f353e792c29cf6a49513529f3a54740bf2894dcc', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, index.h("div", { key: 'c33fc9a029847d3625137fb1173cab7b55c1fdf4', class: "background" }, this.theme === "turva" && index.h("div", { key: '304c53b99ade8cb534bc65d5b7a2579584e3c185', class: "background-mask" }), this.theme !== "turva" && index.h("div", { key: '632793449d119b5462f43410f643ffe62a9c01d0', class: "brand-shape" }), this.theme !== "turva" && index.h("div", { key: '58aed705c28aca08e7fcdf9edbd6a9281ca73c09', class: "brand-shape second-shape" }), this.icon && (index.h("div", { key: '3b736388304bf35620ad364ddc957f500c0f097e', class: "brand-shaped-icon" }, index.h("duet-icon", { key: '3040e3c7deaba2c0c9670a6ec4c83b34d297f8ab', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), index.h("div", { key: 'a7bd8c26779cfada416fc8f14db5c12ea8af90a0', class: "heading" }, index.h("slot", { key: 'd681185baeb0f2b731c3d89668862a20dae5ba6f', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (index.h("div", { key: '79e742c4b910b78046f2a3fec20cde71e1a652da' }, index.h("duet-spacer", { key: '12e3d41455301f3fdf04f432a1754c10112e4b33', size: "large" }), index.h("div", { key: '52cd3a295ebab421be2e543455af743f7040970f', role: "presentation" }, this.progressIndicator()))))));
+            } }, index.h("div", { key: 'b8a5a752d4557b2ac2ac2bfc1c2e65861d4c0521', class: "background" }, this.theme === "turva" && index.h("div", { key: 'ff9cbab91c325792d84f24d227d67b5bd2f83401', class: "background-mask" }), this.theme !== "turva" && index.h("div", { key: 'c697b3df64c3300caccb801818e16e0f82be19b4', class: "brand-shape" }), this.theme !== "turva" && index.h("div", { key: '86bea79fd3c261f4042b7f55129cf5b3e2bbcc20', class: "brand-shape second-shape" }), this.icon && (index.h("div", { key: 'f95cb3034647398542c7eac251e3a8ee589fde3c', class: "brand-shaped-icon" }, index.h("duet-icon", { key: '5ea162f55f426e4fb23d062c42b452f9d02dd8db', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), index.h("div", { key: 'ca049bcfa7903693dcd81e7053f9c8436f5bc972', class: "heading" }, index.h("slot", { key: '1f11d60c4883d6a083ab58a3549230893373a4b0', name: "heading" }), this.progressCurrentStep !== undefined && this.progressTotalSteps > 0 && (index.h("div", { key: '3d192a48b6d2f852c76bb4cca92a6bd260c89b6d' }, index.h("duet-spacer", { key: 'ae3a5aa598bca7741ddeefb498ad03a00f01ffa1', size: "large" }), index.h("div", { key: '145b65c13423049136df5afff6d6f0b75fceeff2', role: "presentation" }, this.progressIndicator()))))));
     }
     get element() { return index.getElement(this); }
 };
-DuetPageHeading.style = DuetPageHeadingStyle0;
+DuetPageHeading.style = duetPageHeadingCss;
 
 exports.duet_page_heading = DuetPageHeading;