@duetds/components 4.30.1 → 4.33.1

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

@@ -0,0 +1,103 @@
+*,
+*::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;
+  /* fallback design of the default appearance */
+}
+.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;
+  /* For IE10 */
+  color: #0077b3;
+  /* Get rid of default border in Firefox. */
+  border: 0 none;
+  /* Reset the default appearance */
+  -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;
+}

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

@@ -0,0 +1,240 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { createID } from "../../utils/create-id";
+import { getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+export class DuetProgress {
+  constructor() {
+    /**
+     * 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 (h(Host, null,
+      h("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",
+        } },
+        h("duet-visually-hidden", null,
+          h("label", { htmlFor: this.progressLabelId }, this.progress !== 0 && (h("span", null,
+            this.accessibleLabel,
+            ", ",
+            this.accessibleLabelUpload[this.progress < 99 ? 1 : 0])))),
+        this.caption && (h("div", { class: "duet-progress-caption" },
+          h("span", null, this.caption))),
+        h("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" },
+          h("div", { class: "progress-bar" },
+            h("span", { style: { width: `${this.progress}%;` } },
+              "Progress: ",
+              this.progress,
+              "%"))))));
+  }
+  static get is() { return "duet-progress"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-progress.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-progress.css"]
+  }; }
+  static get properties() { return {
+    "accessibleDescribedBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the id of a component that describes the upload component."
+      },
+      "attribute": "accessible-described-by",
+      "reflect": false
+    },
+    "accessibleLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the aria-label of the component -\nthis will get combined with an label+uploading when uploading,\nand label+upload complete when upload is complete"
+      },
+      "attribute": "accessible-label",
+      "reflect": false
+    },
+    "accessibleLabelUploadDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defaults for accessibleLabel"
+      },
+      "attribute": "accessible-label-upload-defaults",
+      "reflect": false,
+      "defaultValue": "{\n    fi: [\"l\u00E4hetys valmis\", \"l\u00E4hetys k\u00E4ynniss\u00E4\"],\n    sv: [\"Uppladdningen \u00E4r klar\", \"Uppladdning p\u00E5g\u00E5r\"],\n    en: [\"upload completed\", \"upload in progress\"],\n  }"
+    },
+    "accessibleLabelUpload": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{fi: [\"l\u00E4hetys valmis\", \"l\u00E4hetys k\u00E4ynniss\u00E4\"],sv: [\"Uppladdningen \u00E4r klar\", \"Uppladdning p\u00E5g\u00E5r\"], en:  [\"completed\", \"in progress\"]}"
+          }],
+        "text": "Adds accessible label for upload in progress and upload complete states"
+      },
+      "attribute": "accessible-label-upload",
+      "reflect": false,
+      "defaultValue": "getLocaleString(this.accessibleLabelUploadDefaults)"
+    },
+    "progress": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Progress of the bar, a value from 0-100"
+      },
+      "attribute": "progress",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "caption": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Caption (underneath label) that can be set as a way of adding extra information"
+      },
+      "attribute": "caption",
+      "reflect": false
+    },
+    "height": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Height of progressbar"
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "\"10px\""
+    },
+    "theme": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetTheme",
+        "resolved": "\"\" | \"default\" | \"turva\"",
+        "references": {
+          "DuetTheme": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme of the input."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get elementRef() { return "element"; }
+}

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

@@ -379,8 +379,8 @@ export class DuetRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Determines, whether the control is disabled from the parent group.",
-            "name": "internal"
+            "name": "internal",
+            "text": "Determines, whether the control is disabled from the parent group."
           }],
         "text": ""
       },
@@ -404,8 +404,8 @@ export class DuetRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Determines, whether the control is displayed horizontally or vertically within a group.",
-            "name": "internal"
+            "name": "internal",
+            "text": "Determines, whether the control is displayed horizontally or vertically within a group."
           }],
         "text": ""
       },
@@ -424,8 +424,8 @@ export class DuetRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Determines, whether the control is displayed responsively within a group.",
-            "name": "internal"
+            "name": "internal",
+            "text": "Determines, whether the control is displayed responsively within a group."
           }],
         "text": ""
       },

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

@@ -57,6 +57,21 @@ duet-tooltip {
   }
 }
 
+.duet-select-placeholder {
+  position: absolute;
+  top: -9px;
+  left: 9px;
+  z-index: 200;
+  display: block;
+  width: auto;
+  max-width: 60%;
+  padding: 0 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: white;
+}
+
 .duet-select-container {
   position: relative;
   width: 100%;

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

@@ -121,14 +121,14 @@ export 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();
   }
   /**
@@ -176,8 +176,8 @@ export class DuetSelect {
         h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label),
         this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
         this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)),
-        this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, size: "small" }, this.placeholder)),
         h("div", { class: "duet-select-wrapper" },
+          this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)),
           h("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 && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)),
             !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {

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

@@ -194,8 +194,8 @@ export class DuetStep {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "The index of this step, derived from its position within stepper.\nThis property is used internally by stepper, and should not be set by the developer.",
-            "name": "internal"
+            "name": "internal",
+            "text": "The index of this step, derived from its position within stepper.\nThis property is used internally by stepper, and should not be set by the developer."
           }],
         "text": ""
       },
@@ -218,8 +218,8 @@ export class DuetStep {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "The state of the step.\nThis property is used internally by stepper, and should not be set by the developer.",
-            "name": "internal"
+            "name": "internal",
+            "text": "The state of the step.\nThis property is used internally by stepper, and should not be set by the developer."
           }],
         "text": ""
       },
@@ -238,8 +238,8 @@ export class DuetStep {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Enable/disable rounded top corners (on mobile).\nThis property is used internally by stepper, and should not be set by the developer.",
-            "name": "internal"
+            "name": "internal",
+            "text": "Enable/disable rounded top corners (on mobile).\nThis property is used internally by stepper, and should not be set by the developer."
           }],
         "text": ""
       },
@@ -259,8 +259,8 @@ export class DuetStep {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Enable/disable rounded bottom corners (on mobile).\nThis property is used internally by stepper, and should not be set by the developer.",
-            "name": "internal"
+            "name": "internal",
+            "text": "Enable/disable rounded bottom corners (on mobile).\nThis property is used internally by stepper, and should not be set by the developer."
           }],
         "text": ""
       },

package/lib/collection/components/duet-tab-group/duet-tab-group.css

@@ -124,8 +124,8 @@
 }
 .duet-theme-turva .duet-tab-button.selected {
   color: white !important;
-  background-color: #444445;
-  border-color: #444445 !important;
+  background-color: #171c3a;
+  border-color: #171c3a !important;
 }
 .duet-tab-button:focus {
   z-index: 200;

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -31,14 +31,19 @@ export class DuetTabGroup {
      */
     this.language = getLanguage();
     /**
-     * Label for the select element which gets shown on mobile.
+     * Defaults for Label
      * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
      */
-    this.label = getLocaleString({
+    this.labelDefaults = {
       fi: "Valitse",
       en: "Choose",
       sv: "Välj",
-    }, this.language);
+    };
+    /**
+     * Label for the select element which gets shown on mobile.
+     * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
+     */
+    this.label = getLocaleString(this.labelDefaults, this.language);
     /**
      * Determines whether the label for the select element shown on mobile is visually hidden.
      */
@@ -246,11 +251,11 @@ export class DuetTabGroup {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
           }, {
-            "text": "\"fi\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"fi\""
           }],
         "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
       },
@@ -258,6 +263,32 @@ export class DuetTabGroup {
       "reflect": false,
       "defaultValue": "getLanguage()"
     },
+    "labelDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{fi: \"Valitse\", en: \"Choose\", sv: \"V\u00E4lja\"}"
+          }],
+        "text": "Defaults for Label"
+      },
+      "attribute": "label-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: \"Valitse\",\n    en: \"Choose\",\n    sv: \"V\u00E4lj\",\n  }"
+    },
     "label": {
       "type": "string",
       "mutable": false,
@@ -270,14 +301,14 @@ export class DuetTabGroup {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Valitse\", en: \"Choose\", sv: \"V\u00E4lja\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Valitse\", en: \"Choose\", sv: \"V\u00E4lja\"}"
           }],
         "text": "Label for the select element which gets shown on mobile."
       },
       "attribute": "label",
       "reflect": false,
-      "defaultValue": "getLocaleString(\n    {\n      fi: \"Valitse\",\n      en: \"Choose\",\n      sv: \"V\u00E4lj\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
     },
     "labelHidden": {
       "type": "boolean",
@@ -356,8 +387,8 @@ export class DuetTabGroup {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "in favour of more specific duetTabChange event.\nCallback for when the value changed.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "in favour of more specific duetTabChange event.\nCallback for when the value changed."
           }],
         "text": ""
       },

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

@@ -68,6 +68,25 @@ duet-tooltip {
   display: flex !important;
 }
 
+.duet-textarea-wrapper {
+  position: relative;
+}
+
+.duet-textarea-placeholder {
+  position: absolute;
+  top: -9px;
+  left: 9px;
+  z-index: 200;
+  display: block;
+  width: auto;
+  max-width: 60%;
+  padding: 0 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: white;
+}
+
 .duet-textarea {
   padding: 15px !important;
   position: relative;

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

@@ -105,7 +105,7 @@ export 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,
@@ -144,7 +144,7 @@ export 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");
     }
@@ -183,8 +183,9 @@ export class DuetTextarea {
         h("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 && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
         this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)),
-        this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, size: "small" }, this.placeholder)),
-        h("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 }),
+        h("div", { class: "duet-textarea-wrapper" },
+          this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)),
+          h("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 })),
         h("duet-grid", { alignment: "stretch" },
           h("duet-grid-item", { margin: "none", fill: true },
             h("div", { class: "duet-textarea-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))),