@duetds/components 4.31.0 → 4.33.2

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

@@ -16,7 +16,7 @@ export 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;
     /**
@@ -53,7 +53,8 @@ export class DuetHeading {
     const color = getColorByName(this.color);
     return (h(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",
@@ -140,18 +141,18 @@ export class DuetHeading {
       "reflect": false
     },
     "border": {
-      "type": "boolean",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "boolean | \"solid\"",
+        "resolved": "\"solid\" | boolean",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Enable or disable the border underneath the heading."
+        "text": "Enable or disable the border underneath the heading, solid will darken the border"
       },
       "attribute": "border",
       "reflect": false,

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

@@ -485,11 +485,11 @@ export class DuetHero {
       "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."
       },
@@ -514,8 +514,8 @@ export class DuetHero {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
         "text": "Defaults for accessibleLabelExternal"
       },
@@ -535,8 +535,8 @@ export class DuetHero {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
         "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
       },

package/lib/collection/components/duet-icon/icon-utils.js

@@ -1,6 +1,7 @@
 /*!
  * Built with Duet Design System
  */
+import { Build, Env } from "@stencil/core";
 const cleanupSvg = (svgContent) => {
   if (typeof document === "undefined" || !svgContent) {
     return;
@@ -37,16 +38,12 @@ const isValid = (elm) => {
 };
 export const buildIconUrl = (iconName) => {
   // under normal operations the Icons should always be loaded from the CDN
-  const cdnURI = `https://cdn.duetds.com/api/icons/${process.env.DUET_ICON_VERSION}/lib/assets/${iconName}.svg`;
-  // however for vizdiffing and local development / testing we need to be able to access the raw images
-  const localURI = `http://0.0.0.0:3334/icons/lib/assets/${iconName}.svg`;
-  const host = window.location.hostname;
-  const re = /(localhost|loca\.lt|127\.0\.0\.1|0\.0\.0\.0)/i;
-  if (host.match(re)) {
-    return localURI;
+  if (Build.isDev || Build.isTesting) {
+    // however for vizdiffing and local development / testing we need to be able to access the raw images
+    return `${Env.cdnURILocal}/icons/lib/assets/${iconName}.svg`;
   }
   else {
-    return cdnURI;
+    return `${Env.cdnURIProd}/icons/${Env.duetIconVersion}/lib/assets/${iconName}.svg`;
   }
 };
 const iconCache = {};

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

@@ -63,6 +63,21 @@ duet-caption:not(:last-of-type) {
   margin-bottom: 0;
 }
 
+.duet-input-placeholder {
+  position: absolute;
+  top: -9px;
+  left: 9px;
+  z-index: 200;
+  display: block;
+  width: auto;
+  max-width: 60%;
+  padding: 0 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: white;
+}
+
 .duet-input-icon {
   position: absolute;
   top: 50%;

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

@@ -140,7 +140,7 @@ export 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",
@@ -159,7 +159,7 @@ export 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
@@ -199,8 +199,8 @@ export class DuetInput {
         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("div", { class: "duet-input-relative" },
+          this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)),
           h("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,
@@ -212,7 +212,7 @@ export class DuetInput {
           this.icon && (h("div", { class: "duet-input-icon" },
             h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
           h("slot", null)),
-        h("span", { class: "duet-input-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+        h("span", { class: "duet-input-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
   }
   static get is() { return "duet-input"; }
   static get encapsulation() { return "scoped"; }

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

@@ -112,11 +112,11 @@ export class DuetLink {
       "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 external link\naccessible label to match the chosen language."
       },
@@ -141,8 +141,8 @@ export class DuetLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
         "text": "Defaults for accessibleLabelExternal"
       },
@@ -162,8 +162,8 @@ export class DuetLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
         "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
       },

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

@@ -232,11 +232,11 @@ export class DuetLogo {
       "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 language of the logo."
       },

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

@@ -263,11 +263,11 @@ export class DuetModal {
       "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 also changes the logo to match\nthe chosen language."
       },
@@ -292,8 +292,8 @@ export class DuetModal {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }"
           }],
         "text": "Defaults for accessibleCloseLabel"
       },
@@ -313,8 +313,8 @@ export class DuetModal {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }"
           }],
         "text": "Adds accessible label for the close icon that is only shown for screen\nreaders. This property is always required to create an accessibly interface!\nSwedish translation for this property is \u201CSt\u00E4ng f\u00F6nstret\u201D."
       },

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

@@ -104,11 +104,11 @@ export class DuetNotification {
       "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.\nUsed for announcing unread notifications to screen readers."
       },
@@ -149,8 +149,8 @@ export class DuetNotification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{ en: \"Unread\", fi: \"Lukematon\", sv: \"Ol\u00E4st\" }",
-            "name": "default"
+            "name": "default",
+            "text": "{ en: \"Unread\", fi: \"Lukematon\", sv: \"Ol\u00E4st\" }"
           }],
         "text": "Adds accessible label for tooltip that is shown over unread counter"
       },
@@ -260,8 +260,8 @@ export class DuetNotification {
         "signature": "(options?: FocusOptions) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "options",
-                "name": "param"
+                "name": "param",
+                "text": "options"
               }],
             "text": ""
           }],

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -233,8 +233,8 @@ export class DuetNotificationDrawer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{en: \"No notifications\", fi: \"Ei ilmoituksia\", sv: \"Inga notifikationer\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{en: \"No notifications\", fi: \"Ei ilmoituksia\", sv: \"Inga notifikationer\"}"
           }],
         "text": "Defaults for accessibleLabelNotifications"
       },
@@ -254,8 +254,8 @@ export class DuetNotificationDrawer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{en: \"No notifications\", fi: \"Ei ilmoituksia\", sv: \"Inga notifikationer\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{en: \"No notifications\", fi: \"Ei ilmoituksia\", sv: \"Inga notifikationer\"}"
           }],
         "text": "Adds accessible label for tooltip that is shown for notifications"
       },
@@ -337,8 +337,8 @@ export class DuetNotificationDrawer {
         "signature": "(options?: FocusOptions) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "options",
-                "name": "param"
+                "name": "param",
+                "text": "options"
               }],
             "text": ""
           }],
@@ -381,8 +381,8 @@ export class DuetNotificationDrawer {
         "signature": "(moveFocusToButton?: boolean) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "moveFocusToButton should focus be moved to the menu's button on close?",
-                "name": "param"
+                "name": "param",
+                "text": "moveFocusToButton should focus be moved to the menu's button on close?"
               }],
             "text": "should focus be moved to the menu's button on close?"
           }],

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -370,11 +370,11 @@ export class DuetNumberInput {
       "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."
       },
@@ -508,8 +508,8 @@ export class DuetNumberInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}"
           }],
         "text": "Defaults for accessibleLive"
       },
@@ -529,8 +529,8 @@ export class DuetNumberInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}"
           }],
         "text": "Format of message used to announce current amount when switching between amounts.\nThe string {current} is replaced with the current amount."
       },
@@ -573,8 +573,8 @@ export class DuetNumberInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}"
           }],
         "text": "Defaults for accessibleAdd"
       },
@@ -594,8 +594,8 @@ export class DuetNumberInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}"
           }],
         "text": "Accessible label for the add button that is read for screen reader users."
       },
@@ -620,8 +620,8 @@ export class DuetNumberInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}"
           }],
         "text": "Defaults for accessibleSubtract"
       },
@@ -641,8 +641,8 @@ export class DuetNumberInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}"
           }],
         "text": "Accessible label for the subtract button that is read for screen reader users."
       },
@@ -766,8 +766,8 @@ export class DuetNumberInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Etiketti\", en: \"Label\", sv: \"M\u00E4rka\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Etiketti\", en: \"Label\", sv: \"M\u00E4rka\"}"
           }],
         "text": "Defaults for Label"
       },
@@ -787,8 +787,8 @@ export class DuetNumberInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Etiketti\", en: \"Label\", sv: \"M\u00E4rka\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Etiketti\", en: \"Label\", sv: \"M\u00E4rka\"}"
           }],
         "text": "Label for the number input."
       },

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

@@ -52,6 +52,12 @@
 .duet-paragraph.duet-paragraph-small {
   font-size: 0.875rem;
 }
+.duet-paragraph.duet-paragraph-semi-bold {
+  font-weight: 600;
+}
+.duet-paragraph.duet-paragraph-bold {
+  font-weight: 700;
+}
 .duet-paragraph.duet-m-0 {
   margin: 0 !important;
 }

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

@@ -4,10 +4,13 @@
 import { Component, Element, h, Prop } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
+/**
+ * @part duet-paragraph - piercing selector for styling the paragraph
+ */
 export class DuetParagraph {
   constructor() {
     /**
-     * Theme of the card.
+     * Theme of the paragraph.
      */
     this.theme = "";
     /**
@@ -18,6 +21,10 @@ export 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.
      */
@@ -43,10 +50,12 @@ export class DuetParagraph {
     return (h("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 } },
+      }, style: { color }, part: "duet-paragraph" },
       h("slot", null)));
   }
   static get is() { return "duet-paragraph"; }
@@ -75,7 +84,7 @@ export class DuetParagraph {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Theme of the card."
+        "text": "Theme of the paragraph."
       },
       "attribute": "theme",
       "reflect": false,
@@ -126,6 +135,28 @@ export class DuetParagraph {
       "reflect": false,
       "defaultValue": "\"medium\""
     },
+    "weight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetParagraphWeight",
+        "resolved": "\"bold\" | \"semi-bold\"",
+        "references": {
+          "DuetParagraphWeight": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Controls the Font-Weight of the paragraph."
+      },
+      "attribute": "weight",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "variation": {
       "type": "string",
       "mutable": false,

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;
+}