@duetds/components 4.30.0 → 4.33.0

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.
      */
@@ -497,11 +513,11 @@ export class DuetHeader {
       "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."
       },
@@ -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": [{
+            "name": "default",
+            "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}"
+          }],
+        "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": {
@@ -552,19 +573,19 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "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"
+            "name": "default",
+            "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}"
           }],
         "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",
@@ -576,11 +597,13 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
         "text": "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": {
@@ -595,8 +618,8 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
         "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
       },
@@ -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": {
@@ -637,14 +662,14 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{\nfi: \"Valikko\",\nsv: \"Meny\",\nen: \"Menu\",\n}",
-            "name": "default"
+            "name": "default",
+            "text": "{\nfi: \"Valikko\",\nsv: \"Meny\",\nen: \"Menu\",\n}"
           }],
         "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",
@@ -858,8 +883,8 @@ export class DuetHeader {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "in favour of more specific events like duetLogoClick.\nCallback for when a user is about to navigate to another page. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "in favour of more specific events like duetLogoClick.\nCallback for when a user is about to navigate to another page. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
           }],
         "text": ""
       },

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 {
@@ -52,6 +53,9 @@
   padding-bottom: 20px;
   border-bottom: 1px solid #e1e3e6;
 }
+.duet-heading.duet-heading-border.duet-heading-border-solid {
+  border-bottom-color: #657787;
+}
 .duet-heading.duet-heading-hyphenate {
   -webkit-hyphens: auto;
   hyphens: auto;

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

@@ -16,7 +16,7 @@ export class DuetHeading {
      */
     this.margin = "auto";
     /**
-     * Enable or disable the border underneath the heading.
+     * Enable or disable the border underneath the heading, solid will darken the border
      */
     this.border = false;
     /**
@@ -53,7 +53,8 @@ export class DuetHeading {
     const color = getColorByName(this.color);
     return (h(TagName, { class: {
         "duet-heading": true,
-        "duet-heading-border": this.border,
+        "duet-heading-border": this.border !== false,
+        "duet-heading-border-solid": this.border === "solid",
         "duet-semibold": this.weight === "semibold",
         "duet-heading-hyphenate": this.hyphenate,
         "duet-m-0": this.margin === "none",
@@ -140,18 +141,18 @@ export class DuetHeading {
       "reflect": false
     },
     "border": {
-      "type": "boolean",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "boolean | \"solid\"",
+        "resolved": "\"solid\" | boolean",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Enable or disable the border underneath the heading."
+        "text": "Enable or disable the border underneath the heading, solid will darken the border"
       },
       "attribute": "border",
       "reflect": false,

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

@@ -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.
      */
@@ -485,11 +485,11 @@ export class DuetHero {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
           }, {
-            "text": "\"fi\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"fi\""
           }],
         "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
       },
@@ -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": [{
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+          }],
+        "text": "Defaults for accessibleLabelExternal"
       },
+      "attribute": "accessible-label-external-default",
+      "reflect": false,
       "defaultValue": "DuetStringsExternalDefaults"
     },
     "accessibleLabelExternal": {
@@ -530,14 +535,14 @@ export class DuetHero {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
         "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
       },
       "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,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
+import { Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
@@ -58,7 +58,7 @@ export class DuetIcon {
     if (this.src && this.icon) {
       console.warn("[DUET COMPONENTS]: <duet-icon> should have either have src or icon attributes, but not both. icon attribute will take precedence", "icon:", this.icon, "src:", this.src);
     }
-    this.loadIcon();
+    return this.loadIcon();
   }
   async loadIcon() {
     // static icon known at build-time, so we can set it synchronously
@@ -66,10 +66,6 @@ export class DuetIcon {
       this.svgContent = this.icon;
       return;
     }
-    // on server, don't make requests
-    if (!Build.isBrowser) {
-      return;
-    }
     // dynamically load icon from url
     const src = this.src ? this.src : buildIconUrl(this.name);
     try {

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

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

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

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

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

@@ -140,7 +140,7 @@ export class DuetInput {
       // (in webkit based browsers settings value trigger cursor position and will set it to EndOfText)
       restoreCursor();
     }
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
     const emitEvent = () => this.duetChange.emit({
       value: this.value,
       component: "duet-input",
@@ -159,7 +159,7 @@ export class DuetInput {
   componentWillLoad() {
     inheritGlobalTheme(this);
     this.disallowedPatternChange();
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
   }
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
@@ -199,8 +199,8 @@ export class DuetInput {
         h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label),
         this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
         this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)),
-        this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, size: "small" }, this.placeholder)),
         h("div", { class: "duet-input-relative" },
+          this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)),
           h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.type, class: {
               "duet-input": true,
               disabled: this.disabled,
@@ -212,7 +212,7 @@ export class DuetInput {
           this.icon && (h("div", { class: "duet-input-icon" },
             h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
           h("slot", null)),
-        h("span", { class: "duet-input-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+        h("span", { class: "duet-input-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
   }
   static get is() { return "duet-input"; }
   static get encapsulation() { return "scoped"; }

package/lib/collection/components/duet-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" })))))));
   }
@@ -115,11 +112,11 @@ export class DuetLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
           }, {
-            "text": "\"fi\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"fi\""
           }],
         "text": "The currently active language. This setting changes the external link\naccessible label to match the chosen language."
       },
@@ -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",
@@ -144,11 +141,13 @@ export class DuetLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
-        "text": "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": {
@@ -163,14 +162,14 @@ export class DuetLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
           }],
         "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
       },
       "attribute": "accessible-label-external",
       "reflect": false,
-      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults, this.language)"
+      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
     },
     "identifier": {
       "type": "string",

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

@@ -232,11 +232,11 @@ export class DuetLogo {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
           }, {
-            "text": "\"fi\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"fi\""
           }],
         "text": "The language of the logo."
       },