@duetds/components 4.30.1 → 4.31.0

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -46,11 +46,27 @@ export class DuetDatePicker {
      * Controls the margin of the component.
      */
     this.margin = "auto";
+    /**
+     * The currently active language. This setting changes the month/year/day
+     * names and button labels as well as all screen reader labels.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
+     */
+    this.language = getLanguage();
+    /**
+     * Placeholder defaults
+     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+     */
+    this.placeholderDefaults = {
+      fi: "pp.kk.vvvv",
+      en: "dd.mm.yyyy",
+      sv: "dd.mm.åååå",
+    };
     /**
      * Hint text to display before the user types into the date picker input.
      * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
      */
-    this.placeholder = getLocaleString({ fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" });
+    this.placeholder = getLocaleString(this.placeholderDefaults, this.language);
     /**
      * If form input field has a placeholder text, and user types anything (causing the text to dissapear),
      * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
@@ -61,13 +77,6 @@ export class DuetDatePicker {
      * interact with the input, and conveys its inactive state to assistive technologies.
      */
     this.disabled = false;
-    /**
-     * The currently active language. This setting changes the month/year/day
-     * names and button labels as well as all screen reader labels.
-     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
-     * @default "fi"
-     */
-    this.language = getLanguage();
     /**
      * Display the date picker input in error state along with an error message.
      */
@@ -578,6 +587,61 @@ export class DuetDatePicker {
       "reflect": false,
       "defaultValue": "\"auto\""
     },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLanguage",
+        "resolved": "\"en\" | \"fi\" | \"sv\"",
+        "references": {
+          "DuetLanguage": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "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"
+          }, {
+            "text": "\"fi\"",
+            "name": "default"
+          }],
+        "text": "The currently active language. This setting changes the month/year/day\nnames and button labels as well as all screen reader labels."
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "getLanguage()"
+    },
+    "placeholderDefaults": {
+      "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": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }",
+            "name": "default"
+          }],
+        "text": "Placeholder defaults"
+      },
+      "attribute": "placeholder-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: \"pp.kk.vvvv\",\n    en: \"dd.mm.yyyy\",\n    sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\",\n  }"
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,
@@ -597,7 +661,7 @@ export class DuetDatePicker {
       },
       "attribute": "placeholder",
       "reflect": false,
-      "defaultValue": "getLocaleString({ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" })"
+      "defaultValue": "getLocaleString(this.placeholderDefaults, this.language)"
     },
     "echoPlaceholder": {
       "type": "boolean",
@@ -635,35 +699,6 @@ export class DuetDatePicker {
       "reflect": true,
       "defaultValue": "false"
     },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetLanguage",
-        "resolved": "\"en\" | \"fi\" | \"sv\"",
-        "references": {
-          "DuetLanguage": {
-            "location": "import",
-            "path": "../../common-types"
-          }
-        }
-      },
-      "required": false,
-      "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"
-          }, {
-            "text": "\"fi\"",
-            "name": "default"
-          }],
-        "text": "The currently active language. This setting changes the month/year/day\nnames and button labels as well as all screen reader labels."
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "getLanguage()"
-    },
     "error": {
       "type": "string",
       "mutable": false,

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

@@ -60,7 +60,7 @@ export class DuetFooter {
      * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
      * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
      */
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, this.language);
     /**
      * Component event handling.
      */
@@ -285,11 +285,11 @@ export class DuetFooter {
       "reflect": false
     },
     "accessibleLabelExternalDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -306,6 +306,8 @@ export class DuetFooter {
           }],
         "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
       },
+      "attribute": "accessible-label-external-default",
+      "reflect": false,
       "defaultValue": "DuetStringsExternalDefaults"
     },
     "accessibleLabelExternal": {
@@ -327,7 +329,7 @@ export class DuetFooter {
       },
       "attribute": "accessible-label-external",
       "reflect": false,
-      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
+      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults, this.language)"
     },
     "menu": {
       "type": "any",

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

@@ -51,10 +51,26 @@ export class DuetHeader {
      */
     this.language = getLanguage();
     /**
-     * Property to change accessibleI18nLabels defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleI18nLabels when needed
+     * Default strings for accessibleI18nLabels
+     * @default {
+      fi: {
+        skipLabel: "Siirry pääsisältöön",
+        changeLanguage: "Vaihda kieltä",
+        activeLanguage: "Suomi valittuna",
+      },
+      sv: {
+        skipLabel: "Hoppa till huvudinnehåll",
+        changeLanguage: "Ändra Språk",
+        activeLanguage: "Svenska valt",
+      },
+      en: {
+        skipLabel: "Skip to main content",
+        changeLanguage: "Change language",
+        activeLanguage: "English selected",
+      },
+    }
      */
-    this.accessibleI18nLabelsDefault = {
+    this.accessibleI18nLabelsDefaults = {
       fi: {
         skipLabel: "Siirry pääsisältöön",
         changeLanguage: "Vaihda kieltä",
@@ -91,7 +107,7 @@ export class DuetHeader {
       },
     }
      */
-    this.accessibleI18nLabels = getLocaleString(this.accessibleI18nLabelsDefault, this.language);
+    this.accessibleI18nLabels = getLocaleString(this.accessibleI18nLabelsDefaults);
     /**
      * Property to change accessibleLabelExternal defaults on the component.
      * normally you would handle these strings on an application level and override @accessibleLabelExternal when needed
@@ -107,7 +123,7 @@ export class DuetHeader {
      * Property to change accessibleLabel defaults on the component.
      * normally you would handle these strings on an application level and override @accessibleLabel when needed
      */
-    this.accessibleLabelDefault = {
+    this.accessibleLabelDefaults = {
       fi: "Valikko",
       sv: "Meny",
       en: "Menu",
@@ -121,7 +137,7 @@ export class DuetHeader {
       en: "Menu",
     }
      */
-    this.accessibleLabel = getLocaleString(this.accessibleLabelDefault);
+    this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
     /**
      * URL that the logo link points to.
      */
@@ -509,12 +525,12 @@ export class DuetHeader {
       "reflect": false,
       "defaultValue": "getLanguage()"
     },
-    "accessibleI18nLabelsDefault": {
-      "type": "unknown",
+    "accessibleI18nLabelsDefaults": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "Record<DuetLanguage, I18nText>",
-        "resolved": "{ fi: I18nText; en: I18nText; sv: I18nText; }",
+        "original": "| string\n    | Record<DuetLanguage, I18nText>",
+        "resolved": "string | { fi: I18nText; en: I18nText; sv: I18nText; }",
         "references": {
           "Record": {
             "location": "global"
@@ -531,9 +547,14 @@ export class DuetHeader {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Property to change accessibleI18nLabels defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleI18nLabels when needed"
+        "tags": [{
+            "text": "{\nfi: {\nskipLabel: \"Siirry p\u00E4\u00E4sis\u00E4lt\u00F6\u00F6n\",\nchangeLanguage: \"Vaihda kielt\u00E4\",\nactiveLanguage: \"Suomi valittuna\",\n},\nsv: {\nskipLabel: \"Hoppa till huvudinneh\u00E5ll\",\nchangeLanguage: \"\u00C4ndra Spr\u00E5k\",\nactiveLanguage: \"Svenska valt\",\n},\nen: {\nskipLabel: \"Skip to main content\",\nchangeLanguage: \"Change language\",\nactiveLanguage: \"English selected\",\n},\n}",
+            "name": "default"
+          }],
+        "text": "Default strings for accessibleI18nLabels"
       },
+      "attribute": "accessible-labels-default",
+      "reflect": false,
       "defaultValue": "{\n    fi: {\n      skipLabel: \"Siirry p\u00E4\u00E4sis\u00E4lt\u00F6\u00F6n\",\n      changeLanguage: \"Vaihda kielt\u00E4\",\n      activeLanguage: \"Suomi valittuna\",\n    },\n    sv: {\n      skipLabel: \"G\u00E5 till huvudinneh\u00E5ll\",\n      changeLanguage: \"\u00C4ndra Spr\u00E5k\",\n      activeLanguage: \"Svenska valt\",\n    },\n    en: {\n      skipLabel: \"Skip to main content\",\n      changeLanguage: \"Change language\",\n      activeLanguage: \"English selected\",\n    },\n  }"
     },
     "accessibleI18nLabels": {
@@ -557,14 +578,14 @@ export class DuetHeader {
           }],
         "text": "Adds i18n translations of all internally used textStrings"
       },
-      "defaultValue": "getLocaleString(this.accessibleI18nLabelsDefault, this.language)"
+      "defaultValue": "getLocaleString(\n    this.accessibleI18nLabelsDefaults\n  )"
     },
     "accessibleLabelExternalDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -581,6 +602,8 @@ export class DuetHeader {
           }],
         "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
       },
+      "attribute": "accessible-label-external-default",
+      "reflect": false,
       "defaultValue": "DuetStringsExternalDefaults"
     },
     "accessibleLabelExternal": {
@@ -604,12 +627,12 @@ export class DuetHeader {
       "reflect": false,
       "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
     },
-    "accessibleLabelDefault": {
-      "type": "unknown",
+    "accessibleLabelDefaults": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -623,6 +646,8 @@ export class DuetHeader {
         "tags": [],
         "text": "Property to change accessibleLabel defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabel when needed"
       },
+      "attribute": "accessible-label-default",
+      "reflect": false,
       "defaultValue": "{\n    fi: \"Valikko\",\n    sv: \"Meny\",\n    en: \"Menu\",\n  }"
     },
     "accessibleLabel": {
@@ -644,7 +669,7 @@ export class DuetHeader {
       },
       "attribute": "accessible-label",
       "reflect": false,
-      "defaultValue": "getLocaleString(this.accessibleLabelDefault)"
+      "defaultValue": "getLocaleString(this.accessibleLabelDefaults)"
     },
     "user": {
       "type": "any",

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

@@ -36,6 +36,7 @@
   color: #00294d;
   text-decoration: none;
   letter-spacing: -0.01rem;
+  word-break: break-word;
 }
 @media (min-width: 36em) {
   .duet-heading {

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

@@ -75,15 +75,15 @@ export class DuetHero {
      */
     this.language = getLanguage();
     /**
-     * Property to change accessibleLabelExternal defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabelExternal when needed
+     * Defaults for accessibleLabelExternal
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
      */
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
     /**
      * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
      * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
      */
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, this.language);
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
     /**
      * URL that the button links to.
      */
@@ -498,11 +498,11 @@ export class DuetHero {
       "defaultValue": "getLanguage()"
     },
     "accessibleLabelExternalDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -513,9 +513,14 @@ export class DuetHero {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
+        "tags": [{
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
+            "name": "default"
+          }],
+        "text": "Defaults for accessibleLabelExternal"
       },
+      "attribute": "accessible-label-external-default",
+      "reflect": false,
       "defaultValue": "DuetStringsExternalDefaults"
     },
     "accessibleLabelExternal": {
@@ -537,7 +542,7 @@ export class DuetHero {
       },
       "attribute": "accessible-label-external",
       "reflect": false,
-      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults, this.language)"
+      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
     },
     "buttonUrl": {
       "type": "string",

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

@@ -39,7 +39,7 @@ 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://localhost:3334/icons/lib/assets/${iconName}.svg`;
+  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)) {

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

@@ -62,10 +62,12 @@ label {
   line-height: 1.25;
   color: #00294d;
   text-align: left;
+  word-break: break-word;
 }
 label span {
   font-size: 1rem;
   font-weight: 600 !important;
+  word-break: break-word;
 }
 
 :host(.duet-label-small) label {

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

@@ -16,8 +16,7 @@ export class DuetLink {
      */
     this.language = getLanguage();
     /**
-     * Property to change accessibleLabelExternal defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabelExternal when needed
+     * Defaults for accessibleLabelExternal
      * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
      */
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
@@ -25,7 +24,7 @@ export class DuetLink {
      * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
      * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
      */
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, this.language);
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
     /**
      * Theme of the button.
      */
@@ -65,9 +64,7 @@ export class DuetLink {
         }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el) },
         h("slot", null),
         Build.isBrowser && this.external && (h(Fragment, null,
-          h("duet-visually-hidden", null,
-            ", ",
-            this.accessibleLabelExternal),
+          h("duet-visually-hidden", null, this.accessibleLabelExternal),
           h("span", { class: "duet-link-external" },
             h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))));
   }
@@ -128,11 +125,11 @@ export class DuetLink {
       "defaultValue": "getLanguage()"
     },
     "accessibleLabelExternalDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -147,8 +144,10 @@ export class DuetLink {
             "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
             "name": "default"
           }],
-        "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
+        "text": "Defaults for accessibleLabelExternal"
       },
+      "attribute": "accessible-label-external-default",
+      "reflect": false,
       "defaultValue": "DuetStringsExternalDefaults"
     },
     "accessibleLabelExternal": {
@@ -170,7 +169,7 @@ export class DuetLink {
       },
       "attribute": "accessible-label-external",
       "reflect": false,
-      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults, this.language)"
+      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
     },
     "identifier": {
       "type": "string",

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.
      */
@@ -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": [{
+            "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }",
+            "name": "default"
+          }],
+        "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": {
@@ -315,7 +320,7 @@ export class DuetModal {
       },
       "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-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": [{
+            "text": "{en: \"No notifications\", fi: \"Ei ilmoituksia\", sv: \"Inga notifikationer\"}",
+            "name": "default"
+          }],
+        "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": {
@@ -256,7 +261,7 @@ export class DuetNotificationDrawer {
       },
       "attribute": "accessible-label-notifications",
       "reflect": false,
-      "defaultValue": "getLocaleString(\n    this.accessibleLabelNotificationsDefaults,\n    this.language\n  )"
+      "defaultValue": "getLocaleString(this.accessibleLabelNotificationsDefaults)"
     },
     "badge": {
       "type": "boolean",