@ukic/web-components 2.8.0 → 2.9.0

package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-side-navigation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-side-navigation/test/basic/ic-side-navigation.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationGroup } from \"../../../ic-navigation-group/ic-navigation-group\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { SideNavigation } from \"../../ic-side-navigation\";\n\ndescribe(\"ic-side-navigation\", () => {\n  it(\"renders with app-title\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation app-title=\"ACME\"></ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-app-title\");\n  });\n\n  it(\"renders with app title, version and status\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" status=\"BETA\"></ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-app-title-version-status\");\n  });\n\n  it(\"renders with primary navigation items\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\">\n          <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n            <svg\n              slot=\"icon\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-primary-navigation-items\");\n  });\n\n  it(\"renders with secondary navigation items\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n        <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-secondary-navigation-items\"\n    );\n  });\n\n  it(\"renders with slotted navigation item\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\">\n        <ic-navigation-item slot=\"primary-navigation\">\n            <a\n              slot=\"navigation-item\"\n              class=\"active\"\n              href=\"/child-item-2\"\n              aria-label=\"Daily Tippers\"\n            >\n              <svg\n                slot=\"icon\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n              Daily Tippers\n            </a>\n          </ic-navigation-item>\n      </ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"slotted-navigation-item\");\n  });\n\n  it(\"renders with slotted navigation item - collapsed icon labels true\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"true\">\n        <ic-navigation-item slot=\"primary-navigation\">\n            <a\n              slot=\"navigation-item\"\n              class=\"active\"\n              href=\"/child-item-2\"\n              aria-label=\"Daily Tippers\"\n            >\n              <svg\n                slot=\"icon\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n              Daily Tippers\n            </a>\n          </ic-navigation-item>\n          <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-navigation-item>\n      </ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"slotted-navigation-item-collapsed-icon-labels\"\n    );\n\n    expect(page.rootInstance.menuExpanded).toBe(false);\n    await page.rootInstance.toggleMenuExpanded();\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.rootInstance.menuExpanded).toBe(true);\n    expect(page.root).toMatchSnapshot(\n      \"slotted-navigation-item-collapsed-icon-labels-menu-toggle\"\n    );\n  });\n\n  it(\"tests menu toggle slotted nav items - collapsed icon labels false\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"false\">\n        <ic-navigation-item slot=\"primary-navigation\">\n            <a\n              slot=\"navigation-item\"\n              class=\"active\"\n              href=\"/child-item-2\"\n              aria-label=\"Daily Tippers\"\n            >\n              <svg\n                slot=\"icon\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n              Daily Tippers\n            </a>\n          </ic-navigation-item>\n      </ic-side-navigation>`,\n    });\n\n    expect(page.rootInstance.menuExpanded).toBe(false);\n    await page.rootInstance.toggleMenuExpanded();\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.rootInstance.menuExpanded).toBe(true);\n  });\n\n  it(\"should set navigation item width to 320px when expanded\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"false\">\n        <ic-navigation-item slot=\"primary-navigation\">\n            <a\n              slot=\"navigation-item\"\n              class=\"active\"\n              href=\"/child-item-2\"\n              aria-label=\"Daily Tippers\"\n            >\n              <svg\n                slot=\"icon\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n              Daily Tippers\n            </a>\n          </ic-navigation-item>\n      </ic-side-navigation>`,\n    });\n\n    page.rootInstance.menuExpanded = true;\n    await page.rootInstance.toggleMenuExpanded();\n\n    expect(\n      (\n        page.rootInstance.el as HTMLIcSideNavigationElement\n      ).style.getPropertyValue(\"--navigation-item-width\")\n    ).toBe(\"320px\");\n  });\n\n  it(\"renders expanded\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\" expanded=\"true\"></ic-side-navigation>`,\n    });\n\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.root).toMatchSnapshot(\"renders-expanded\");\n  });\n\n  it(\"renders with primary navigation items and collapsed icon labels\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\" collapsed-icon-labels=\"true\">\n          <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n            <svg\n              slot=\"icon\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"primary-navigation-items-and-collapsed-icon-labels\"\n    );\n  });\n\n  it(\"should test resizing\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"true\">\n    </ic-side-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);\n  });\n\n  it(\"tests menu toggle\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem, Button],\n      html: `<ic-side-navigation app-title=\"ACME\" version=\"v0.0.0\" status=\"BETA\">\n      <ic-navigation-item slot=\"primary-navigation\">\n      <a\n        slot=\"navigation-item\"\n        class=\"active\"\n        href=\"/child-item-2\"\n        aria-label=\"Daily Tippers\"\n      >\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n        Daily Tippers\n      </a>\n    </ic-navigation-item></ic-side-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    expect(page.rootInstance.menuOpen).toBe(false);\n    await page.rootInstance.toggleMenu();\n    await page.waitForChanges();\n    expect(page.rootInstance.menuOpen).toBe(true);\n    await page.rootInstance.toggleMenu();\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.rootInstance.menuOpen).toBe(false);\n  });\n\n  it(\"should test resizing - collapsed icon labels false\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"false\">\n      <ic-navigation-item slot=\"primary-navigation\">\n      <a\n        slot=\"navigation-item\"\n        class=\"active\"\n        href=\"/child-item-2\"\n        aria-label=\"Daily Tippers\"\n      >\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n        Daily Tippers\n      </a>\n    </ic-navigation-item>\n    </ic-side-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n  });\n\n  it(\"should test transitionend event\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"true\">\n        <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n            <svg\n              slot=\"icon\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </ic-navigation-item>\n        <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.rootInstance.menuExpanded).toBe(false);\n    await page.rootInstance.toggleMenuExpanded();\n    await new Promise((r) => setTimeout(r, 2000));\n\n    page.root.dispatchEvent(\n      new window.window.Event(\"transitionend\", {\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.menuExpanded).toBe(true);\n  });\n\n  it(\"should test theme change\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n    </ic-side-navigation>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"light\");\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n\n    // test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"renders with slotted primary secondary navigation and expanded\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem, NavigationGroup],\n      html: `<ic-side-navigation app-title=\"Application Name\" version=\"v0.0.0\" status=\"BETA\" expanded=\"true\">\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-navigation-item slot=\"primary-navigation\">\n        <a\n          slot=\"navigation-item\"\n          class=\"active\"\n          href=\"/child-item-2\"\n          aria-label=\"Daily Tippers\"\n        >\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n          Daily Tippers\n        </a>\n      </ic-navigation-item>\n      <ic-navigation-group\n        slot=\"primary-navigation\"\n        label=\"Second navigation group\"\n        expandable=\"true\"\n      >\n        <ic-navigation-item>\n          <a\n            slot=\"navigation-item\"\n            href=\"/child-item-2\"\n            aria-label=\"Daily Tippers\"\n          >\n            <svg\n              slot=\"icon\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            Daily Tippers\n          </a>\n        </ic-navigation-item>\n      </ic-navigation-group>\n      <ic-navigation-item slot=\"secondary-navigation\">\n        <a\n          slot=\"navigation-item\"\n          href=\"/bar\"\n          aria-label=\"bar\"\n        >\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n          bar\n        </a>\n      </ic-navigation-item>\n    </ic-side-navigation>\n    `,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-slotted-primary-secondary-navigation-and-expanded\"\n    );\n  });\n});\n"]}
+{"version":3,"file":"ic-side-navigation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-side-navigation/test/basic/ic-side-navigation.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationGroup } from \"../../../ic-navigation-group/ic-navigation-group\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { SideNavigation } from \"../../ic-side-navigation\";\n\ndescribe(\"ic-side-navigation\", () => {\n  it(\"renders with app-title\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation app-title=\"ACME\"></ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-app-title\");\n  });\n\n  it(\"renders with app title, version and status\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" status=\"BETA\"></ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-app-title-version-status\");\n  });\n\n  it(\"renders with primary navigation items\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\">\n          <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n            <svg\n              slot=\"icon\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-primary-navigation-items\");\n  });\n\n  it(\"renders with secondary navigation items\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n        <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-secondary-navigation-items\"\n    );\n  });\n\n  it(\"renders with slotted navigation item\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\">\n        <ic-navigation-item slot=\"primary-navigation\">\n            <a\n              slot=\"navigation-item\"\n              class=\"active\"\n              href=\"/child-item-2\"\n              aria-label=\"Daily Tippers\"\n            >\n              <svg\n                slot=\"icon\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n              Daily Tippers\n            </a>\n          </ic-navigation-item>\n      </ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"slotted-navigation-item\");\n  });\n\n  it(\"renders with slotted navigation item - collapsed icon labels true\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"true\">\n        <ic-navigation-item slot=\"primary-navigation\">\n            <a\n              slot=\"navigation-item\"\n              class=\"active\"\n              href=\"/child-item-2\"\n              aria-label=\"Daily Tippers\"\n            >\n              <svg\n                slot=\"icon\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n              Daily Tippers\n            </a>\n          </ic-navigation-item>\n          <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-navigation-item>\n      </ic-side-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"slotted-navigation-item-collapsed-icon-labels\"\n    );\n\n    expect(page.rootInstance.menuExpanded).toBe(false);\n    await page.rootInstance.toggleMenuExpanded();\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.rootInstance.menuExpanded).toBe(true);\n    expect(page.root).toMatchSnapshot(\n      \"slotted-navigation-item-collapsed-icon-labels-menu-toggle\"\n    );\n  });\n\n  it(\"tests menu toggle slotted nav items - collapsed icon labels false\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"false\">\n        <ic-navigation-item slot=\"primary-navigation\">\n            <a\n              slot=\"navigation-item\"\n              class=\"active\"\n              href=\"/child-item-2\"\n              aria-label=\"Daily Tippers\"\n            >\n              <svg\n                slot=\"icon\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n              Daily Tippers\n            </a>\n          </ic-navigation-item>\n      </ic-side-navigation>`,\n    });\n\n    expect(page.rootInstance.menuExpanded).toBe(false);\n    await page.rootInstance.toggleMenuExpanded();\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.rootInstance.menuExpanded).toBe(true);\n  });\n\n  it(\"should set navigation item width to 320px when expanded\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\" collapsed-icon-labels=\"false\">\n        <ic-navigation-item slot=\"primary-navigation\">\n            <a\n              slot=\"navigation-item\"\n              class=\"active\"\n              href=\"/child-item-2\"\n              aria-label=\"Daily Tippers\"\n            >\n              <svg\n                slot=\"icon\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                  fill=\"currentColor\"\n                ></path>\n              </svg>\n              Daily Tippers\n            </a>\n          </ic-navigation-item>\n      </ic-side-navigation>`,\n    });\n\n    page.rootInstance.menuExpanded = true;\n    await page.rootInstance.toggleMenuExpanded();\n\n    expect(\n      (\n        page.rootInstance.el as HTMLIcSideNavigationElement\n      ).style.getPropertyValue(\"--navigation-item-width\")\n    ).toBe(\"320px\");\n  });\n\n  it(\"renders expanded\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation app-title=\"ACME\" expanded=\"true\"></ic-side-navigation>`,\n    });\n\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.root).toMatchSnapshot(\"renders-expanded\");\n  });\n\n  it(\"renders with primary navigation items and collapsed icon labels\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\" collapsed-icon-labels=\"true\">\n          <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n            <svg\n              slot=\"icon\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"primary-navigation-items-and-collapsed-icon-labels\"\n    );\n  });\n\n  it(\"should test resizing\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"true\">\n    </ic-side-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.XL);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);\n  });\n\n  it(\"tests menu toggle\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem, Button],\n      html: `<ic-side-navigation app-title=\"ACME\" version=\"v0.0.0\" status=\"BETA\">\n      <ic-navigation-item slot=\"primary-navigation\">\n      <a\n        slot=\"navigation-item\"\n        class=\"active\"\n        href=\"/child-item-2\"\n        aria-label=\"Daily Tippers\"\n      >\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n        Daily Tippers\n      </a>\n    </ic-navigation-item></ic-side-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n    await page.waitForChanges();\n    expect(page.rootInstance.menuOpen).toBe(false);\n    await page.rootInstance.toggleMenu();\n    await page.waitForChanges();\n    expect(page.rootInstance.menuOpen).toBe(true);\n    await page.rootInstance.toggleMenu();\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n    expect(page.rootInstance.menuOpen).toBe(false);\n  });\n\n  it(\"should test resizing - collapsed icon labels false\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"false\">\n      <ic-navigation-item slot=\"primary-navigation\">\n      <a\n        slot=\"navigation-item\"\n        class=\"active\"\n        href=\"/child-item-2\"\n        aria-label=\"Daily Tippers\"\n      >\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n        Daily Tippers\n      </a>\n    </ic-navigation-item>\n    </ic-side-navigation>`,\n    });\n\n    await page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n  });\n\n  it(\"should test transitionend event\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem],\n      html: `\n        <ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\" collapsed-icon-labels=\"true\">\n        <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n            <svg\n              slot=\"icon\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </ic-navigation-item>\n        <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-navigation-item>\n        </ic-side-navigation>\n      `,\n    });\n\n    expect(page.rootInstance.menuExpanded).toBe(false);\n    await page.rootInstance.toggleMenuExpanded();\n    await new Promise((r) => setTimeout(r, 2000));\n\n    page.root.dispatchEvent(\n      new window.window.Event(\"transitionend\", {\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n    expect(page.rootInstance.menuExpanded).toBe(true);\n  });\n\n  it(\"should test theme change\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation],\n      html: `<ic-side-navigation version=\"v0.0.0\" status=\"BETA\" app-title=\"ACME\">\n    </ic-side-navigation>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"light\");\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n\n    // test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"renders with slotted primary secondary navigation and expanded\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationItem, NavigationGroup],\n      html: `<ic-side-navigation app-title=\"Application Name\" version=\"v0.0.0\" status=\"BETA\" expanded=\"true\">\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-navigation-item slot=\"primary-navigation\">\n        <a\n          slot=\"navigation-item\"\n          class=\"active\"\n          href=\"/child-item-2\"\n          aria-label=\"Daily Tippers\"\n        >\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n          Daily Tippers\n        </a>\n      </ic-navigation-item>\n      <ic-navigation-group\n        slot=\"primary-navigation\"\n        label=\"Second navigation group\"\n        expandable=\"true\"\n      >\n        <ic-navigation-item>\n          <a\n            slot=\"navigation-item\"\n            href=\"/child-item-2\"\n            aria-label=\"Daily Tippers\"\n          >\n            <svg\n              slot=\"icon\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n                fill=\"currentColor\"\n              ></path>\n            </svg>\n            Daily Tippers\n          </a>\n        </ic-navigation-item>\n      </ic-navigation-group>\n      <ic-navigation-item slot=\"secondary-navigation\">\n        <a\n          slot=\"navigation-item\"\n          href=\"/bar\"\n          aria-label=\"bar\"\n        >\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n              fill=\"currentColor\"\n            ></path>\n          </svg>\n          bar\n        </a>\n      </ic-navigation-item>\n    </ic-side-navigation>\n    `,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-slotted-primary-secondary-navigation-and-expanded\"\n    );\n  });\n});\n"]}

package/dist/collection/components/ic-skeleton/ic-skeleton.js

@@ -1,135 +1,135 @@
 import { Host, h } from "@stencil/core";
 export class Skeleton {
-  constructor() {
-    this.default = undefined;
-    this.hasChild = undefined;
-    this.heightOnly = undefined;
-    this.widthOnly = undefined;
-    this.appearance = "default";
-    this.light = false;
-    this.variant = "rectangle";
-  }
-  componentWillLoad() {
-    if (this.el.style.height === "" && this.el.style.width === "") {
-      this.default = true;
+    constructor() {
+        this.default = undefined;
+        this.hasChild = undefined;
+        this.heightOnly = undefined;
+        this.widthOnly = undefined;
+        this.appearance = "default";
+        this.light = false;
+        this.variant = "rectangle";
     }
-    else if (!(this.el.style.height === "") && this.el.style.width === "") {
-      this.heightOnly = true;
+    componentWillLoad() {
+        if (this.el.style.height === "" && this.el.style.width === "") {
+            this.default = true;
+        }
+        else if (!(this.el.style.height === "") && this.el.style.width === "") {
+            this.heightOnly = true;
+        }
+        else if (!(this.el.style.width === "") && this.el.style.height === "") {
+            this.widthOnly = true;
+        }
     }
-    else if (!(this.el.style.width === "") && this.el.style.height === "") {
-      this.widthOnly = true;
+    render() {
+        const { variant, light, appearance } = this;
+        this.hasChild = !!this.el.firstElementChild;
+        const defaultSkeletonStyle = {
+            height: variant == "text" ? "1em" : variant == "circle" ? "25px" : "93px",
+            width: variant == "circle" ? "25px" : "260px",
+        };
+        const heightSetStyle = {
+            height: this.el.style.height,
+            width: variant == "circle" ? "25px" : "260px",
+        };
+        const widthSetStyle = {
+            height: variant == "text" ? "1em" : variant == "circle" ? "25px" : "93px",
+            width: this.el.style.width,
+        };
+        return (h(Host, { class: {
+                ["skeleton"]: true,
+                ["circle"]: variant == "circle",
+                ["light"]: light || appearance === "light",
+            }, style: (!this.hasChild && this.default && defaultSkeletonStyle) ||
+                (this.heightOnly && heightSetStyle) ||
+                (this.widthOnly && widthSetStyle), "aria-disabled": "true" }, h("slot", null)));
     }
-  }
-  render() {
-    const { variant, light, appearance } = this;
-    this.hasChild = !!this.el.firstElementChild;
-    const defaultSkeletonStyle = {
-      height: variant == "text" ? "1em" : variant == "circle" ? "25px" : "93px",
-      width: variant == "circle" ? "25px" : "260px",
-    };
-    const heightSetStyle = {
-      height: this.el.style.height,
-      width: variant == "circle" ? "25px" : "260px",
-    };
-    const widthSetStyle = {
-      height: variant == "text" ? "1em" : variant == "circle" ? "25px" : "93px",
-      width: this.el.style.width,
-    };
-    return (h(Host, { class: {
-        ["skeleton"]: true,
-        ["circle"]: variant == "circle",
-        ["light"]: light || appearance === "light",
-      }, style: (!this.hasChild && this.default && defaultSkeletonStyle) ||
-        (this.heightOnly && heightSetStyle) ||
-        (this.widthOnly && widthSetStyle), "aria-disabled": "true" }, h("slot", null)));
-  }
-  static get is() { return "ic-skeleton"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ic-skeleton.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ic-skeleton.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "appearance": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"light\" | \"default\"",
-          "resolved": "\"default\" | \"light\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The appearance of the skeleton."
-        },
-        "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "light": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "This prop should not be used anymore. Set prop `appearance` to \"light\" instead."
-            }],
-          "text": ""
-        },
-        "attribute": "light",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcSkeletonVariants",
-          "resolved": "\"circle\" | \"rectangle\" | \"text\"",
-          "references": {
-            "IcSkeletonVariants": {
-              "location": "import",
-              "path": "./ic-skeleton.types",
-              "id": "src/components/ic-skeleton/ic-skeleton.types.ts::IcSkeletonVariants"
+    static get is() { return "ic-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"light\" | \"default\"",
+                    "resolved": "\"default\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The appearance of the skeleton."
+                },
+                "attribute": "appearance",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "light": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This prop should not be used anymore. Set prop `appearance` to \"light\" instead."
+                        }],
+                    "text": ""
+                },
+                "attribute": "light",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcSkeletonVariants",
+                    "resolved": "\"circle\" | \"rectangle\" | \"text\"",
+                    "references": {
+                        "IcSkeletonVariants": {
+                            "location": "import",
+                            "path": "./ic-skeleton.types",
+                            "id": "src/components/ic-skeleton/ic-skeleton.types.ts::IcSkeletonVariants"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the skeleton that will be displayed."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "\"rectangle\""
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The variant of the skeleton that will be displayed."
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "\"rectangle\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "default": {},
-      "hasChild": {},
-      "heightOnly": {},
-      "widthOnly": {}
-    };
-  }
-  static get elementRef() { return "el"; }
+        };
+    }
+    static get states() {
+        return {
+            "default": {},
+            "hasChild": {},
+            "heightOnly": {},
+            "widthOnly": {}
+        };
+    }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=ic-skeleton.js.map

package/dist/collection/components/ic-skeleton/ic-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-skeleton.js","sourceRoot":"","sources":["../../../src/components/ic-skeleton/ic-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQzE,MAAM,OAAO,QAAQ;;;;;;sBAWwB,SAAS;iBAK1B,KAAK;mBAKQ,WAAW;;EAElD,iBAAiB;IACf,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;MAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;SAAM,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;MACvE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;SAAM,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,EAAE;MACvE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB;EACH,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAE5C,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;IAE5C,MAAM,oBAAoB,GAAG;MAC3B,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MACzE,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KAC9C,CAAC;IAEF,MAAM,cAAc,GAAG;MACrB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM;MAC5B,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KAC9C,CAAC;IAEF,MAAM,aAAa,GAAG;MACpB,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MACzE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK;KAC3B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,UAAU,CAAC,EAAE,IAAI;QAClB,CAAC,QAAQ,CAAC,EAAE,OAAO,IAAI,QAAQ;QAC/B,CAAC,OAAO,CAAC,EAAE,KAAK,IAAI,UAAU,KAAK,OAAO;OAC3C,EACD,KAAK,EACH,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC;QACxD,CAAC,IAAI,CAAC,UAAU,IAAI,cAAc,CAAC;QACnC,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,mBAErB,MAAM;MAEpB,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\n\n  @State() default: boolean;\n  @State() hasChild: boolean;\n  @State() heightOnly: boolean;\n  @State() widthOnly: boolean;\n\n  /**\n   * The appearance of the skeleton.\n   */\n  @Prop() appearance?: \"light\" | \"default\" = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `appearance` to \"light\" instead.\n   */\n  @Prop() light?: boolean = false;\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  componentWillLoad(): void {\n    if (this.el.style.height === \"\" && this.el.style.width === \"\") {\n      this.default = true;\n    } else if (!(this.el.style.height === \"\") && this.el.style.width === \"\") {\n      this.heightOnly = true;\n    } else if (!(this.el.style.width === \"\") && this.el.style.height === \"\") {\n      this.widthOnly = true;\n    }\n  }\n\n  render() {\n    const { variant, light, appearance } = this;\n\n    this.hasChild = !!this.el.firstElementChild;\n\n    const defaultSkeletonStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const heightSetStyle = {\n      height: this.el.style.height,\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const widthSetStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: this.el.style.width,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"skeleton\"]: true,\n          [\"circle\"]: variant == \"circle\",\n          [\"light\"]: light || appearance === \"light\",\n        }}\n        style={\n          (!this.hasChild && this.default && defaultSkeletonStyle) ||\n          (this.heightOnly && heightSetStyle) ||\n          (this.widthOnly && widthSetStyle)\n        }\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-skeleton.js","sourceRoot":"","sources":["../../../src/components/ic-skeleton/ic-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQzE,MAAM,OAAO,QAAQ;;;;;;0BAWwB,SAAS;qBAK1B,KAAK;uBAKQ,WAAW;;IAElD,iBAAiB;QACf,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;YAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;aAAM,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;YACvE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;aAAM,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,EAAE;YACvE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAE5C,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC;QAE5C,MAAM,oBAAoB,GAAG;YAC3B,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YACzE,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;SAC9C,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM;YAC5B,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;SAC9C,CAAC;QAEF,MAAM,aAAa,GAAG;YACpB,MAAM,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YACzE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK;SAC3B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,UAAU,CAAC,EAAE,IAAI;gBAClB,CAAC,QAAQ,CAAC,EAAE,OAAO,IAAI,QAAQ;gBAC/B,CAAC,OAAO,CAAC,EAAE,KAAK,IAAI,UAAU,KAAK,OAAO;aAC3C,EACD,KAAK,EACH,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC;gBACxD,CAAC,IAAI,CAAC,UAAU,IAAI,cAAc,CAAC;gBACnC,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,mBAErB,MAAM;YAEpB,eAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\n\n  @State() default: boolean;\n  @State() hasChild: boolean;\n  @State() heightOnly: boolean;\n  @State() widthOnly: boolean;\n\n  /**\n   * The appearance of the skeleton.\n   */\n  @Prop() appearance?: \"light\" | \"default\" = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `appearance` to \"light\" instead.\n   */\n  @Prop() light?: boolean = false;\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  componentWillLoad(): void {\n    if (this.el.style.height === \"\" && this.el.style.width === \"\") {\n      this.default = true;\n    } else if (!(this.el.style.height === \"\") && this.el.style.width === \"\") {\n      this.heightOnly = true;\n    } else if (!(this.el.style.width === \"\") && this.el.style.height === \"\") {\n      this.widthOnly = true;\n    }\n  }\n\n  render() {\n    const { variant, light, appearance } = this;\n\n    this.hasChild = !!this.el.firstElementChild;\n\n    const defaultSkeletonStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const heightSetStyle = {\n      height: this.el.style.height,\n      width: variant == \"circle\" ? \"25px\" : \"260px\",\n    };\n\n    const widthSetStyle = {\n      height: variant == \"text\" ? \"1em\" : variant == \"circle\" ? \"25px\" : \"93px\",\n      width: this.el.style.width,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"skeleton\"]: true,\n          [\"circle\"]: variant == \"circle\",\n          [\"light\"]: light || appearance === \"light\",\n        }}\n        style={\n          (!this.hasChild && this.default && defaultSkeletonStyle) ||\n          (this.heightOnly && heightSetStyle) ||\n          (this.widthOnly && widthSetStyle)\n        }\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-skeleton/test/a11y/ic-skeleton.test.a11y.js

@@ -2,10 +2,10 @@ import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
 import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("skeleton component", () => {
-  it("passes accessibility", async () => {
-    const el = await fixture("<ic-skeleton/>");
-    checkShadowElementRendersCorrectly(el);
-    expect(await axe(el)).toHaveNoViolations();
-  });
+    it("passes accessibility", async () => {
+        const el = await fixture("<ic-skeleton/>");
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el)).toHaveNoViolations();
+    });
 });
 //# sourceMappingURL=ic-skeleton.test.a11y.js.map

package/dist/collection/components/ic-skeleton/test/a11y/ic-skeleton.test.a11y.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-skeleton.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-skeleton/test/a11y/ic-skeleton.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC3C,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"skeleton component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\"<ic-skeleton/>\");\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-skeleton.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-skeleton/test/a11y/ic-skeleton.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC3C,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"skeleton component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\"<ic-skeleton/>\");\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-skeleton/test/basic/ic-skeleton.spec.js

@@ -1,80 +1,80 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Skeleton } from "../../ic-skeleton";
 beforeAll(() => {
-  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+    jest.spyOn(console, "warn").mockImplementation(jest.fn());
 });
 describe("ic-skeleton", () => {
-  it("should render with default height and width", async () => {
-    const page = await newSpecPage({
-      components: [Skeleton],
-      html: `<ic-skeleton></ic-skeleton>`,
-    });
-    expect(page.root).toEqualHtml(`
+    it("should render with default height and width", async () => {
+        const page = await newSpecPage({
+            components: [Skeleton],
+            html: `<ic-skeleton></ic-skeleton>`,
+        });
+        expect(page.root).toEqualHtml(`
     <ic-skeleton aria-disabled="true" class="skeleton" style="height: 93px; width: 260px;">
       <mock:shadow-root>
         <slot></slot>
       </mock:shadow-root>
     </ic-skeleton>
     `);
-  });
-  it("should render with supplied height", async () => {
-    const page = await newSpecPage({
-      components: [Skeleton],
-      html: `<ic-skeleton style="height: 100px;"></ic-skeleton>`,
     });
-    expect(page.root).toEqualHtml(`
+    it("should render with supplied height", async () => {
+        const page = await newSpecPage({
+            components: [Skeleton],
+            html: `<ic-skeleton style="height: 100px;"></ic-skeleton>`,
+        });
+        expect(page.root).toEqualHtml(`
     <ic-skeleton aria-disabled="true" class="skeleton" style="height: 100px; width: 260px;">
       <mock:shadow-root>
         <slot></slot>
       </mock:shadow-root>
     </ic-skeleton>
     `);
-  });
-  it("should render with supplied width", async () => {
-    const page = await newSpecPage({
-      components: [Skeleton],
-      html: `<ic-skeleton style="width: 300px;"></ic-skeleton>`,
     });
-    expect(page.root).toEqualHtml(`
+    it("should render with supplied width", async () => {
+        const page = await newSpecPage({
+            components: [Skeleton],
+            html: `<ic-skeleton style="width: 300px;"></ic-skeleton>`,
+        });
+        expect(page.root).toEqualHtml(`
     <ic-skeleton aria-disabled="true" class="skeleton" style="width: 300px; height: 93px;">
       <mock:shadow-root>
         <slot></slot>
       </mock:shadow-root>
     </ic-skeleton>
     `);
-  });
-  it("should render with supplied height and width", async () => {
-    const page = await newSpecPage({
-      components: [Skeleton],
-      html: `<ic-skeleton style="height: 100px; width: 300px;"></ic-skeleton>`,
     });
-    expect(page.root).toEqualHtml(`
+    it("should render with supplied height and width", async () => {
+        const page = await newSpecPage({
+            components: [Skeleton],
+            html: `<ic-skeleton style="height: 100px; width: 300px;"></ic-skeleton>`,
+        });
+        expect(page.root).toEqualHtml(`
     <ic-skeleton aria-disabled="true" class="skeleton" style="height: 100px; width: 300px;">
       <mock:shadow-root>
         <slot></slot>
       </mock:shadow-root>
     </ic-skeleton>
     `);
-  });
-  it("should render circular variant", async () => {
-    const page = await newSpecPage({
-      components: [Skeleton],
-      html: `<ic-skeleton variant="circle"></ic-skeleton>`,
     });
-    expect(page.root).toEqualHtml(`
+    it("should render circular variant", async () => {
+        const page = await newSpecPage({
+            components: [Skeleton],
+            html: `<ic-skeleton variant="circle"></ic-skeleton>`,
+        });
+        expect(page.root).toEqualHtml(`
     <ic-skeleton aria-disabled="true" class="circle skeleton" variant="circle" style="height: 25px; width: 25px;">
       <mock:shadow-root>
         <slot></slot>
       </mock:shadow-root>
     </ic-skeleton>
     `);
-  });
-  it("should render text variant", async () => {
-    const page = await newSpecPage({
-      components: [Skeleton],
-      html: `<ic-skeleton variant="text"><ic-typography>Test</ic-typography></ic-skeleton>`,
     });
-    expect(page.root).toEqualHtml(`
+    it("should render text variant", async () => {
+        const page = await newSpecPage({
+            components: [Skeleton],
+            html: `<ic-skeleton variant="text"><ic-typography>Test</ic-typography></ic-skeleton>`,
+        });
+        expect(page.root).toEqualHtml(`
     <ic-skeleton aria-disabled="true" class="skeleton" variant="text">
       <mock:shadow-root>
         <slot></slot>
@@ -84,6 +84,6 @@ describe("ic-skeleton", () => {
       </ic-typography>
     </ic-skeleton>
     `);
-  });
+    });
 });
 //# sourceMappingURL=ic-skeleton.spec.js.map