@duetds/components 7.0.13 → 7.1.1

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

@@ -3,6 +3,7 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 /**
  * @slot collapse-button-label - This is to label collapse button.
  */
@@ -48,15 +49,16 @@ export class DuetScrollable {
   componentWillLoad() {
     inheritGlobalTheme(this);
     this.hasCollapseButtonLabelSlot = Build.isServer
-      ? Array.from(this.host.children).filter(el => el.matches("[slot='collapse-button-label']")).length > 0
-      : !!this.host.querySelector(":scope > [slot='collapse-button-label']");
+      ? Array.from(this.element.children).filter(el => el.matches("[slot='collapse-button-label']")).length > 0
+      : !!this.element.querySelector(":scope > [slot='collapse-button-label']");
     const slotted = Build.isServer
-      ? Array.from(this.host.children).filter(el => el.matches("[slot='collapse-button-label']"))
-      : this.host.querySelectorAll(":scope > :not([slot='collapse-button-label'])");
+      ? Array.from(this.element.children).filter(el => el.matches("[slot='collapse-button-label']"))
+      : this.element.querySelectorAll(":scope > :not([slot='collapse-button-label'])");
     this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
   }
   componentDidLoad() {
     this.resizeObserver.observe(this.tabListElement);
+    nudge(this);
   }
   disconnectedCallback() {
     this.resizeObserver.disconnect();
@@ -66,11 +68,11 @@ export class DuetScrollable {
    */
   getLastVisibleElement() {
     const clientWidth = this.tabListElement.clientWidth;
-    const xValues = Array.from(this.host.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
+    const xValues = Array.from(this.element.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
     return xValues;
   }
   getFirstVisibleElement() {
-    const buttonCollection = this.host.querySelectorAll("button");
+    const buttonCollection = this.element.querySelectorAll("button");
     // reverse the array because we want the first invisible element form the middle, not the first in the list
     const arrayOfXValues = Array.from(buttonCollection).map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
     const xValues = arrayOfXValues.findIndex(element => {
@@ -105,7 +107,7 @@ export class DuetScrollable {
     if (index < 0) {
       index = 0;
     }
-    const buttons = this.host.querySelectorAll("button");
+    const buttons = this.element.querySelectorAll("button");
     // store previous position
     let prevPosition = buttons[0].getBoundingClientRect().x;
     // iterations to run
@@ -190,7 +192,8 @@ export class DuetScrollable {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -304,7 +307,7 @@ export class DuetScrollable {
       "childrenData": {}
     };
   }
-  static get elementRef() { return "host"; }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "selected",

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

@@ -0,0 +1,22 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-layout", () => {
+  it("should render a section layout", async () => {
+    const page = await createPage(`<duet-section-layout><div>content</div></duet-section-layout>`);
+    const component = await page.find("duet-section-layout");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-section-layout margin="none"><div>content</div></duet-section-layout>`);
+    const element = await page.find("duet-section-layout >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that middle aligns the layout", async () => {
+    const page = await createPage(`<duet-section-layout middle><div>content</div></duet-section-layout>`);
+    const element = await page.find("duet-section-layout");
+    expect(element).toHaveClass("duet-middle");
+  });
+});

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

@@ -44,7 +44,8 @@ export class DuetSectionLayout {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },

package/lib/collection/components/duet-select/duet-select.e2e.js

@@ -0,0 +1,211 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-select", () => {
+  const setSelectItems = (el) => {
+    el.items = [
+      { label: "Helsinki", value: "1" },
+      { label: "Tampere", value: "2" },
+      { label: "Vantaa", value: "3" },
+      { label: "Espoo", value: "4" },
+    ];
+  };
+  it("should render a select", async () => {
+    const page = await createPage(`<duet-select></duet-select>`);
+    const component = await page.find("duet-select");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that renders label", async () => {
+    const page = await createPage(`<duet-select label="test"></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select duet-label label");
+    expect(element.innerText).toEqual("test");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-select margin="none"></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that renders aria-controls", async () => {
+    const page = await createPage(`<duet-select accessible-controls="test"></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select select");
+    expect(element).toEqualAttribute("aria-controls", "test");
+  });
+  it("should provide a property that renders aria-activedescendant", async () => {
+    const page = await createPage(`<duet-select accessible-active-descendant="test"></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select select");
+    expect(element.getAttribute("aria-activedescendant")).not.toBeNull();
+  });
+  it("should provide a property that renders aria-owns", async () => {
+    const page = await createPage(`<duet-select accessible-owns="test"></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select select");
+    expect(element.getAttribute("aria-owns")).not.toBeNull();
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-select theme="turva"></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select .duet-select-container");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that expands the select to fill 100% width", async () => {
+    const page = await createPage(`<duet-select expand></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select");
+    expect(element).toHaveClass("duet-expand");
+  });
+  it("should provide a property that makes the select disabled", async () => {
+    const page = await createPage(`<duet-select disabled></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select select");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that adds an ID for the select", async () => {
+    const page = await createPage(`<duet-select identifier="test"></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select select");
+    expect(element).toEqualAttribute("id", "test");
+  });
+  it("should provide a property that makes the label hidden", async () => {
+    const page = await createPage(`<duet-select label-hidden></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select .duet-select-container");
+    expect(element).toHaveClass("duet-label-hidden");
+  });
+  it("should provide a property that adds name for the select", async () => {
+    const page = await createPage(`<duet-select name="test"></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select select");
+    expect(element.getAttribute("name")).not.toBeNull();
+  });
+  it("should provide a property that adds role for the select", async () => {
+    const page = await createPage(`<duet-select role="test"></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select select");
+    expect(element.getAttribute("role")).not.toBeNull();
+  });
+  it("should provide a property that sets the select items", async () => {
+    const page = await createPage(`<duet-select></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select select option:first-child");
+    expect(element).toEqualAttribute("value", "1");
+  });
+  it("should provide a property that sets tooltip", async () => {
+    const page = await createPage(`<duet-select tooltip="test"></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select duet-tooltip");
+    expect(element).not.toBeNull();
+  });
+  it("should associate the tooltip with the label", async () => {
+    const page = await createPage(`<duet-select label="test label" tooltip="test"></duet-select>`);
+    const label = await page.find("label");
+    const tooltip = await page.find("duet-tooltip");
+    const tooltipInputLabel = await tooltip.getProperty("accessibleInputLabel");
+    expect(tooltipInputLabel).not.toBeNull();
+    expect(label.textContent).toBe(tooltipInputLabel);
+  });
+  it("should not render tooltip if the property isn’t used", async () => {
+    const page = await createPage(`<duet-select id="test"></duet-select>`);
+    await page.$eval("duet-select", setSelectItems);
+    await page.waitForChanges();
+    const element = await page.find("duet-select duet-tooltip");
+    expect(element).toBeNull();
+  });
+  it("should allow options to be grouped", async () => {
+    const page = await createPage(`<duet-select id="test"></duet-select>`);
+    await page.$eval("duet-select", (el) => {
+      el.items = [
+        { label: "Helsinki", value: "1" },
+        {
+          label: "Grouped options",
+          options: [
+            { label: "Tampere", value: "2" },
+            { label: "Vantaa", value: "3" },
+          ],
+        },
+        { label: "Espoo", value: "4" },
+      ];
+    });
+    await page.waitForChanges();
+    const optgroup = await page.find("duet-select optgroup");
+    expect(optgroup).toEqualAttribute("label", "Grouped options");
+  });
+  it("should allow for options and optgroups to be disabled", async () => {
+    const page = await createPage(`<duet-select id="test"></duet-select>`);
+    await page.$eval("duet-select", (el) => {
+      el.items = [
+        { label: "Helsinki", value: "1", disabled: true },
+        {
+          label: "Grouped options",
+          disabled: true,
+          options: [
+            { label: "Tampere", value: "2" },
+            { label: "Vantaa", value: "3" },
+          ],
+        },
+        { label: "Espoo", value: "4" },
+      ];
+    });
+    await page.waitForChanges();
+    const optgroup = await page.find("duet-select optgroup");
+    const option = await page.find("duet-select option");
+    expect(option).toEqualAttribute("value", "1");
+    expect(option).toHaveAttribute("disabled");
+    expect(optgroup).toHaveAttribute("disabled");
+  });
+  it("supports passing items as a JSON string", async () => {
+    const items = [
+      { label: "Helsinki", value: "1" },
+      { label: "Tampere", value: "2" },
+      { label: "Vantaa", value: "3" },
+      { label: "Espoo", value: "4" },
+    ];
+    const page = await createPage(`<duet-select id="test" items='${JSON.stringify(items)}'></duet-select>`);
+    const options = await page.findAll("duet-select option");
+    expect(options.length).toBe(items.length);
+    options.forEach((option, i) => {
+      expect(option).toEqualAttribute("value", items[i].value);
+      expect(option).toEqualText(items[i].label);
+    });
+  });
+  it("should automatically refresh itself when content changes", async () => {
+    const page = await createPage(`<duet-select></duet-select>`);
+    await page.$eval("duet-select", (el) => {
+      el.items = [
+        { label: "Helsinki", value: "1" },
+        { label: "Tampere", value: "2" },
+        { label: "Vantaa", value: "3" },
+        { label: "Espoo", value: "4" },
+      ];
+    });
+    const element = await page.find("duet-select");
+    // should be updated when setting the *attribute*
+    element.setAttribute("items", '[{ "label": "test", "value": "#" }]');
+    await page.waitForChanges();
+    const test = await page.find("duet-select option");
+    expect(test).toEqualText("test");
+    // should also be updated when setting the label *property*
+    element.setProperty("items", [{ label: "test 2", value: "#" }]);
+    await page.waitForChanges();
+    expect(test).toEqualText("test 2");
+  });
+});

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

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
+import { nudge } from "../../utils/nudge";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function isOptionGroup(item) {
   return "options" in item;
@@ -109,6 +110,9 @@ export class DuetSelect {
     this.isCaptionVisible = !!this.caption;
     this.refresh();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus on the specified `duet-select`. Use this method instead of the global
    * `select.focus()`.
@@ -184,7 +188,8 @@ export class DuetSelect {
           "references": {
             "DuetSelectVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
+              "id": "src/components/duet-select/duet-select.tsx::DuetSelectVariation"
             }
           }
         },
@@ -241,7 +246,8 @@ export class DuetSelect {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -369,7 +375,8 @@ export class DuetSelect {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -497,7 +504,8 @@ export class DuetSelect {
           "references": {
             "DuetSelectItems": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
+              "id": "src/components/duet-select/duet-select.tsx::DuetSelectItems"
             }
           }
         },
@@ -608,7 +616,8 @@ export class DuetSelect {
           "references": {
             "DuetTooltipDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTooltipDirection"
             }
           }
         },
@@ -646,7 +655,8 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
+              "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
             }
           }
         }
@@ -666,7 +676,8 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
+              "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
             }
           }
         }
@@ -686,7 +697,8 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
+              "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
             }
           }
         }
@@ -703,10 +715,12 @@ export class DuetSelect {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -52,7 +52,8 @@ export class DuetShapedImage {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -92,7 +93,8 @@ export class DuetShapedImage {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -6,6 +6,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetShowMore {
   constructor() {
     this.contentId = createID("DuetShowMore");
@@ -72,6 +73,9 @@ export class DuetShowMore {
     inheritGlobalTheme(this);
     this.buttonAriaOpen = this.open;
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "showMoreLabel", defaults: "showMoreLabelDefaults" },
@@ -118,7 +122,8 @@ export class DuetShowMore {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -141,7 +146,8 @@ export class DuetShowMore {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -170,7 +176,8 @@ export class DuetShowMore {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -209,7 +216,8 @@ export class DuetShowMore {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -248,7 +256,8 @@ export class DuetShowMore {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -287,7 +296,8 @@ export class DuetShowMore {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -326,7 +336,8 @@ export class DuetShowMore {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -382,7 +393,8 @@ export class DuetShowMore {
           "references": {
             "DuetShowMoreToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-show-more/duet-show-more.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-show-more/duet-show-more.tsx",
+              "id": "src/components/duet-show-more/duet-show-more.tsx::DuetShowMoreToggleEvent"
             }
           }
         }

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

@@ -7,6 +7,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSlideout {
   constructor() {
@@ -111,6 +112,7 @@ export class DuetSlideout {
       this.handleBodyScrolling();
     });
     this.intersectionObserver.observe(this.dialog);
+    nudge(this);
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -184,7 +186,8 @@ export class DuetSlideout {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -225,7 +228,8 @@ export class DuetSlideout {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -264,7 +268,8 @@ export class DuetSlideout {
           "references": {
             "DuetSlideoutEventDetails": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx",
+              "id": "src/components/duet-slideout/duet-slideout.tsx::DuetSlideoutEventDetails"
             }
           }
         }
@@ -278,7 +283,8 @@ export class DuetSlideout {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -297,10 +303,12 @@ export class DuetSlideout {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetSlideoutLang {
   constructor() {
     /**
@@ -23,6 +24,9 @@ export class DuetSlideoutLang {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }
@@ -60,7 +64,8 @@ export class DuetSlideoutLang {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },

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

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 export class DuetSlideoutLink {
   constructor() {
     this.accessibleLabel = undefined;
@@ -21,6 +22,9 @@ export class DuetSlideoutLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -73,7 +77,8 @@ export class DuetSlideoutLink {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },