@duetds/components 4.28.0 → 4.31.0

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

@@ -1,9 +1,12 @@
-import { Component, Element, State, Watch, Prop, Event, h } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+/*!
+ * Built with Duet Design System
+ */
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
-import { parsePossibleJSON } from "../../utils/string-utils";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { Component, Element, Event, h, Prop, State, Watch } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
+import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { parsePossibleJSON } from "../../utils/string-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @slot default - This is an unamed slot for a text or extra button that is placed after any buttons (or list item)
  * @slot badge - This is a slot for a status badge that sits next to pre-heading inside the hero component.
@@ -67,17 +70,20 @@ export class DuetHero {
     /**
      * The currently active language. This setting changes the accessible labels to match the
      * chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
      */
     this.language = 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.
      */
@@ -478,7 +484,13 @@ export class DuetHero {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "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 accessible labels to match the\nchosen language."
       },
       "attribute": "language",
@@ -486,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",
@@ -501,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": {
@@ -517,12 +534,15 @@ export class DuetHero {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
+            "name": "default"
+          }],
         "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
       },
       "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/duet-icon.js

@@ -1,7 +1,10 @@
-import { Component, Prop, Element, Host, h, State, Build, Watch } from "@stencil/core";
-import { getColorByName } from "../../utils/token-utils";
+/*!
+ * Built with Duet Design System
+ */
+import { Build, Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
-import { fetchIconByUrl, buildIconUrl } from "./icon-utils";
+import { getColorByName } from "../../utils/token-utils";
+import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
 export class DuetIcon {
   constructor() {
     /**

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

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 const cleanupSvg = (svgContent) => {
   if (typeof document === "undefined" || !svgContent) {
     return;
@@ -32,7 +35,20 @@ const isValid = (elm) => {
   }
   return true;
 };
-export const buildIconUrl = (iconName) => `https://cdn.duetds.com/api/icons/${process.env.DUET_ICON_VERSION}/lib/assets/${iconName}.svg`;
+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;
+  }
+  else {
+    return cdnURI;
+  }
+};
 const iconCache = {};
 export function fetchIconByUrl(url) {
   if (iconCache[url]) {

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

@@ -1,9 +1,12 @@
-import { Component, Prop, Element, Method, Host, Event, Watch, h } from "@stencil/core";
-import { createID } from "../../utils/create-id";
+/*!
+ * Built with Duet Design System
+ */
 import emailIcon from "@duetds/icons/lib/assets/form-email";
 import searchIcon from "@duetds/icons/lib/assets/form-search";
+import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
+import { createID } from "../../utils/create-id";
+import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
-import { cleanValue } from "../../utils/input-utils";
 const icons = {
   search: searchIcon,
   email: emailIcon,
@@ -129,8 +132,13 @@ export class DuetInput {
     this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
   }
   valueChanged() {
-    if (this.nativeInput) {
+    var _a;
+    if (((_a = this === null || this === void 0 ? void 0 : this.nativeInput) === null || _a === void 0 ? void 0 : _a.value) !== this.value) {
+      const restoreCursor = resetCursor(this.nativeInput);
       this.nativeInput.value = this.value;
+      // restore selection position after having set value
+      // (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));
     const emitEvent = () => this.duetChange.emit({

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-label/duet-label.js

@@ -1,4 +1,7 @@
-import { Component, Host, Prop, h } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, h, Host, Prop } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetLabel {
   constructor() {

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

@@ -1,4 +1,7 @@
-import { Component, Prop, Host, Element, h } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop } from "@stencil/core";
 import isInternetExplorer from "../../utils/is-internet-explorer";
 /**
  * @slot main - The layout component’s primary content. Use this for the main content on the page.

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

@@ -1,24 +1,30 @@
-import { Component, Prop, Host, h, Build, Fragment, Method } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { Build, Component, Fragment, h, Host, Method, Prop } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
+import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetLink {
   constructor() {
     /**
      * The currently active language. This setting changes the external link
      * accessible label to match the chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
      */
     this.language = 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);
     /**
      * Theme of the button.
      */
@@ -58,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" })))))));
   }
@@ -107,7 +111,13 @@ export class DuetLink {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "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 external link\naccessible label to match the chosen language."
       },
       "attribute": "language",
@@ -115,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",
@@ -130,9 +140,14 @@ export class DuetLink {
       "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": {
@@ -146,12 +161,15 @@ export class DuetLink {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
+            "name": "default"
+          }],
         "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
       },
       "attribute": "accessible-label-external",
       "reflect": false,
-      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults, this.language)"
+      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
     },
     "identifier": {
       "type": "string",

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

@@ -1,6 +1,9 @@
-import { Component, Prop, Watch, Element, h } from "@stencil/core";
-import { watchForOptions } from "../../utils/watch-options";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Prop, Watch } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { watchForOptions } from "../../utils/watch-options";
 export class DuetList {
   constructor() {
     /**

package/lib/collection/components/duet-list-item/duet-list-item.js

@@ -1,4 +1,7 @@
-import { Component, Host, h } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, h, Host } from "@stencil/core";
 /**
  * @slot label - The list item component’s label content. Use this to put content into description list’s dt element.
  * @slot value - The list item component’s value content. Use this to put content into description list’s dd element.

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

@@ -1,8 +1,11 @@
-import { Component, Prop, Element, Method, Host, h } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { colorBrandBlue, colorBrandGrayTurva, colorGrayLightest, colorPrimaryTurva } from "@duetds/tokens";
+import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
 import { createID } from "../../utils/create-id";
-import { colorBrandGrayTurva, colorPrimaryTurva, colorGrayLightest, colorBrandBlue } from "@duetds/tokens";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getLanguage } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 const TurvaLogo = ({ inverse, logoId }) => {
   const logoColor = inverse ? colorGrayLightest : colorBrandGrayTurva;
   const textColor = inverse ? colorGrayLightest : colorPrimaryTurva;
@@ -64,6 +67,8 @@ export class DuetLogo {
     this.href = "/";
     /**
      * The language of the logo.
+     * @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();
   }
@@ -226,7 +231,13 @@ export class DuetLogo {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "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 language of the logo."
       },
       "attribute": "language",

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

@@ -1,14 +1,20 @@
-import { Event, State, Element, Component, Method, Watch, Listen, Prop, h } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { createID } from "../../utils/create-id";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
-import { isEscapeKey } from "../../utils/keyboard-utils";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
-import { getLocaleString, getLanguage } from "../../utils/language-utils";
+import { isEscapeKey } from "../../utils/keyboard-utils";
+import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
 // iOS has otherwise problems moving the focus from modal back to the original element.
 // This issue is similar to what we’ve seen in Duet Date Picker + iOS VoiceOver.
 const TRANSITION_MS = 600;
+/**
+ * @slot top - This is a slot that takes any content and will be displayed as the first thing in the hero area (typically an image)
+ */
 export class DuetModal {
   constructor() {
     var _a, _b;
@@ -41,13 +47,15 @@ export class DuetModal {
     /**
      * The currently active language. This setting also changes the logo to match
      * the chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
      */
     this.language = 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",
@@ -56,8 +64,9 @@ export class DuetModal {
      * Adds accessible label for the close icon that is only shown for screen
      * readers. This property is always required to create an accessibly interface!
      * 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.
      */
@@ -253,19 +262,25 @@ export class DuetModal {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "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 also changes the logo to match\nthe chosen language."
       },
       "attribute": "language",
       "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",
@@ -276,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": {
@@ -292,12 +312,15 @@ export class DuetModal {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }",
+            "name": "default"
+          }],
         "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

@@ -1,11 +1,16 @@
-import { h, Component, Prop, Method, Element } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Method, Prop } from "@stencil/core";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetNotification {
   constructor() {
     /**
      * The currently active language.
      * Used for announcing unread notifications to screen readers.
+     * @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();
     /**
@@ -19,6 +24,7 @@ export class DuetNotification {
     };
     /**
      * Adds accessible label for tooltip that is shown over unread counter
+     * @default { en: "Unread", fi: "Lukematon", sv: "Oläst" }
      */
     this.accessibleLabelUnread = getLocaleString(this.accessibleLabelUnreadDefaults, this.language);
     /**
@@ -97,7 +103,13 @@ export class DuetNotification {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "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.\nUsed for announcing unread notifications to screen readers."
       },
       "attribute": "language",
@@ -136,7 +148,10 @@ export class DuetNotification {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{ en: \"Unread\", fi: \"Lukematon\", sv: \"Ol\u00E4st\" }",
+            "name": "default"
+          }],
         "text": "Adds accessible label for tooltip that is shown over unread counter"
       },
       "attribute": "accessible-label-unread",

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

@@ -1,7 +1,10 @@
-import { Component, Prop, Element, h, State, Listen, Method } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
 import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { Component, Element, h, Listen, Method, Prop, State } from "@stencil/core";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 const ESC_KEY = 27;
 export class DuetNotificationDrawer {
   constructor() {
@@ -24,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",
@@ -34,8 +37,9 @@ 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.
      */
@@ -213,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",
@@ -228,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": {
@@ -244,12 +253,15 @@ export class DuetNotificationDrawer {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{en: \"No notifications\", fi: \"Ei ilmoituksia\", sv: \"Inga notifikationer\"}",
+            "name": "default"
+          }],
         "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",