@duetds/components 7.1.0 → 7.1.1

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

@@ -117,7 +117,8 @@ export class DuetIcon {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -174,7 +175,8 @@ export class DuetIcon {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -197,7 +199,8 @@ export class DuetIcon {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -238,7 +241,8 @@ export class DuetIcon {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -261,7 +265,8 @@ export class DuetIcon {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -326,7 +331,8 @@ export class DuetIcon {
           "references": {
             "DuetIconSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-icon/duet-icon.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-icon/duet-icon.tsx",
+              "id": "src/components/duet-icon/duet-icon.tsx::DuetIconSize"
             }
           }
         },
@@ -349,7 +355,8 @@ export class DuetIcon {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },

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

@@ -0,0 +1,84 @@
+/*!
+ * Built with Duet Design System
+ */
+import { fetchIconByUrl } from "./icon-utils";
+describe("duet-icon/icon-utils", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+  describe("fetchIconByUrl", () => {
+    const stubFetchResponse = (response) => {
+      jest.spyOn(global, "fetch").mockImplementation(() => Promise.resolve({
+        ok: response.ok,
+        text: () => Promise.resolve(response.text),
+      }));
+    };
+    it("should return svg text when validation passes", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: true,
+        text: "<svg></svg>",
+      });
+      const result = await fetchIconByUrl("valid.svg");
+      expect(result).toEqual("<svg></svg>");
+    });
+    it("should not request the same SVG twice", async () => {
+      expect.assertions(3);
+      stubFetchResponse({
+        ok: true,
+        text: "<svg></svg>",
+      });
+      const result1 = await fetchIconByUrl("double-request.svg");
+      const result2 = await fetchIconByUrl("double-request.svg");
+      expect(global.fetch).toHaveBeenCalledTimes(1);
+      expect(result1).toBe("<svg></svg>");
+      expect(result1).toBe(result2);
+    });
+    it("should strip any non-SVG tags", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: true,
+        text: `<div></div><svg></svg>`,
+      });
+      const result = await fetchIconByUrl("strip-non-svg-tags.svg");
+      expect(result).toEqual(`<svg></svg>`);
+    });
+    it("should return only the first child element", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: true,
+        text: `<svg id="first"></svg><svg id="second"></svg>`,
+      });
+      const result = await fetchIconByUrl("returns-first-element.svg");
+      expect(result).toEqual(`<svg id="first"></svg>`);
+    });
+    it("should throw an error if request failed", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: false,
+        text: "",
+      });
+      await expect(fetchIconByUrl("failed-request.svg")).rejects.toBeInstanceOf(Error);
+    });
+    it("should fail validation for SVGs with inline event handlers", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: true,
+        text: `<svg><path onclick="alert('pwned')" d="" /></svg>`,
+      });
+      await expect(fetchIconByUrl("inline-event-handler.svg")).rejects.toMatchObject({
+        message: "SVG validation failed",
+      });
+    });
+    it("should fail validation for SVGs with script tags", async () => {
+      expect.assertions(1);
+      stubFetchResponse({
+        ok: true,
+        text: `<svg><script>alert("pwned")</script><path d="" /></svg>`,
+      });
+      await expect(fetchIconByUrl("script-tag.svg")).rejects.toMatchObject({
+        message: "SVG validation failed",
+      });
+    });
+  });
+});

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

@@ -0,0 +1,201 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-input", () => {
+  it("should render an input", async () => {
+    const page = await createPage(`<duet-input></duet-input>`);
+    const component = await page.find("duet-input");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that renders label", async () => {
+    const page = await createPage(`<duet-input label="test"></duet-input>`);
+    const element = await page.find("duet-input 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-input margin="none"></duet-input>`);
+    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-input accessible-controls="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("aria-controls")).toEqual("test");
+  });
+  it("should associate the tooltip with the label", async () => {
+    const page = await createPage(`<duet-input tooltip="tooltip" />`);
+    const label = await page.find("duet-input 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 provide a property that renders aria-activedescendant", async () => {
+    const page = await createPage(`<duet-input accessible-active-descendant="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("aria-activedescendant")).not.toBeNull();
+  });
+  it("should provide a property that renders aria-autocomplete", async () => {
+    const page = await createPage(`<duet-input accessible-autocomplete="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("aria-autocomplete")).not.toBeNull();
+  });
+  it("should provide a property that renders aria-owns", async () => {
+    const page = await createPage(`<duet-input accessible-owns="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("aria-owns")).not.toBeNull();
+  });
+  it("should provide a property that renders input in different types", async () => {
+    const page = await createPage(`<duet-input type="email"></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("type")).toEqual("email");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-input theme="turva"></duet-input>`);
+    const element = await page.find("duet-input .duet-input-container");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that expands the input to fill 100% width", async () => {
+    const page = await createPage(`<duet-input expand></duet-input>`);
+    const element = await page.find("duet-input");
+    expect(element).toHaveClass("duet-expand");
+  });
+  it("should provide a property that makes the input disabled", async () => {
+    const page = await createPage(`<duet-input disabled></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that adds an ID for the input", async () => {
+    const page = await createPage(`<duet-input identifier="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that makes input required", async () => {
+    const page = await createPage(`<duet-input required></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("required")).not.toBeNull();
+  });
+  it("should provide a property that makes the label hidden", async () => {
+    const page = await createPage(`<duet-input label-hidden></duet-input>`);
+    const element = await page.find("duet-input .duet-input-container");
+    expect(element).toHaveClass("duet-label-hidden");
+  });
+  it("should provide a property that adds name for the input", async () => {
+    const page = await createPage(`<duet-input name="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("name")).not.toBeNull();
+  });
+  it("should provide a property that adds pattern regex for the input", async () => {
+    const page = await createPage(`<duet-input pattern="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("pattern")).not.toBeNull();
+  });
+  it("should provide a property that adds placeholder for the input", async () => {
+    const page = await createPage(`<duet-input placeholder="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("placeholder")).not.toBeNull();
+  });
+  it("should provide a property that adds role for the input", async () => {
+    const page = await createPage(`<duet-input role="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("role")).not.toBeNull();
+  });
+  it("should provide a property that modifies autocomplete attribute", async () => {
+    const page = await createPage(`<duet-input auto-complete="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input");
+    expect(element.getAttribute("autocomplete")).toEqual("test");
+  });
+  it("should provide a property that adds an error", async () => {
+    const page = await createPage(`<duet-input error="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input-help");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that sets tooltip", async () => {
+    const page = await createPage(`<duet-input tooltip="test"></duet-input>`);
+    const element = await page.find("duet-input duet-tooltip");
+    expect(element).not.toBeNull();
+  });
+  it("should not render tooltip if the property isn’t used", async () => {
+    const page = await createPage(`<duet-input id="test"></duet-input>`);
+    const element = await page.find("duet-input duet-tooltip");
+    expect(element).toBeNull();
+  });
+  it("should provide a property that sets custom icon", async () => {
+    const page = await createPage(`<duet-input icon="form-location"></duet-input>`);
+    const element = await page.find("duet-input .duet-input-icon");
+    expect(element).not.toBeNull();
+  });
+  it("should not render custom icon if the option is not used", async () => {
+    const page = await createPage(`<duet-input label="test"></duet-input>`);
+    const element = await page.find("duet-input .duet-input-icon");
+    expect(element).toBeNull();
+  });
+  it("raises duetChange event when value has changed", async () => {
+    const page = await createPage(`<duet-input></duet-input>`);
+    const element = await page.find("duet-input");
+    const changeSpy = await element.spyOnEvent("duetChange");
+    await page.keyboard.press("Tab");
+    await page.keyboard.type("hello");
+    await page.waitForChanges();
+    expect(changeSpy.lastEvent.detail).toMatchObject({
+      value: "hello",
+      component: "duet-input",
+    });
+  });
+  it("raises a duetInput even on input", async () => {
+    const page = await createPage(`<duet-input></duet-input>`);
+    const element = await page.find("duet-input");
+    const inputSpy = await element.spyOnEvent("duetInput");
+    await page.keyboard.press("Tab");
+    await page.keyboard.type("hello");
+    await page.waitForChanges();
+    expect(inputSpy.lastEvent.detail).toMatchObject({
+      value: "hello",
+      component: "duet-input",
+    });
+  });
+  it("raises duetFocus event when input is focused", async () => {
+    const page = await createPage(`<duet-input></duet-input>`);
+    const element = await page.find("duet-input");
+    const focusSpy = await element.spyOnEvent("duetFocus");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(focusSpy).toHaveReceivedEvent();
+  });
+  it("raises a duetBlur event when input is blurred", async () => {
+    const page = await createPage(`<duet-input></duet-input>`);
+    const element = await page.find("duet-input");
+    const focusSpy = await element.spyOnEvent("duetBlur");
+    // tab in...
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    // tab out...
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(focusSpy).toHaveReceivedEvent();
+  });
+  it("allows characters to be disallowed", async () => {
+    const page = await createPage(`<duet-input label="numbers only" disallow-pattern="[^0-9]"></duet-input>`);
+    const element = await page.find("duet-input");
+    const input = await page.find("duet-input .duet-input");
+    // tab to input
+    await page.keyboard.press("Tab");
+    // type some _allowed_ chars
+    await page.keyboard.type("123", { delay: 50 });
+    // move cursor so we can test maintaining position
+    await page.keyboard.press("ArrowLeft");
+    // store cursor position
+    const cursorBefore = await input.getProperty("selectionStart");
+    expect(cursorBefore).toBe(2);
+    // attempt to enter _disallowed_ character
+    await page.keyboard.press("a");
+    const cursorAfter = await input.getProperty("selectionStart");
+    const value = await element.getProperty("value");
+    // we should see cursor hasn't changed
+    expect(cursorAfter).toBe(cursorBefore);
+    // and value contains no disallowed chars
+    expect(value).toBe("123");
+  });
+});

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

@@ -615,7 +615,8 @@ export class DuetInput {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -691,7 +692,8 @@ export class DuetInput {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -732,7 +734,8 @@ export class DuetInput {
           "references": {
             "DuetInputType": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
             }
           }
         },
@@ -755,7 +758,8 @@ export class DuetInput {
           "references": {
             "DuetVariationType": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
             }
           }
         },
@@ -935,7 +939,8 @@ export class DuetInput {
           "references": {
             "DuetInputComponentType": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
             }
           }
         },
@@ -975,7 +980,8 @@ export class DuetInput {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },
@@ -1068,7 +1074,8 @@ export class DuetInput {
           "references": {
             "DuetTooltipDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTooltipDirection"
             }
           }
         },
@@ -1108,7 +1115,8 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1128,7 +1136,8 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1148,7 +1157,8 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1168,7 +1178,8 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1188,7 +1199,8 @@ export class DuetInput {
           "references": {
             "DuetInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+              "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
             }
           }
         }
@@ -1205,10 +1217,12 @@ export class DuetInput {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -1224,7 +1238,8 @@ export class DuetInput {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -1240,7 +1255,8 @@ export class DuetInput {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,32 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-label", () => {
+  it("should render a label", async () => {
+    const page = await createPage(`<duet-label></duet-label>`);
+    const component = await page.find("duet-label");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-label theme="turva"></duet-label>`);
+    const element = await page.find("duet-label");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that adds an html for for the label", async () => {
+    const page = await createPage(`<duet-label for="test"></duet-label>`);
+    const element = await page.find("duet-label label");
+    expect(element.getAttribute("for")).toEqual("test");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-label margin="none"></duet-label>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that changes the spacing of label", async () => {
+    const page = await createPage(`<duet-label margin="none"></duet-label>`);
+    const element = await page.find("duet-label");
+    expect(element).toHaveClass("duet-m-0");
+  });
+});

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

@@ -56,7 +56,8 @@ export class DuetLabel {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -96,7 +97,8 @@ export class DuetLabel {
           "references": {
             "DuetLabelMargin": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+              "id": "src/components/duet-label/duet-label.tsx::DuetLabelMargin"
             }
           }
         },
@@ -119,7 +121,8 @@ export class DuetLabel {
           "references": {
             "DuetLabelSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+              "id": "src/components/duet-label/duet-label.tsx::DuetLabelSize"
             }
           }
         },

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

@@ -0,0 +1,32 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-layout", () => {
+  it("should render a layout", async () => {
+    const page = await createPage(`<duet-layout><div slot="main"></div></duet-layout>`);
+    const component = await page.find("duet-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-layout margin="none"><div slot="main"></div></duet-layout>`);
+    const element = await page.find("duet-layout >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that center aligns the layout", async () => {
+    const page = await createPage(`<duet-layout center><div slot="main"></div></duet-layout>`);
+    const element = await page.find("duet-layout >>> .duet-layout");
+    expect(element).toHaveClass("duet-center");
+  });
+  it("should provide a property that adjusts the sidebar when tabs are used", async () => {
+    const page = await createPage(`<duet-layout tabs><div slot="sidebar">test</div></duet-layout>`);
+    const element = await page.find("duet-layout >>> .duet-sidebar-container");
+    expect(element).toHaveClass("has-tabs");
+  });
+  it("should provide a property that middle aligns the layout", async () => {
+    const page = await createPage(`<duet-layout middle><div slot="main"></div></duet-layout>`);
+    const element = await page.find("duet-layout");
+    expect(element).toHaveClass("duet-middle");
+  });
+});

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

@@ -100,7 +100,8 @@ export class DuetLayout {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -123,7 +124,8 @@ export class DuetLayout {
           "references": {
             "DuetLayoutStickyDistance": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-layout/duet-layout.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-layout/duet-layout.tsx",
+              "id": "src/components/duet-layout/duet-layout.tsx::DuetLayoutStickyDistance"
             }
           }
         },
@@ -200,7 +202,8 @@ export class DuetLayout {
           "references": {
             "DuetBreakpoints": {
               "location": "import",
-              "path": "../../utils/token-utils"
+              "path": "../../utils/token-utils",
+              "id": "src/utils/token-utils.ts::DuetBreakpoints"
             }
           }
         },

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

@@ -115,7 +115,7 @@
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 16px;
-  align-items: center;
+  align-items: start;
   padding: 16px;
   font-weight: 600;
   color: rgb(0, 41, 77);
@@ -131,6 +131,9 @@
   position: relative;
   bottom: 2px;
 }
+.block .block__chevron {
+  align-self: center;
+}
 .block .block__chevron-icon {
   transition: 300ms ease;
 }