@duetds/components 7.0.13 → 7.1.1

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

@@ -6,6 +6,7 @@ import { Build, Fragment, h, Host } from "@stencil/core";
 import { duetBlock, duetHeadingLevels, inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
+import { nudge } from "../../utils/nudge";
 import { sanitizeString } from "../../utils/string-utils";
 import { getColorByName } from "../../utils/token-utils";
 /**
@@ -60,6 +61,9 @@ export class DuetCard {
       : !!this.element.querySelector(":scope > [slot='heading']");
     this.hasFooter = !!this.element.querySelector("[slot='footer']");
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   renderHeading() {
     const safeHeadingLevel = sanitizeString(this.headingLevel);
     const HeadingTag = [...duetHeadingLevels, duetBlock].some(tag => tag === safeHeadingLevel) ? safeHeadingLevel : "h2";
@@ -183,7 +187,8 @@ export class DuetCard {
           "references": {
             "DuetCardVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx",
+              "id": "src/components/duet-card/duet-card.tsx::DuetCardVariation"
             }
           }
         },
@@ -242,7 +247,8 @@ export class DuetCard {
           "references": {
             "DuetCardHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetCardHeadingLevel"
             }
           }
         },
@@ -265,7 +271,8 @@ export class DuetCard {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -287,7 +294,8 @@ export class DuetCard {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -326,7 +334,8 @@ export class DuetCard {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -349,7 +358,8 @@ export class DuetCard {
           "references": {
             "DuetCardPadding": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx",
+              "id": "src/components/duet-card/duet-card.tsx::DuetCardPadding"
             }
           }
         },
@@ -372,7 +382,8 @@ export class DuetCard {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -395,7 +406,8 @@ export class DuetCard {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -435,7 +447,8 @@ export class DuetCard {
           "references": {
             "DuetBreakpoints": {
               "location": "import",
-              "path": "../../utils/token-utils"
+              "path": "../../utils/token-utils",
+              "id": "src/utils/token-utils.ts::DuetBreakpoints"
             }
           }
         },
@@ -468,7 +481,8 @@ export class DuetCard {
           "references": {
             "DuetCardToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-card/duet-card.tsx",
+              "id": "src/components/duet-card/duet-card.tsx::DuetCardToggleEvent"
             }
           }
         }
@@ -485,10 +499,12 @@ export class DuetCard {
             }],
           "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-checkbox/duet-checkbox.e2e.js

@@ -0,0 +1,112 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-checkbox", () => {
+  it("should render a checkbox", async () => {
+    const page = await createPage(`<duet-checkbox></duet-checkbox>`);
+    const component = await page.find("duet-checkbox");
+    expect(component).not.toBeNull();
+  });
+  it("should provide a property that renders label", async () => {
+    const page = await createPage(`<duet-checkbox label="test"></duet-checkbox>`);
+    const element = await page.find("duet-checkbox label");
+    expect(element.innerText).toEqual("test");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-checkbox margin="none"></duet-checkbox>`);
+    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-checkbox accessible-controls="test"></duet-checkbox>`);
+    const element = await page.find("duet-checkbox .duet-checkbox");
+    expect(element.getAttribute("aria-controls")).toEqual("test");
+  });
+  it("should provide a property that renders aria-activedescendant", async () => {
+    const page = await createPage(`<duet-checkbox accessible-active-descendant="test"></duet-checkbox>`);
+    const element = await page.find("duet-checkbox .duet-checkbox");
+    expect(element.getAttribute("aria-activedescendant")).not.toBeNull();
+  });
+  it("should provide a property that renders aria-owns", async () => {
+    const page = await createPage(`<duet-checkbox accessible-owns="test"></duet-checkbox>`);
+    const element = await page.find("duet-checkbox .duet-checkbox");
+    expect(element.getAttribute("aria-owns")).not.toBeNull();
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-checkbox theme="turva"></duet-checkbox>`);
+    const element = await page.find("duet-checkbox .duet-checkbox-container");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that makes the  disabled", async () => {
+    const page = await createPage(`<duet-checkbox disabled></duet-checkbox>`);
+    const element = await page.find("duet-checkbox .duet-checkbox");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that adds an ID for the checkbox", async () => {
+    const page = await createPage(`<duet-checkbox identifier="test"></duet-checkbox>`);
+    const element = await page.find("duet-checkbox .duet-checkbox");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that makes checkbox required", async () => {
+    const page = await createPage(`<duet-checkbox required></duet-checkbox>`);
+    const element = await page.find("duet-checkbox .duet-checkbox");
+    expect(element.getAttribute("required")).not.toBeNull();
+  });
+  it("should provide a property that adds name for the checkbox", async () => {
+    const page = await createPage(`<duet-checkbox name="test"></duet-checkbox>`);
+    const element = await page.find("duet-checkbox .duet-checkbox");
+    expect(element.getAttribute("name")).not.toBeNull();
+  });
+  it("should provide a property that adds role for the checkbox", async () => {
+    const page = await createPage(`<duet-checkbox role="test"></duet-checkbox>`);
+    const element = await page.find("duet-checkbox .duet-checkbox");
+    expect(element.getAttribute("role")).not.toBeNull();
+  });
+  it("should provide a property that checks the checkbox", async () => {
+    const page = await createPage(`<duet-checkbox checked></duet-checkbox>`);
+    const element = (await page.find("duet-checkbox .duet-checkbox"));
+    expect(element.checked).not.toBeNull();
+  });
+  it("should provide a property that adds value for the checkbox", async () => {
+    const page = await createPage(`<duet-checkbox value="test"></duet-checkbox>`);
+    const element = await page.find("duet-checkbox .duet-checkbox");
+    expect(element.getAttribute("value")).not.toBeNull();
+  });
+  it("should provide a property that changes tabindex of checkbox", async () => {
+    const page = await createPage(`<duet-checkbox accessible-index="-1"></duet-checkbox>`);
+    const element = await page.find("duet-checkbox .duet-checkbox");
+    expect(element.getAttribute("tabindex")).not.toBeNull();
+  });
+  it("should only raise an event on user interaction, not when changing checked property programmatically", async () => {
+    const page = await createPage(`<duet-checkbox label="Checked" value="test"></duet-checkbox>`);
+    const checkbox = await page.find("duet-checkbox");
+    const changeEventSpy = await checkbox.spyOnEvent("duetChange");
+    checkbox.setProperty("checked", true);
+    await page.waitForChanges();
+    expect(changeEventSpy).not.toHaveReceivedEvent();
+    await checkbox.click();
+    expect(changeEventSpy).toHaveReceivedEvent();
+  });
+  it("should raise an event on focus", async () => {
+    const page = await createPage(`<duet-checkbox label="Checked" value="test"></duet-checkbox>`);
+    const checkbox = await page.find("duet-checkbox");
+    const focusEventSpy = await checkbox.spyOnEvent("duetFocus");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(focusEventSpy).toHaveReceivedEvent();
+  });
+  it("should raise an event on blur", async () => {
+    const page = await createPage(`
+      <duet-checkbox label="Checked" value="test"></duet-checkbox>
+      <button>another focusable element</button>
+    `);
+    const checkbox = await page.find("duet-checkbox");
+    const blurEventSpy = await checkbox.spyOnEvent("duetFocus");
+    // focus then blur the checkbox
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(blurEventSpy).toHaveReceivedEvent();
+  });
+});

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

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
+import { nudge } from "../../utils/nudge";
 export class DuetCheckbox {
   constructor() {
     /**
@@ -68,6 +69,9 @@ export class DuetCheckbox {
       this.value = this.identifier;
     }
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus on the specified `duet-checkbox`. Use this method instead of the global
    * `input.focus()`.
@@ -127,7 +131,8 @@ export class DuetCheckbox {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -308,7 +313,8 @@ export class DuetCheckbox {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -481,7 +487,8 @@ export class DuetCheckbox {
           "references": {
             "DuetCheckboxEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+              "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
             }
           }
         }
@@ -501,7 +508,8 @@ export class DuetCheckbox {
           "references": {
             "DuetCheckboxEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+              "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
             }
           }
         }
@@ -521,7 +529,8 @@ export class DuetCheckbox {
           "references": {
             "DuetCheckboxEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+              "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
             }
           }
         }
@@ -538,10 +547,12 @@ export class DuetCheckbox {
             }],
           "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-chip/duet-chip.e2e.js

@@ -0,0 +1,46 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-chip", () => {
+  it("should render a checkbox", async () => {
+    const page = await createPage(`<duet-chip></duet-chip>`);
+    const component = await page.find("duet-chip");
+    expect(component).not.toBeNull();
+  });
+  it("should provide a property that renders aria-label", async () => {
+    const page = await createPage(`<duet-chip accessible-label="test">chip</duet-chip>`);
+    const element = await page.find("duet-chip >>> .duet-chip-container [aria-label]");
+    expect(element.getAttribute("aria-label")).toEqual("test");
+  });
+  it("should render a checkbox input with variation 'filter'", async () => {
+    const page = await createPage(`<duet-chip variation="filter">chip</duet-chip>`);
+    const element = await page.find(`duet-chip >>> input[type="checkbox"]`);
+    expect(element).not.toBeNull();
+  });
+  it("should render a check-mark icon with variation 'filter'", async () => {
+    const page = await createPage(`<duet-chip variation="filter">chip</duet-chip>`);
+    const element = await page.find(`duet-chip >>> duet-icon.check-mark`);
+    expect(element).not.toBeNull();
+  });
+  it("should render an icon in a filter chip when provided", async () => {
+    const page = await createPage(`<duet-chip variation="filter" icon="category-car">chip</duet-chip>`);
+    const element = await page.find(`duet-chip >>> duet-icon:not(.check-mark)`);
+    expect(element).not.toBeNull();
+  });
+  it("should render a button with variation 'button'", async () => {
+    const page = await createPage(`<duet-chip variation="button">chip</duet-chip>`);
+    const element = await page.find(`duet-chip >>> button`);
+    expect(element).not.toBeNull();
+  });
+  it("should render a radio input with variation 'radio'", async () => {
+    const page = await createPage(`<duet-chip variation="radio">chip</duet-chip>`);
+    const element = await page.find(`duet-chip >>> input[type="radio"]`);
+    expect(element).not.toBeNull();
+  });
+  it("should render an icon in a button chip when provided", async () => {
+    const page = await createPage(`<duet-chip variation="button" icon="category-car">chip</duet-chip>`);
+    const element = await page.find(`duet-chip >>> duet-icon`);
+    expect(element).not.toBeNull();
+  });
+});

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

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
+import { nudge } from "../../utils/nudge";
 export class DuetChip {
   constructor() {
     /**
@@ -11,12 +12,11 @@ export class DuetChip {
      */
     this.chipId = createID("DuetChip");
     this.popupSetUp = () => {
-      const popup = this.element.querySelector("duet-popup-menu");
+      const popup = document.querySelector(`duet-popup-menu#${this.popup}`);
       if (popup) {
-        this.popup = popup;
+        this.popupElement = popup;
         popup.controller = this.element;
-        const labelSpan = this.element.querySelector("span");
-        const originalText = labelSpan.textContent;
+        const originalText = this.element.textContent;
         const originalValue = this.value;
         if (!popup.id) {
           popup.id = "popup-menu";
@@ -36,13 +36,13 @@ export class DuetChip {
             if (!item.active) {
               clearActive();
               item.active = true;
-              labelSpan.textContent = item.innerText;
+              this.element.textContent = item.innerText;
               this.value = value;
               this.checked = true;
             }
             else {
               clearActive();
-              labelSpan.textContent = originalText;
+              this.element.textContent = originalText;
               this.value = originalValue;
               this.checked = false;
             }
@@ -51,8 +51,8 @@ export class DuetChip {
             // Chrome will emit a separate click event on the chip after the popup is closed, resulting popup.toggle() to
             // open the popup again. Firefox does not have this behavior.
             setTimeout(() => {
-              if (this.popup.isOpen()) {
-                this.popup.hide();
+              if (this.popupElement.isOpen()) {
+                this.popupElement.hide();
               }
             });
           });
@@ -113,10 +113,10 @@ export class DuetChip {
         evt.preventDefault();
         return;
       }
-      if (this.popup) {
+      if (this.popupElement) {
         evt.stopPropagation();
         evt.preventDefault();
-        this.popup.toggle();
+        this.popupElement.toggle();
       }
     };
     /**
@@ -128,10 +128,11 @@ export class DuetChip {
       this.element.remove();
     };
     this.focus = false;
-    this.popup = undefined;
+    this.popupElement = undefined;
     this.popupOpen = undefined;
     this.accessibleLabel = undefined;
     this.variation = "button";
+    this.popup = undefined;
     this.icon = "";
     this.theme = "";
     this.identifier = undefined;
@@ -157,6 +158,9 @@ export class DuetChip {
     inheritGlobalTheme(this);
     this.popupSetUp();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus. Use this method instead of the global focus().
    */
@@ -171,7 +175,7 @@ export class DuetChip {
       [`duet-chip-${this.variation}`]: true,
       "duet-chip-focus": this.focus,
       "duet-chip-has-icon": !!this.icon,
-      "duet-chip-has-popup": this.variation === "filter" && !!this.popup,
+      "duet-chip-has-popup": this.variation === "filter" && !!this.popupElement,
       "duet-theme-turva": this.theme === "turva",
       "duet-chip-filter-checked": this.variation === "filter" && this.checked,
       "duet-chip-radio-checked": this.variation === "radio" && this.checked,
@@ -183,7 +187,7 @@ export class DuetChip {
       onBlur: this.onBlur,
       ref: el => (this.focusableElement = el),
     };
-    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popup && "menu", "aria-controls": (_a = this.popup) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popup ? (this.popupOpen ? "true" : "false") : undefined, "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popup && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("div", { class: classes }, h("input", Object.assign({ "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange, onClick: this.disabled ? evt => evt.preventDefault() : undefined }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
+    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popupElement && "menu", "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popupElement ? (this.popupOpen ? "true" : "false") : undefined, "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popupElement && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("div", { class: classes }, h("input", Object.assign({ "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange, onClick: this.disabled ? evt => evt.preventDefault() : undefined }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
   }
   static get is() { return "duet-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -225,7 +229,8 @@ export class DuetChip {
           "references": {
             "DuetChipVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+              "id": "src/components/duet-chip/duet-chip.tsx::DuetChipVariation"
             }
           }
         },
@@ -239,6 +244,23 @@ export class DuetChip {
         "reflect": false,
         "defaultValue": "\"button\""
       },
+      "popup": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id of the DuetPopupMenu that is controlled by the chip."
+        },
+        "attribute": "popup",
+        "reflect": false
+      },
       "icon": {
         "type": "string",
         "mutable": false,
@@ -248,7 +270,8 @@ export class DuetChip {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -271,7 +294,8 @@ export class DuetChip {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -377,7 +401,7 @@ export class DuetChip {
   static get states() {
     return {
       "focus": {},
-      "popup": {},
+      "popupElement": {},
       "popupOpen": {}
     };
   }
@@ -398,7 +422,8 @@ export class DuetChip {
           "references": {
             "DuetChipEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+              "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
             }
           }
         }
@@ -418,7 +443,8 @@ export class DuetChip {
           "references": {
             "DuetChipEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+              "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
             }
           }
         }
@@ -438,7 +464,8 @@ export class DuetChip {
           "references": {
             "DuetChipEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+              "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
             }
           }
         }
@@ -455,10 +482,12 @@ export class DuetChip {
             }],
           "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-choice/duet-checkmark.js

@@ -46,7 +46,8 @@ export class DuetCheckmark {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -123,7 +124,8 @@ export class DuetCheckmark {
           "references": {
             "DuetChoiceType": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetChoiceType"
             }
           }
         },