@duetds/components 4.28.0 → 4.31.0

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

@@ -1,13 +1,16 @@
-import { Component, Host, Prop, Element, h, Event, State, Listen, Method, Watch } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { createID } from "../../utils/create-id";
+import { FocusGuard } from "../../utils/focus-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
+import i18n from "./date-i18n";
 import { DatePickerInput } from "./date-picker-input";
-import { addDays, startOfWeek, endOfWeek, parseDate, setMonth, setYear, clamp, inRange, endOfMonth, startOfMonth, printISODate, parseISODate, isEqual, printDate, } from "./date-utils";
 import { DatePickerMonth } from "./date-picker-month";
-import i18n from "./date-i18n";
+import { addDays, clamp, endOfMonth, endOfWeek, inRange, isEqual, parseDate, parseISODate, printDate, printISODate, setMonth, setYear, startOfMonth, startOfWeek, } from "./date-utils";
 import { createShortcuts, range } from "./utils";
-import { FocusGuard } from "../../utils/focus-utils";
 export class DuetDatePicker {
   constructor() {
     this.monthSelectId = createID("DuetDatePicker");
@@ -43,10 +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)
@@ -57,11 +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.
-     */
-    this.language = getLanguage();
     /**
      * Display the date picker input in error state along with an error message.
      */
@@ -572,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,
@@ -583,12 +653,15 @@ export class DuetDatePicker {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{ fi: \"pp.kk.vvvv\", en: \"dd.mm.yyyy\", sv: \"dd.mm.\u00E5\u00E5\u00E5\u00E5\" }",
+            "name": "default"
+          }],
         "text": "Hint text to display before the user types into the date picker input."
       },
       "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",
@@ -626,29 +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": "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-date-picker/utils.js

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 /**
  * Creates an array representing an inclusive numeric range.
  * `from` must be less than `to`

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

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

package/lib/collection/components/duet-empty-state/duet-empty-state.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 DuetEmptyState {
   constructor() {

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

@@ -1,6 +1,9 @@
-import { Component, Prop, Element, h, Host, State } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop, State } from "@stencil/core";
 import { createID } from "../../utils/create-id";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot tooltip - Use to place a tooltip alongside the fieldset label.

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

@@ -1,11 +1,14 @@
-import { Component, Element, State, Watch, Prop, Event, h, Fragment } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
 import arrowRightIcon from "@duetds/icons/lib/assets/action-arrow-right";
-import newWindowIconSmall from "@duetds/icons/lib/assets/action-new-window-small";
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window";
+import newWindowIconSmall from "@duetds/icons/lib/assets/action-new-window-small";
+import { Component, Element, Event, Fragment, 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";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { DuetStringsExternalDefaults } from "../../common-strings";
 const i18n = {
   fi: { lahi: "© LähiTapiola", turva: "© Turva" },
   sv: { lahi: "© LokalTapiola", turva: "© Turva" },
@@ -43,17 +46,21 @@ export class DuetFooter {
     /**
      * The currently active language. This setting 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 accessibleLabelExternal defaults on the component.
      * normally you would handle these strings on an application level and override @accessibleLabelExternal when needed
+     * @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.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, this.language);
     /**
      * Component event handling.
      */
@@ -247,7 +254,13 @@ export class DuetFooter {
       "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 logo to match the\nchosen language."
       },
       "attribute": "language",
@@ -272,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",
@@ -287,9 +300,14 @@ export class DuetFooter {
       "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": "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": {
@@ -303,12 +321,15 @@ export class DuetFooter {
       "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)"
+      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults, this.language)"
     },
     "menu": {
       "type": "any",

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

@@ -1,4 +1,7 @@
-import { Component, Watch, Element, Prop, Host, h } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop, Watch } from "@stencil/core";
 import { watchForOptions } from "../../utils/watch-options";
 function isGridItem(element) {
   return element.tagName.toLowerCase() === "duet-grid-item";

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

@@ -1,4 +1,7 @@
-import { Component, Prop, Host, 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 DuetGridItem {
   constructor() {

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

@@ -1,16 +1,19 @@
-import { Component, Prop, Element, Event, Method, State, Watch, Listen, h, Build, Fragment, } from "@stencil/core";
-import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
-import { parsePossibleJSON } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+/*!
+ * Built with Duet Design System
+ */
 import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import contactDropdownIcon from "@duetds/icons/lib/assets/navigation-contact-dropdown";
 import languageIcon from "@duetds/icons/lib/assets/navigation-language";
-import userIcon from "@duetds/icons/lib/assets/navigation-user";
-import logoutIcon from "@duetds/icons/lib/assets/navigation-logout";
 import loginIcon from "@duetds/icons/lib/assets/navigation-login";
-import { isSpaceKey, isEscapeKey, isArrowLeftKey, isArrowUpKey, isArrowRightKey, isArrowDownKey, } from "../../utils/keyboard-utils";
-import { getLocaleString, getLanguage } from "../../utils/language-utils";
+import logoutIcon from "@duetds/icons/lib/assets/navigation-logout";
+import userIcon from "@duetds/icons/lib/assets/navigation-user";
+import { Build, Component, Element, Event, Fragment, h, Listen, Method, Prop, State, Watch, } from "@stencil/core";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { DuetStringsExternalDefaults } from "../../common-strings";
+import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, } from "../../utils/keyboard-utils";
+import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { parsePossibleJSON } from "../../utils/string-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 const createEvent = (ev, data) => ({
   component: "duet-header",
   data,
@@ -43,13 +46,13 @@ export class DuetHeader {
     /**
      * 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 accessibleI18nLabels defaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleI18nLabels when needed
-     */
-    this.accessibleI18nLabelsDefault = {
+     * Default strings for accessibleI18nLabels
+     * @default {
       fi: {
         skipLabel: "Siirry pääsisältöön",
         changeLanguage: "Vaihda kieltä",
@@ -65,25 +68,62 @@ export class DuetHeader {
         changeLanguage: "Change language",
         activeLanguage: "English selected",
       },
+    }
+     */
+    this.accessibleI18nLabelsDefaults = {
+      fi: {
+        skipLabel: "Siirry pääsisältöön",
+        changeLanguage: "Vaihda kieltä",
+        activeLanguage: "Suomi valittuna",
+      },
+      sv: {
+        skipLabel: "Gå till huvudinnehåll",
+        changeLanguage: "Ändra Språk",
+        activeLanguage: "Svenska valt",
+      },
+      en: {
+        skipLabel: "Skip to main content",
+        changeLanguage: "Change language",
+        activeLanguage: "English selected",
+      },
     };
     /**
      * Adds i18n translations of all internally used textStrings
+     * @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.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
+     * @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);
     /**
      * 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",
@@ -91,8 +131,13 @@ export class DuetHeader {
     /**
      * Accessible label that is shown for screen reader users in the mobile
      * navigation toggle. Not visible for normal users.
+     * @default {
+      fi: "Valikko",
+      sv: "Meny",
+      en: "Menu",
+    }
      */
-    this.accessibleLabel = getLocaleString(this.accessibleLabelDefault);
+    this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
     /**
      * URL that the logo link points to.
      */
@@ -467,19 +512,25 @@ export class DuetHeader {
       "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()"
     },
-    "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"
@@ -496,10 +547,15 @@ 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"
       },
-      "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: \"Hoppa 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  }"
+      "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": {
       "type": "unknown",
@@ -516,17 +572,20 @@ export class DuetHeader {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "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": "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",
@@ -537,9 +596,14 @@ export class DuetHeader {
       "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": "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": {
@@ -553,19 +617,22 @@ export class DuetHeader {
       "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)"
     },
-    "accessibleLabelDefault": {
-      "type": "unknown",
+    "accessibleLabelDefaults": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -579,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": {
@@ -592,12 +661,15 @@ export class DuetHeader {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{\nfi: \"Valikko\",\nsv: \"Meny\",\nen: \"Menu\",\n}",
+            "name": "default"
+          }],
         "text": "Accessible label that is shown for screen reader users in the mobile\nnavigation toggle. Not visible for normal users."
       },
       "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-heading/duet-heading.js

@@ -1,7 +1,10 @@
-import { Component, Prop, Element, h } from "@stencil/core";
-import { getColorByName } from "../../utils/token-utils";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Prop } from "@stencil/core";
 import { sanitizeString } from "../../utils/string-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { getColorByName } from "../../utils/token-utils";
 export class DuetHeading {
   constructor() {
     /**