@duetds/components 4.30.0 → 4.33.0

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

@@ -52,10 +52,10 @@ export class DuetModal {
      */
     this.language = getLanguage();
     /**
-     * Property to change accessibleCloseLabel defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleCloseLabel when needed
+     * Defaults for accessibleCloseLabel
+     * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
      */
-    this.accessibleCloseLabelDefault = {
+    this.accessibleCloseLabelDefaults = {
       fi: "Sulje ikkuna",
       sv: "Stäng fönstret",
       en: "Close the dialog",
@@ -66,7 +66,7 @@ export class DuetModal {
      * Swedish translation for this property is “Stäng fönstret”.
      * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
      */
-    this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault);
+    this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
     /**
      * Size of the modal window.
      */
@@ -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."
       },
@@ -275,12 +275,12 @@ export class DuetModal {
       "reflect": false,
       "defaultValue": "getLanguage()"
     },
-    "accessibleCloseLabelDefault": {
-      "type": "unknown",
+    "accessibleCloseLabelDefaults": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -291,9 +291,14 @@ export class DuetModal {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Property to change accessibleCloseLabel defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleCloseLabel when needed"
+        "tags": [{
+            "name": "default",
+            "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }"
+          }],
+        "text": "Defaults for accessibleCloseLabel"
       },
+      "attribute": "accessible-close-label-default",
+      "reflect": false,
       "defaultValue": "{\n    fi: \"Sulje ikkuna\",\n    sv: \"St\u00E4ng f\u00F6nstret\",\n    en: \"Close the dialog\",\n  }"
     },
     "accessibleCloseLabel": {
@@ -308,14 +313,14 @@ 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."
       },
       "attribute": "accessible-close-label",
       "reflect": false,
-      "defaultValue": "getLocaleString(this.accessibleCloseLabelDefault)"
+      "defaultValue": "getLocaleString(this.accessibleCloseLabelDefaults, this.language)"
     },
     "size": {
       "type": "string",

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

@@ -27,8 +27,8 @@ export class DuetNotificationDrawer {
      */
     this.language = getLanguage();
     /**
-     * Property to change accessibleLabelNotifications defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabelNotifications when needed
+     * Defaults for accessibleLabelNotifications
+     * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"}
      */
     this.accessibleLabelNotificationsDefaults = {
       en: "No notifications",
@@ -39,7 +39,7 @@ export class DuetNotificationDrawer {
      * Adds accessible label for tooltip that is shown for notifications
      * @default {en: "No notifications", fi: "Ei ilmoituksia", sv: "Inga notifikationer"}
      */
-    this.accessibleLabelNotifications = getLocaleString(this.accessibleLabelNotificationsDefaults, this.language);
+    this.accessibleLabelNotifications = getLocaleString(this.accessibleLabelNotificationsDefaults);
     /**
      * Show a badge that indicates something has changed.
      */
@@ -217,11 +217,11 @@ export class DuetNotificationDrawer {
       "defaultValue": "getLanguage()"
     },
     "accessibleLabelNotificationsDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "| DuetLangObject\n    | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -232,9 +232,14 @@ export class DuetNotificationDrawer {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Property to change accessibleLabelNotifications defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelNotifications when needed"
+        "tags": [{
+            "name": "default",
+            "text": "{en: \"No notifications\", fi: \"Ei ilmoituksia\", sv: \"Inga notifikationer\"}"
+          }],
+        "text": "Defaults for accessibleLabelNotifications"
       },
+      "attribute": "accessible-label-notification-default",
+      "reflect": false,
       "defaultValue": "{\n    en: \"No notifications\",\n    fi: \"Ei ilmoituksia\",\n    sv: \"Inga notifikationer\",\n  }"
     },
     "accessibleLabelNotifications": {
@@ -249,14 +254,14 @@ 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"
       },
       "attribute": "accessible-label-notifications",
       "reflect": false,
-      "defaultValue": "getLocaleString(\n    this.accessibleLabelNotificationsDefaults,\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleLabelNotificationsDefaults)"
     },
     "badge": {
       "type": "boolean",
@@ -332,8 +337,8 @@ export class DuetNotificationDrawer {
         "signature": "(options?: FocusOptions) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "options",
-                "name": "param"
+                "name": "param",
+                "text": "options"
               }],
             "text": ""
           }],
@@ -376,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

@@ -28,37 +28,52 @@ export class DuetNumberInput {
      */
     this.unit = getLocale(this.language).money;
     /**
-     * Format of message used to announce current amount when switching between amounts.
-     * The string {current} is replaced with the current amount.
+     * Defaults for accessibleLive
      * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
      */
-    this.accessibleLive = getLocaleString({
+    this.accessibleLiveDefaults = {
       fi: "{current} euroa valittuna",
       en: "{current} euros selected",
       sv: "{current} euro valt",
-    }, this.language);
+    };
+    /**
+     * Format of message used to announce current amount when switching between amounts.
+     * The string {current} is replaced with the current amount.
+     * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
+     */
+    this.accessibleLive = 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;
     /**
-     * Accessible label for the add button that is read for screen reader users.
+     * Defaults for accessibleAdd
      * @default {fi: "Lisää summaan", en: "Add to the amount", sv: "Lägg till beloppet"}
      */
-    this.accessibleAdd = getLocaleString({
+    this.accessibleAddDefaults = {
       fi: "Lisää summaan",
       en: "Add to the amount",
       sv: "Lägg till beloppet",
-    }, this.language);
+    };
     /**
-     * Accessible label for the subtract button that is read for screen reader users.
+     * 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 = getLocaleString(this.accessibleAddDefaults, this.language);
+    /**
+     * Defaults for accessibleSubtract
      * @default {fi: "Vähennä summasta", en: "Subtract from the amount", sv: "Dra från beloppet"}
      */
-    this.accessibleSubtract = getLocaleString({
+    this.accessibleSubtractDefaults = {
       fi: "Vähennä summasta",
       en: "Subtract from the amount",
       sv: "Dra från beloppet",
-    }, this.language);
+    };
+    /**
+     * 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 = getLocaleString(this.accessibleSubtractDefaults, this.language);
     /**
      * Theme of the input.
      */
@@ -76,14 +91,19 @@ export class DuetNumberInput {
      */
     this.min = 0;
     /**
-     * Label for the number input.
+     * Defaults for Label
      * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
      */
-    this.label = getLocaleString({
+    this.labelDefaults = {
       fi: "Nimilappu",
       en: "Label",
       sv: "Etikett",
-    }, this.language);
+    };
+    /**
+     * Label for the number input.
+     * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+     */
+    this.label = getLocaleString(this.labelDefaults, this.language);
     /**
      * Visually hide the label, but still show it to screen readers.
      */
@@ -350,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."
       },
@@ -471,6 +491,32 @@ export class DuetNumberInput {
       "attribute": "accessible-described-by",
       "reflect": false
     },
+    "accessibleLiveDefaults": {
+      "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: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}"
+          }],
+        "text": "Defaults for accessibleLive"
+      },
+      "attribute": "accessible-live-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: \"{current} euroa valittuna\",\n    en: \"{current} euros selected\",\n    sv: \"{current} euro valt\",\n  }"
+    },
     "accessibleLive": {
       "type": "string",
       "mutable": false,
@@ -483,14 +529,14 @@ 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."
       },
       "attribute": "accessible-live",
       "reflect": false,
-      "defaultValue": "getLocaleString(\n    {\n      fi: \"{current} euroa valittuna\",\n      en: \"{current} euros selected\",\n      sv: \"{current} euro valt\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleLiveDefaults, this.language)"
     },
     "accessibleLiveEnabled": {
       "type": "boolean",
@@ -510,6 +556,32 @@ export class DuetNumberInput {
       "reflect": false,
       "defaultValue": "true"
     },
+    "accessibleAddDefaults": {
+      "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: \"Lis\u00E4\u00E4 summaan\", en: \"Add to the amount\", sv: \"L\u00E4gg till beloppet\"}"
+          }],
+        "text": "Defaults for accessibleAdd"
+      },
+      "attribute": "accessible-add-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 summaan\",\n    en: \"Add to the amount\",\n    sv: \"L\u00E4gg till beloppet\",\n  }"
+    },
     "accessibleAdd": {
       "type": "string",
       "mutable": false,
@@ -522,14 +594,40 @@ 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."
       },
       "attribute": "accessible-add",
       "reflect": false,
-      "defaultValue": "getLocaleString(\n    {\n      fi: \"Lis\u00E4\u00E4 summaan\",\n      en: \"Add to the amount\",\n      sv: \"L\u00E4gg till beloppet\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleAddDefaults, this.language)"
+    },
+    "accessibleSubtractDefaults": {
+      "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: \"V\u00E4henn\u00E4 summasta\", en: \"Subtract from the amount\", sv: \"Dra fr\u00E5n beloppet\"}"
+          }],
+        "text": "Defaults for accessibleSubtract"
+      },
+      "attribute": "accessible-subtract-defaults",
+      "reflect": false,
+      "defaultValue": "{\n    fi: \"V\u00E4henn\u00E4 summasta\",\n    en: \"Subtract from the amount\",\n    sv: \"Dra fr\u00E5n beloppet\",\n  }"
     },
     "accessibleSubtract": {
       "type": "string",
@@ -543,14 +641,14 @@ 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."
       },
       "attribute": "accessible-subtract",
       "reflect": false,
-      "defaultValue": "getLocaleString(\n    {\n      fi: \"V\u00E4henn\u00E4 summasta\",\n      en: \"Subtract from the amount\",\n      sv: \"Dra fr\u00E5n beloppet\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleSubtractDefaults, this.language)"
     },
     "theme": {
       "type": "string",
@@ -651,6 +749,32 @@ export class DuetNumberInput {
       "reflect": false,
       "defaultValue": "0"
     },
+    "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: \"Etiketti\", en: \"Label\", sv: \"M\u00E4rka\"}"
+          }],
+        "text": "Defaults for Label"
+      },
+      "attribute": "label-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: \"Nimilappu\",\n    en: \"Label\",\n    sv: \"Etikett\",\n  }"
+    },
     "label": {
       "type": "string",
       "mutable": false,
@@ -663,14 +787,14 @@ 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."
       },
       "attribute": "label",
       "reflect": false,
-      "defaultValue": "getLocaleString(\n    {\n      fi: \"Nimilappu\",\n      en: \"Label\",\n      sv: \"Etikett\",\n    },\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
     },
     "labelHidden": {
       "type": "boolean",

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,