@getflip/swirl-components 0.64.6 → 0.65.0

package/dist/collection/components/swirl-autocomplete/swirl-autocomplete.spec.js

@@ -0,0 +1,120 @@
+jest.mock("../../utils", () => ({
+  debounce: (fn) => fn,
+}));
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlAutocomplete } from "./swirl-autocomplete";
+const suggestions = [
+  {
+    id: "1",
+    label: "Item #1",
+  },
+  {
+    disabled: true,
+    id: "2",
+    label: "Item #2",
+  },
+  {
+    id: "3",
+    label: "Item #3",
+  },
+];
+const generateSuggestions = async (value) => {
+  if (!Boolean(value)) {
+    return suggestions;
+  }
+  return suggestions.filter((suggestion) => suggestion.label.toLowerCase().includes(value.toLowerCase()));
+};
+describe("swirl-autocomplete", () => {
+  it("renders input and initial suggestions on focus", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAutocomplete],
+      html: `<swirl-autocomplete></swirl-autocomplete>`,
+    });
+    page.rootInstance.generateSuggestions = generateSuggestions;
+    page.root
+      .querySelector("swirl-text-input")
+      .dispatchEvent(new CustomEvent("inputFocus"));
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <swirl-autocomplete>
+        <div class="autocomplete">
+          <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="true" swirlrole="combobox" id="autocomplete-0"></swirl-text-input>
+          <div class="autocomplete__listbox-container" style="width: 32px;">
+            <swirl-option-list label="Suggestions" optionlistid="autocomplete-0-suggestions">
+              <swirl-option-list-item label="Item #1" value="Item #1"></swirl-option-list-item>
+              <swirl-option-list-item disabled="" label="Item #2" value="Item #2"></swirl-option-list-item>
+              <swirl-option-list-item label="Item #3" value="Item #3"></swirl-option-list-item>
+            </swirl-option-list>
+          </div>
+        </div>
+      </swirl-autocomplete>
+    `);
+  });
+  it("updates suggestions", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAutocomplete],
+      html: `<swirl-autocomplete></swirl-autocomplete>`,
+    });
+    page.rootInstance.generateSuggestions = generateSuggestions;
+    const input = page.root.querySelector("swirl-text-input");
+    input.dispatchEvent(new CustomEvent("inputFocus"));
+    input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <swirl-autocomplete value="#3">
+        <div class="autocomplete">
+          <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="true" swirlrole="combobox" id="autocomplete-0" value="#3"></swirl-text-input>
+          <div class="autocomplete__listbox-container" style="width: 32px;">
+            <swirl-option-list label="Suggestions" optionlistid="autocomplete-0-suggestions">
+              <swirl-option-list-item label="Item #3" value="Item #3"></swirl-option-list-item>
+            </swirl-option-list>
+          </div>
+        </div>
+      </swirl-autocomplete>
+    `);
+  });
+  it("selects suggestions and closes them", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAutocomplete],
+      html: `<swirl-autocomplete></swirl-autocomplete>`,
+    });
+    page.rootInstance.generateSuggestions = generateSuggestions;
+    const input = page.root.querySelector("swirl-text-input");
+    input.dispatchEvent(new CustomEvent("inputFocus"));
+    input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
+    await page.waitForChanges();
+    const listbox = page.root.querySelector("swirl-option-list");
+    listbox.dispatchEvent(new CustomEvent("valueChange", { detail: ["Item #3"] }));
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <swirl-autocomplete value="Item #3">
+        <div class="autocomplete autocomplete--inactive">
+          <swirl-text-input class="autocomplete__input" clearable="" clearbuttonlabel="Clear input" disabledynamicwidth="" swirlariaautocomplete="list" swirlariacontrols="autocomplete-0-suggestions" swirlariaexpanded="false" swirlrole="combobox" id="autocomplete-0" value="Item #3"></swirl-text-input>
+          <div class="autocomplete__listbox-container" style="width: 32px;">
+            <swirl-option-list label="Suggestions" optionlistid="autocomplete-0-suggestions">
+              <swirl-option-list-item label="Item #3" selected="" value="Item #3"></swirl-option-list-item>
+            </swirl-option-list>
+          </div>
+        </div>
+      </swirl-autocomplete>
+    `);
+  });
+  it("fires valueChange event", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAutocomplete],
+      html: `<swirl-autocomplete></swirl-autocomplete>`,
+    });
+    page.rootInstance.generateSuggestions = generateSuggestions;
+    const spy = jest.fn();
+    const input = page.root.querySelector("swirl-text-input");
+    page.root.addEventListener("valueChange", spy);
+    input.dispatchEvent(new CustomEvent("inputFocus"));
+    input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
+    await page.waitForChanges();
+    const listbox = page.root.querySelector("swirl-option-list");
+    listbox.dispatchEvent(new CustomEvent("valueChange", { detail: ["Item #3"] }));
+    expect(spy.mock.calls[0][0].detail).toBe("#3");
+    input.dispatchEvent(new CustomEvent("valueChange", { detail: "#3" }));
+    expect(spy.mock.calls[1][0].detail).toBe("Item #3");
+  });
+});

package/dist/collection/components/swirl-avatar/swirl-avatar.spec.js

@@ -0,0 +1,156 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlAvatar } from "./swirl-avatar";
+describe("swirl-avatar", () => {
+  it("renders with the fallback icon", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAvatar],
+      html: `<swirl-avatar label="John Doe"></swirl-avatar>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-avatar aria-label="John Doe" label="John Doe" role="img">
+        <mock:shadow-root>
+          <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
+            <span class="avatar__icon">
+              <swirl-icon-person></swirl-icon-person>
+            </span>
+          </span>
+        </mock:shadow-root>
+      </swirl-avatar>
+    `);
+  });
+  it("renders with an image", async () => {
+    // simulate successful image loading
+    global.Image = class Image {
+      constructor() {
+        this.onload();
+      }
+    };
+    const page = await newSpecPage({
+      components: [SwirlAvatar],
+      html: `<swirl-avatar label="John Doe" src="https://"></swirl-avatar>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-avatar aria-label="John Doe" label="John Doe" role="img" src="https://">
+        <mock:shadow-root>
+          <span class="avatar avatar--color-kiwi avatar--size-m avatar--variant-round" part="avatar">
+            <span class="avatar__image">
+              <img alt="" height="40" src="https://" width="40">
+            </span>
+          </span>
+        </mock:shadow-root>
+      </swirl-avatar>
+    `);
+  });
+  it("renders with initials", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAvatar],
+      html: `<swirl-avatar initials="JD" label="John Doe"></swirl-avatar>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-avatar aria-label="John Doe" initials="JD" label="John Doe" role="img">
+        <mock:shadow-root>
+          <span class="avatar avatar--color-kiwi avatar--has-initials avatar--size-m avatar--variant-round" part="avatar">
+            <span class="avatar__initials">
+              <span>
+                JD
+              </span>
+            </span>
+          </span>
+        </mock:shadow-root>
+      </swirl-avatar>
+    `);
+  });
+  it("renders with an icon", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAvatar],
+      html: `<swirl-avatar icon="<swirl-icon-close></swirl-icon-close>" label="John Doe"></swirl-avatar>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-avatar aria-label="John Doe" icon="<swirl-icon-close></swirl-icon-close>" label="John Doe" role="img">
+        <mock:shadow-root>
+          <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
+            <span class="avatar__icon">
+              <swirl-icon-close></swirl-icon-close>
+            </span>
+          </span>
+        </mock:shadow-root>
+      </swirl-avatar>
+    `);
+  });
+  it("renders fallbacks in the right order", async () => {
+    const pageWithInitials = await newSpecPage({
+      components: [SwirlAvatar],
+      html: `<swirl-avatar icon="<swirl-icon-close></swirl-icon-close>" initials="JD" label="John Doe"></swirl-avatar>`,
+    });
+    expect(pageWithInitials.root.shadowRoot.querySelector(".avatar__initials > span")
+      .innerHTML).toBe("JD");
+    expect(pageWithInitials.root.shadowRoot.querySelector(".avatar__icon")).toBeNull();
+    const pageWithoutInitials = await newSpecPage({
+      components: [SwirlAvatar],
+      html: `<swirl-avatar icon="<swirl-icon-close></swirl-icon-close>" label="John Doe"></swirl-avatar>`,
+    });
+    expect(pageWithoutInitials.root.shadowRoot.querySelector(".avatar__initials")).toBeNull();
+    expect(pageWithoutInitials.root.shadowRoot.querySelector(".avatar__icon")
+      .innerHTML).toEqual(`<swirl-icon-close></swirl-icon-close>`);
+    const pageWithoutInitialsAndIcon = await newSpecPage({
+      components: [SwirlAvatar],
+      html: `<swirl-avatar label="John Doe"></swirl-avatar>`,
+    });
+    expect(pageWithoutInitialsAndIcon.root.shadowRoot.querySelector(".avatar__initials")).toBeNull();
+    expect(pageWithoutInitialsAndIcon.root.shadowRoot.querySelector(".avatar__icon")
+      .innerHTML).toEqual(`<swirl-icon-person></swirl-icon-person>`);
+  });
+  it("renders with a badge", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAvatar],
+      html: `<swirl-avatar badge="<swirl-badge aria-label='3 new messages' label='3'></swirl-badge>" badge-position="top" label="John Doe"></swirl-avatar>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-avatar aria-label="John Doe" badge="<swirl-badge aria-label='3 new messages' label='3'></swirl-badge>" badge-position="top" label="John Doe" role="img">
+        <mock:shadow-root>
+          <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
+            <span class="avatar__icon">
+              <swirl-icon-person></swirl-icon-person>
+            </span>
+            <span class="avatar__badge avatar__badge--position-top">
+              <swirl-badge aria-label="3 new messages" label="3" size="m"></swirl-badge>
+            </span>
+          </span>
+        </mock:shadow-root>
+      </swirl-avatar>
+    `);
+  });
+  it("renders with a visible label", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAvatar],
+      html: `<swirl-avatar label="John Doe" show-label></swirl-avatar>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-avatar aria-label="John Doe" label="John Doe" role="img" show-label="">
+        <mock:shadow-root>
+          <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
+            <span class="avatar__icon">
+              <swirl-icon-person></swirl-icon-person>
+            </span>
+          </span>
+          <span aria-hidden="" class="avatar__label">
+            John Doe
+          </span>
+        </mock:shadow-root>
+      </swirl-avatar>
+    `);
+  });
+  it("activates when interactive", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAvatar],
+      html: `<swirl-avatar interactive="true" label="John Doe"></swirl-avatar>`,
+    });
+    const buttonSpy = jest.fn();
+    page.root.addEventListener("click", buttonSpy);
+    page.root.click();
+    page.root.dispatchEvent(new KeyboardEvent("keydown", { code: "Enter" }));
+    page.root.dispatchEvent(new KeyboardEvent("keyup", { code: "Space" }));
+    await page.waitForChanges();
+    expect(buttonSpy).toHaveBeenCalledTimes(3);
+  });
+});

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.spec.js

@@ -0,0 +1,29 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlAvatarGroup } from "./swirl-avatar-group";
+describe("swirl-avatar-group", () => {
+  it("renders two avatars and badge", async () => {
+    const page = await newSpecPage({
+      components: [SwirlAvatarGroup],
+      html: `
+        <swirl-avatar-group badge="<swirl-badge aria-label=&quot;3 new messages&quot; label=&quot;3&quot;></swirl-badge>">
+          <swirl-avatar label="Jane Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144" size="s"></swirl-avatar>
+          <swirl-avatar label="John Doe" src="https://avatars.dicebear.com/api/adventurer-neutral/b.svg?size=144" size="s"></swirl-avatar>
+        </swirl-avatar-group>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-avatar-group badge="<swirl-badge aria-label=&quot;3 new messages&quot; label=&quot;3&quot;></swirl-badge>">
+        <mock:shadow-root>
+          <div class="avatar-group avatar-group--has-badge" role="group">
+            <slot></slot>
+            <span class="avatar-group__badge">
+              <swirl-badge aria-label="3 new messages" label="3" size="m"></swirl-badge>
+            </span>
+          </div>
+        </mock:shadow-root>
+       <swirl-avatar label="Jane Doe" size="s" src="https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144"></swirl-avatar>
+       <swirl-avatar label="John Doe" size="s" src="https://avatars.dicebear.com/api/adventurer-neutral/b.svg?size=144"></swirl-avatar>
+      </swirl-avatar-group>
+    `);
+  });
+});

package/dist/collection/components/swirl-badge/swirl-badge.spec.js

@@ -0,0 +1,41 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlBadge } from "./swirl-badge";
+describe("swirl-badge", () => {
+  it("shows its label", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBadge],
+      html: `<swirl-badge label="Label"></swirl-badge>`,
+    });
+    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default\\"><span class=\\"badge__label\\">Label</span></span>"`);
+  });
+  it("shows its icon", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBadge],
+      html: `<swirl-badge label="Label" icon="<swirl-icon-close></swirl-icon-close>"></swirl-badge>`,
+    });
+    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default badge--has-icon\\"><span class=\\"badge__icon\\"><swirl-icon-close></swirl-icon-close></span></span>"`);
+    expect(page.root.querySelector(".badge__icon")).toBeDefined();
+    expect(page.root.querySelector(".badge__label")).toBeNull();
+  });
+  it("renders different intents", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBadge],
+      html: `<swirl-badge label="Label" intent="decorative-1"></swirl-badge>`,
+    });
+    expect(page.root.shadowRoot.children[0].classList.contains("badge--intent-decorative-1")).toBeTruthy();
+  });
+  it("renders different sizes", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBadge],
+      html: `<swirl-badge label="Label" size="s"></swirl-badge>`,
+    });
+    expect(page.root.shadowRoot.children[0].classList.contains("badge--size-s")).toBeTruthy();
+  });
+  it("renders different variants", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBadge],
+      html: `<swirl-badge label="Label" variant="dot"></swirl-badge>`,
+    });
+    expect(page.root.shadowRoot.children[0].classList.contains("badge--variant-dot")).toBeTruthy();
+  });
+});

package/dist/collection/components/swirl-banner/swirl-banner.spec.js

@@ -0,0 +1,56 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlBanner } from "./swirl-banner";
+describe("swirl-banner", () => {
+  it("renders with content, intent, icon and controls", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBanner],
+      html: `<swirl-banner action-label="Action" content="Content" dismissable="true" intent="info" show-icon="true"></swirl-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-banner action-label="Action" content="Content" dismissable="true" intent="info" show-icon="true">
+        <mock:shadow-root>
+          <div aria-describedby="content" class="banner banner--has-icon banner--intent-info banner--size-m" role="status" tabindex="0">
+            <span aria-hidden="true" class="banner__icon">
+              <swirl-icon-info size="24"></swirl-icon-info>
+            </span>
+            <span class="banner__content" id="content" part="banner__content">Content</span>
+            <span class="banner__controls">
+              <button class="banner__action-button" part="banner__action-button" type="button">
+                Action
+              </button>
+              <button aria-label="Dismiss" class="banner__dismiss-button" part="banner__dismiss-button" type="button">
+                <swirl-icon-close size="24"></swirl-icon-close>
+              </button>
+            </span>
+          </div>
+        </mock:shadow-root>
+      </swirl-banner>
+    `);
+  });
+  it("fires custom action event", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBanner],
+      html: `<swirl-banner action-label="Action" content="Content"></swirl-banner>`,
+    });
+    const buttonSpy = jest.fn();
+    page.root.addEventListener("action", buttonSpy);
+    page.root.shadowRoot
+      .querySelector(".banner__action-button")
+      .click();
+    await page.waitForChanges();
+    expect(buttonSpy).toHaveBeenCalled();
+  });
+  it("fires custom dismiss event", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBanner],
+      html: `<swirl-banner content="Content" dismissable="true"></swirl-banner>`,
+    });
+    const buttonSpy = jest.fn();
+    page.root.addEventListener("dismiss", buttonSpy);
+    page.root.shadowRoot
+      .querySelector(".banner__dismiss-button")
+      .click();
+    await page.waitForChanges();
+    expect(buttonSpy).toHaveBeenCalled();
+  });
+});

package/dist/collection/components/swirl-box/swirl-box.spec.js

@@ -0,0 +1,47 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlBox } from "./swirl-box";
+describe("swirl-box", () => {
+  it("renders its content", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBox],
+      html: `<swirl-box>Content</swirl-box>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-box class="box" style="overflow: visible; padding: var(--s-space-0); position: relative;">
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+        Content
+      </swirl-box>
+    `);
+  });
+  it("sets correct styles", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBox],
+      html: `<swirl-box cover="true" padding="12">Content</swirl-box>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-box class="box box--cover" cover="true" padding="12" style="height: 100%; overflow: visible; padding: var(--s-space-12); position: relative; width: 100%;">
+        <mock:shadow-root>
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+        Content
+      </swirl-box>
+    `);
+  });
+  it("sets correct classes", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBox],
+      html: `<swirl-box bordered="true" center-block="true" center-inline="true" cover="true" padding="12">Content</swirl-box>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-box bordered="true" center-block="true" center-inline="true" class="box box--bordered box--cover" cover="true" padding="12" style="align-items: center; display: flex; height: 100%; justify-content: center; overflow: visible; padding: var(--s-space-12); position: relative; width: 100%;">
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+        Content
+      </swirl-box>
+    `);
+  });
+});

package/dist/collection/components/swirl-button/swirl-button.spec.js

@@ -0,0 +1,48 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlButton } from "./swirl-button";
+describe("swirl-button", () => {
+  it("renders its label, icon and props", async () => {
+    const page = await newSpecPage({
+      components: [SwirlButton],
+      html: `<swirl-button
+              disabled="true"
+              icon="<swirl-icon-close></swirl-icon-close>"
+              intent="critical"
+              label="Label"
+              pill="true"
+              size="l"
+              type="submit"
+              variant="flat">
+            </swirl-button>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-button disabled="true" icon="<swirl-icon-close></swirl-icon-close>" intent="critical" label="Label" pill="true" size="l" type="submit" variant="flat" style="pointer-events: none;">
+        <button aria-disabled="true" class="button button--pill button--icon-position-start button--intent-critical button--size-l button--variant-flat" disabled="" type="submit">
+          <span class="button__icon">
+            <swirl-icon-close size="24"></swirl-icon-close>
+          </span>
+          <span class="button__label">
+            Label
+          </span>
+        </button>
+      </swirl-button>
+    `);
+  });
+  it("can hide its label if icon is present", async () => {
+    const page = await newSpecPage({
+      components: [SwirlButton],
+      html: `<swirl-button hide-label="true" icon="<swirl-icon-close></swirl-icon-close>" label="Label"></swirl-button>`,
+    });
+    expect(page.root.querySelector(".button__label")).toBeNull();
+    expect(page.root.querySelector("[aria-label='Label']")).toBeDefined();
+  });
+  it("renders a link if href is set", async () => {
+    const page = await newSpecPage({
+      components: [SwirlButton],
+      html: `<swirl-button href="#" label="Label" target="_blank"></swirl-button>`,
+    });
+    expect(page.root.children[0].tagName).toBe("A");
+    expect(page.root.children[0].getAttribute("href")).toBe("#");
+    expect(page.root.children[0].getAttribute("target")).toBe("_blank");
+  });
+});

package/dist/collection/components/swirl-button-group/swirl-button-group.spec.js

@@ -0,0 +1,26 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlButtonGroup } from "./swirl-button-group";
+describe("swirl-button-group", () => {
+  it("renders its children", async () => {
+    const page = await newSpecPage({
+      components: [SwirlButtonGroup],
+      html: `
+        <swirl-button-group>
+          <swirl-button label="Button"></swirl-button>
+          <swirl-button intent="primary" label="Button" variant="flat"></swirl-button>
+        </swirl-button-group>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-button-group>
+        <mock:shadow-root>
+          <swirl-stack align="start" class="button-group" justify="start" orientation="horizontal" role="group" spacing="8">
+            <slot></slot>
+          </swirl-stack>
+        </mock:shadow-root>
+        <swirl-button label="Button"></swirl-button>
+        <swirl-button intent="primary" label="Button" variant="flat"></swirl-button>
+      </swirl-button-group>
+    `);
+  });
+});

package/dist/collection/components/swirl-card/swirl-card.spec.js

@@ -0,0 +1,73 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlCard } from "./swirl-card";
+describe("swirl-card", () => {
+  it("renders its content", async () => {
+    const page = await newSpecPage({
+      components: [SwirlCard],
+      html: `<swirl-card as="article" elevated>Content</swirl-card>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-card as="article" elevated="">
+        <mock:shadow-root>
+          <article class="card card--intent-default card--elevated card--justify-content-start" style="border-radius: var(--s-border-radius-base);">
+            <div class="card__image">
+              <slot name="image"></slot>
+            </div>
+            <div class="card__body">
+              <div class="card__content">
+                <slot name="content"></slot>
+              </div>
+            </div>
+          </article>
+        </mock:shadow-root>
+        Content
+      </swirl-card>
+    `);
+  });
+  it("renders as a link", async () => {
+    const page = await newSpecPage({
+      components: [SwirlCard],
+      html: `<swirl-card href="#" link-target="_blank">Content</swirl-card>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-card href="#" link-target="_blank">
+        <mock:shadow-root>
+          <a class="card card--intent-default card--interactive card--justify-content-start" href="#" rel="noreferrer" style="border-radius: var(--s-border-radius-base);" target="_blank">
+            <div class="card__image">
+              <slot name="image"></slot>
+            </div>
+            <div class="card__body">
+              <div class="card__content">
+                <slot name="content"></slot>
+              </div>
+            </div>
+          </a>
+        </mock:shadow-root>
+        Content
+      </swirl-card>
+    `);
+  });
+  it("has adjustable paddings", async () => {
+    const page = await newSpecPage({
+      components: [SwirlCard],
+      html: `<swirl-card padding="16" padding-block-start="2" padding-block-end="4" padding-inline-start="8" padding-inline-end="12">Content</swirl-card>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-card padding="16" padding-block-start="2" padding-block-end="4" padding-inline-start="8" padding-inline-end="12">
+        <mock:shadow-root>
+          <div class="card card--intent-default card--justify-content-start" style="border-radius: var(--s-border-radius-base);">
+            <div class="card__image">
+              <slot name="image"></slot>
+            </div>
+            <div class="card__body" style="padding: var(--s-space-16); padding-block-end: var(--s-space-4); padding-block-start: var(--s-space-2); padding-inline-end: var(--s-space-12); padding-inline-start: var(--s-space-8);">
+              <div class="card__content">
+                <slot name="content"></slot>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+        Content
+      </swirl-card>
+    `);
+  });
+});

package/dist/collection/components/swirl-carousel/swirl-carousel.spec.js

@@ -0,0 +1,22 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlCarousel } from "./swirl-carousel";
+describe("swirl-carousel", () => {
+  it("renders its content", async () => {
+    const page = await newSpecPage({
+      components: [SwirlCarousel],
+      html: `<swirl-carousel>Content</swirl-carousel>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-carousel aria-roledescription="carousel" role="group">
+        <mock:shadow-root>
+          <div class="carousel">
+            <div aria-live="polite" class="carousel__slides">
+              <slot></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+        Content
+      </swirl-carousel>
+    `);
+  });
+});

package/dist/collection/components/swirl-carousel-slide/swirl-carousel-slide.spec.js

@@ -0,0 +1,17 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlCarouselSlide } from "./swirl-carousel-slide";
+describe("swirl-carousel-slide", () => {
+  it("renders its content", async () => {
+    const page = await newSpecPage({
+      components: [SwirlCarouselSlide],
+      html: `<swirl-carousel-slide></swirl-carousel-slide>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-carousel-slide aria-roledescription="slide" class="carousel-slide" role="group" tabindex="0" style="flex-basis: 15.5rem;">
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </swirl-carousel-slide>
+    `);
+  });
+});