@duetds/components 7.1.0 → 7.1.2

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

@@ -67,7 +67,8 @@ export class DuetPromoCard {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -90,7 +91,8 @@ export class DuetPromoCard {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -113,7 +115,8 @@ export class DuetPromoCard {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -136,7 +139,8 @@ export class DuetPromoCard {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -177,7 +181,8 @@ export class DuetPromoCard {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },

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

@@ -0,0 +1,135 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-radio", () => {
+  it("should render a radio", async () => {
+    const page = await createPage(`<duet-radio></duet-radio>`);
+    const component = await page.find("duet-radio");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that renders label", async () => {
+    const page = await createPage(`<duet-radio label="test"></duet-radio>`);
+    const element = await page.find("duet-radio label");
+    expect(element.innerText).toEqual("test");
+  });
+  it("should provide a slot that renders label", async () => {
+    const page = await createPage(`<duet-radio><span slot="label">test</span></duet-radio>`);
+    const element = await page.find("duet-radio label");
+    expect(element.innerText).toEqual("test");
+  });
+  it("should render HTML in the label when provided as a slotted content", async () => {
+    const page = await createPage(`<duet-radio><span slot="label">test <strong>HTML!</strong></span></duet-radio>`);
+    const element = await page.find("duet-radio label strong");
+    expect(element).not.toBeNull();
+  });
+  it("should prioritize the content from the label slot when both the slot and the attribute are present", async () => {
+    const page = await createPage(`<duet-radio label="Label wins"><span slot="label">Slot wins</span></duet-radio>`);
+    const element = await page.find("duet-radio label");
+    expect(element.innerText).toEqual("Slot wins");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-radio margin="none"></duet-radio>`);
+    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-radio accessible-controls="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("aria-controls")).toEqual("test");
+  });
+  it("should provide a property that renders aria-activedescendant", async () => {
+    const page = await createPage(`<duet-radio accessible-active-descendant="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("aria-activedescendant")).not.toBeNull();
+  });
+  it("should provide a property that renders aria-owns", async () => {
+    const page = await createPage(`<duet-radio accessible-owns="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("aria-owns")).not.toBeNull();
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-radio theme="turva"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio-container");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that makes the radio disabled", async () => {
+    const page = await createPage(`<duet-radio disabled></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that adds an ID for the radio", async () => {
+    const page = await createPage(`<duet-radio identifier="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that adds name for the radio", async () => {
+    const page = await createPage(`<duet-radio name="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("name")).not.toBeNull();
+  });
+  it("should provide a property that adds role for the radio", async () => {
+    const page = await createPage(`<duet-radio role="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("role")).not.toBeNull();
+  });
+  it("should provide a property that checks the radio", async () => {
+    const page = await createPage(`<duet-radio checked></duet-radio>`);
+    const element = (await page.find("duet-radio .duet-radio"));
+    expect(element.checked).not.toBeNull();
+  });
+  it("should provide a property that adds value for the radio", async () => {
+    const page = await createPage(`<duet-radio value="test"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("value")).not.toBeNull();
+  });
+  it("should provide a property that adds group direction", async () => {
+    const page = await createPage(`<duet-radio group-direction="horizontal"></duet-radio>`);
+    const element = await page.find("duet-radio");
+    expect(element).toHaveClass("horizontal");
+  });
+  it("should provide a property that adds group disabled", async () => {
+    const page = await createPage(`<duet-radio group-disabled></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    expect(element.getAttribute("disabled")).not.toBeNull();
+  });
+  it("should provide a property that changes tabindex of checkbox", async () => {
+    const page = await createPage(`<duet-radio accessible-index="-1"></duet-radio>`);
+    const element = await page.find("duet-radio .duet-radio");
+    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-radio label="Checked" value="test"></duet-radio>`);
+    const choice = await page.find("duet-radio");
+    const changeEventSpy = await choice.spyOnEvent("duetChange");
+    choice.setProperty("checked", true);
+    await page.waitForChanges();
+    expect(changeEventSpy).not.toHaveReceivedEvent();
+    choice.setProperty("checked", false);
+    await page.waitForChanges();
+    await choice.click();
+    expect(changeEventSpy).toHaveReceivedEvent();
+  });
+  it("should raise an event on focus", async () => {
+    const page = await createPage(`<duet-radio label="Checked" value="test"></duet-radio>`);
+    const radio = await page.find("duet-radio");
+    const focusEventSpy = await radio.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-radio label="Checked" value="test"></duet-radio>
+      <button>another focusable element</button>
+    `);
+    const radio = await page.find("duet-radio");
+    const blurEventSpy = await radio.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-radio/duet-radio.js

@@ -211,7 +211,8 @@ export class DuetRadio {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -285,7 +286,8 @@ export class DuetRadio {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -451,7 +453,8 @@ export class DuetRadio {
           "references": {
             "DuetDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetDirection"
             }
           }
         },
@@ -540,7 +543,8 @@ export class DuetRadio {
           "references": {
             "DuetRadioEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+              "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
             }
           }
         }
@@ -560,7 +564,8 @@ export class DuetRadio {
           "references": {
             "DuetRadioEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+              "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
             }
           }
         }
@@ -580,7 +585,8 @@ export class DuetRadio {
           "references": {
             "DuetRadioEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+              "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
             }
           }
         }
@@ -597,10 +603,12 @@ export class DuetRadio {
             }],
           "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-radio-group/duet-radio-group.e2e.js

@@ -0,0 +1,57 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-radio-group", () => {
+  it("should render a radio group", async () => {
+    const page = await createPage(`<duet-radio-group></duet-radio-group>`);
+    const component = await page.find("duet-radio-group");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should associate the tooltip with the legend", async () => {
+    const page = await createPage(`<duet-radio-group label="test label" tooltip="some tooltip"></duet-radio-group>`);
+    const legend = await page.find("duet-fieldset >>> legend");
+    const tooltip = await page.find("duet-tooltip");
+    const tooltipInputLabel = await tooltip.getProperty("accessibleInputLabel");
+    expect(tooltipInputLabel).not.toBeNull();
+    expect(legend.textContent).toBe(tooltipInputLabel);
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-radio-group margin="none"></duet-radio-group>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should raise a change event on user interaction, as long as the value is provided", async () => {
+    const page = await createPage(`<duet-radio-group>
+      <duet-radio value="foo" label="Foo"></duet-radio>
+      <duet-radio value="true" label="True"></duet-radio>
+      <duet-radio value="false" label="False"></duet-radio>
+      <duet-radio value="123" label="Number"></duet-radio>
+      <duet-radio value="" label="[empty]"></duet-radio>
+    </duet-radio-group>`);
+    const component = await page.find("duet-radio-group");
+    const radios = await page.findAll("duet-radio-group duet-radio");
+    const changeEventSpy = await component.spyOnEvent("duetChange");
+    for (const radio of radios) {
+      await radio.click();
+    }
+    expect(changeEventSpy).toHaveReceivedEventTimes(radios.length);
+  });
+  it("should not raise a change event when the value doesn't change", async () => {
+    const page = await createPage(`<duet-radio-group>
+      <duet-radio value="foo" label="Foo"></duet-radio>
+      <duet-radio value="true" label="True"></duet-radio>
+      <duet-radio value="false" label="False"></duet-radio>
+      <duet-radio value="123" label="Number"></duet-radio>
+      <duet-radio value="" label="[empty]"></duet-radio>
+    </duet-radio-group>`);
+    const component = await page.find("duet-radio-group");
+    const radio = await page.find("duet-radio-group duet-radio");
+    const changeEventSpy = await component.spyOnEvent("duetChange");
+    await radio.click();
+    await radio.click();
+    await radio.click();
+    expect(changeEventSpy).toHaveReceivedEventTimes(1);
+  });
+});

package/lib/collection/components/duet-radio-group/duet-radio-group.js

@@ -134,7 +134,8 @@ export class DuetRadioGroup {
           "references": {
             "DuetDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetDirection"
             }
           }
         },
@@ -157,7 +158,8 @@ export class DuetRadioGroup {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -180,7 +182,8 @@ export class DuetRadioGroup {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -239,7 +242,8 @@ export class DuetRadioGroup {
           "references": {
             "DuetTooltipDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTooltipDirection"
             }
           }
         },

package/lib/collection/components/duet-range-slider/duet-range-slider.e2e.js

@@ -0,0 +1,57 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-range-slider", () => {
+  it("should render a range-slider", async () => {
+    const page = await createPage(`<duet-range-slider></duet-range-slider>`);
+    const component = await page.find("duet-range-slider");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`<duet-range-slider theme="turva"></duet-range-slider>`);
+    const element = await page.find("duet-range-slider .duet-range-container");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`<duet-range-slider margin="none"></duet-range-slider>`);
+    const element = await page.find(".duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that expands the input to fill 100% width", async () => {
+    const page = await createPage(`<duet-range-slider expand></duet-range-slider>`);
+    const element = await page.find("duet-range-slider");
+    expect(element).toHaveClass("duet-expand");
+  });
+  it("should provide a property that adds an ID for the input", async () => {
+    const page = await createPage(`<duet-range-slider identifier="test"></duet-range-slider>`);
+    const element = await page.find("duet-range-slider input");
+    expect(element.getAttribute("id")).toEqual("test");
+  });
+  it("should provide a property that renders label", async () => {
+    const page = await createPage(`<duet-range-slider label="test"></duet-range-slider>`);
+    const element = await page.find("duet-range-slider duet-label label");
+    expect(element.innerText).toEqual("test");
+  });
+  it("should provide a property that sets the step amount", async () => {
+    const page = await createPage(`<duet-range-slider step="10"></duet-range-slider>`);
+    const element = await page.find("duet-range-slider input");
+    expect(element.getAttribute("step")).toEqual("10");
+  });
+  it("should provide a property that sets the max amount", async () => {
+    const page = await createPage(`<duet-range-slider max="10"></duet-range-slider>`);
+    const element = await page.find("duet-range-slider input");
+    expect(element.getAttribute("max")).toEqual("10");
+  });
+  it("should provide a property that sets the min amount", async () => {
+    const page = await createPage(`<duet-range-slider min="1"></duet-range-slider>`);
+    const element = await page.find("duet-range-slider input");
+    expect(element.getAttribute("min")).toEqual("1");
+  });
+  it("should provide a property that sets the unit", async () => {
+    const page = await createPage(`<duet-range-slider unit=" test"></duet-range-slider>`);
+    const element = await page.find("duet-range-slider input");
+    expect(element).toEqualAttribute("aria-valuetext", "0  test");
+  });
+});

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -137,7 +137,8 @@ export class DuetRangeSlider {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -160,7 +161,8 @@ export class DuetRangeSlider {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -447,7 +449,8 @@ export class DuetRangeSlider {
           "references": {
             "DuetLocale": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLocale"
             }
           }
         },
@@ -516,7 +519,8 @@ export class DuetRangeSlider {
           "references": {
             "DuetRangeChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+              "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
             }
           }
         }
@@ -536,7 +540,8 @@ export class DuetRangeSlider {
           "references": {
             "DuetRangeChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+              "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
             }
           }
         }
@@ -553,10 +558,12 @@ export class DuetRangeSlider {
             }],
           "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-range-stepper/duet-range-stepper.e2e.js

@@ -0,0 +1,51 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-range-stepper", () => {
+  it("should render a logo", async () => {
+    const page = await createPage(`<duet-range-stepper total="20" step-size="10" step-index="1"></duet-range-stepper>`);
+    const component = await page.find("duet-range-stepper");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should display range", async () => {
+    const page = await createPage(`<duet-range-stepper total="20" step-size="10" step-index="1"></duet-range-stepper>`);
+    const counter = await page.find("duet-range-stepper >>> .duet-range-step-counter");
+    expect(counter.textContent).toBe("1–10 / 20");
+  });
+  it("should update range on next button click", async () => {
+    const page = await createPage(`<duet-range-stepper total="20" step-size="10" step-index="1"></duet-range-stepper>`);
+    const nextButton = await page.find("duet-range-stepper >>> .duet-range-step-plus");
+    nextButton.click();
+    await page.waitForChanges();
+    //after mutation, stepIndex should be clamped
+    const counter = await page.find("duet-range-stepper >>> .duet-range-step-counter");
+    expect(counter.textContent).toBe("11–20 / 20");
+  });
+  it("should not go beyond last page", async () => {
+    const page = await createPage(`<duet-range-stepper total="20" step-size="10" step-index="2"></duet-range-stepper>`);
+    const nextButton = await page.find("duet-range-stepper >>> .duet-range-step-plus");
+    nextButton.click();
+    await page.waitForChanges();
+    //after mutation, stepIndex should be clamped
+    const counter = await page.find("duet-range-stepper >>> .duet-range-step-counter");
+    expect(counter.textContent).toBe("11–20 / 20");
+  });
+  it("should clamp stepIndex when increasing stepSize would result out of bounds stepIndex", async () => {
+    const page = await createPage(`<duet-range-stepper total="33" step-size="10" step-index="3"></duet-range-stepper>`);
+    const nextButton = await page.find("duet-range-stepper >>> .duet-range-step-plus");
+    nextButton.click();
+    await page.waitForChanges();
+    const counter = await page.find("duet-range-stepper >>> .duet-range-step-counter");
+    expect(counter.textContent).toBe("31–33 / 33");
+    const stepper = await page.find("duet-range-stepper");
+    stepper.setProperty("stepSize", 20);
+    await page.waitForChanges();
+    //after mutation, stepIndex should be clamped
+    const stepperPostChange = await page.find("duet-range-stepper");
+    const counterPostChange = await page.find("duet-range-stepper >>> .duet-range-step-counter");
+    expect(await stepperPostChange.getProperty("stepIndex")).toBe(2);
+    expect(counterPostChange.textContent).toBe("21–33 / 33");
+  });
+});

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -193,7 +193,8 @@ export class DuetRangeStepper {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -279,7 +280,8 @@ export class DuetRangeStepper {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -299,7 +301,8 @@ export class DuetRangeStepper {
           "resolved": "{ [x: string]: string; }",
           "references": {
             "Record": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Record"
             }
           }
         },
@@ -348,7 +351,8 @@ export class DuetRangeStepper {
           "references": {
             "DuetRangeStepperUpdateEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
+              "id": "src/components/duet-range-stepper/duet-range-stepper.tsx::DuetRangeStepperUpdateEvent"
             }
           }
         }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.spec.js

@@ -0,0 +1,23 @@
+/*!
+ * Built with Duet Design System
+ */
+import { DuetRangeStepper } from "./duet-range-stepper";
+describe("duet-range-stepper", () => {
+  it("should not allow non-integer stepIndex when growing stepSize beyond last page", () => {
+    const component = new DuetRangeStepper();
+    component.stepSize = 10;
+    component.total = 33;
+    component.stepIndex = 3;
+    expect(component.stepIndex).toEqual(3);
+    component.watchStepSizeStateHandler(30, 10);
+    expect(component.stepIndex).toEqual(2);
+  });
+  it("should clamp initially out of bounds stepIndex to last page", () => {
+    const component = new DuetRangeStepper();
+    component.stepSize = 10;
+    component.total = 33;
+    component.stepIndex = 5;
+    component.componentWillLoad();
+    expect(component.stepIndex).toEqual(4);
+  });
+});

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

@@ -0,0 +1,12 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-scrollable", () => {
+  it("should render an duet-scrollable component", async () => {
+    const page = await createPage(`<duet-scrollable><button></button><button></button><button></button><button></button><button></button></duet-scrollable>`);
+    const component = await page.find("duet-scrollable");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+});

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

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

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"
             }
           }
         },