@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/collection/components/ic-side-navigation/ic-side-navigation.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-side-navigation.types.js","sourceRoot":"","sources":["../../../src/components/ic-side-navigation/ic-side-navigation.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IcThemeForeground } from \"../../utils/types\";\n\nexport interface IcTopBar {\n  isSDevice: boolean;\n  foregroundColor: IcThemeForeground;\n  menuOpen: boolean;\n  href: string;\n  isAppNameSubtitleVariant: boolean;\n  appTitle: string;\n}\n\nexport interface IcExpandedDetail {\n  sideNavExpanded: boolean;\n  sideNavMobile: boolean;\n}\n"]}
+{"version":3,"file":"ic-side-navigation.types.js","sourceRoot":"","sources":["../../../src/components/ic-side-navigation/ic-side-navigation.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IcBrandForeground } from \"../../utils/types\";\n\nexport interface IcTopBar {\n  isSDevice: boolean;\n  foregroundColor: IcBrandForeground;\n  menuOpen: boolean;\n  href: string;\n  isAppNameSubtitleVariant: boolean;\n  appTitle: string;\n}\n\nexport interface IcExpandedDetail {\n  sideNavExpanded: boolean;\n  sideNavMobile: boolean;\n}\n"]}

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

@@ -146,7 +146,7 @@ describe("ic-side-navigation", () => {
         });
         expect(page.root).toMatchSnapshot("slotted-navigation-item-collapsed-icon-labels");
         expect(page.rootInstance.menuExpanded).toBe(false);
-        await page.rootInstance.toggleMenuExpanded();
+        await page.rootInstance.toggleMenuExpanded(true);
         await page.waitForChanges();
         await new Promise((r) => setTimeout(r, 2000));
         expect(page.rootInstance.menuExpanded).toBe(true);
@@ -182,7 +182,7 @@ describe("ic-side-navigation", () => {
       </ic-side-navigation>`,
         });
         expect(page.rootInstance.menuExpanded).toBe(false);
-        await page.rootInstance.toggleMenuExpanded();
+        await page.rootInstance.toggleMenuExpanded(true);
         await page.waitForChanges();
         await new Promise((r) => setTimeout(r, 2000));
         expect(page.rootInstance.menuExpanded).toBe(true);
@@ -378,7 +378,7 @@ describe("ic-side-navigation", () => {
       `,
         });
         expect(page.rootInstance.menuExpanded).toBe(false);
-        await page.rootInstance.toggleMenuExpanded();
+        await page.rootInstance.toggleMenuExpanded(true);
         await new Promise((r) => setTimeout(r, 2000));
         page.root.dispatchEvent(new window.window.Event("transitionend", {
             bubbles: true,
@@ -387,16 +387,16 @@ describe("ic-side-navigation", () => {
         await page.waitForChanges();
         expect(page.rootInstance.menuExpanded).toBe(true);
     });
-    it("should test theme change", async () => {
+    it("should test brand change", async () => {
         const page = await newSpecPage({
             components: [SideNavigation],
             html: `<ic-side-navigation version="v0.0.0" status="BETA" app-title="ACME">
     </ic-side-navigation>`,
         });
-        await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+        await page.rootInstance.brandChangeHandler({ detail: { mode: "dark" } });
         await page.waitForChanges();
         expect(page.rootInstance.foregroundColor).toBe("dark");
-        await page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
+        await page.rootInstance.brandChangeHandler({ detail: { mode: "light" } });
         await page.waitForChanges();
         expect(page.rootInstance.foregroundColor).toBe("light");
         //call runResizeObserver

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(\"should render 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(\"should render 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(\"should render 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(\"should render 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(\"should render 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(\"should render 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(\"should test 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(\"should render 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(\"should render 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(\"should test 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(\"should render 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":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,4DAA4D;SACnE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAChE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,yGAAyG;SAChH,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,uCAAuC,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YAC5C,IAAI,EAAE;;;;;;;;;;;;;;;;;;OAkBL;SACF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,uCAAuC,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YAC5C,IAAI,EAAE;;;;;;;;;;;;;;;;;;OAkBL;SACF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,yCAAyC,CAC1C,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YAC5C,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;4BAwBgB;SACvB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,yBAAyB,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yEAAyE,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YAC5C,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAuCgB;SACvB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,+CAA+C,CAChD,CAAC;QAEF,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnD,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACjD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClD,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,2DAA2D,CAC5D,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yEAAyE,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YAC5C,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;4BAwBgB;SACvB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnD,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACjD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;QACvE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YAC5C,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;4BAwBgB;SACvB,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC;QACtC,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,CAAC;QAE7C,MAAM,CAEF,IAAI,CAAC,YAAY,CAAC,EACnB,CAAC,KAAK,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CACpD,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YAC5C,IAAI,EAAE,4EAA4E;SACnF,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;QACrF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YAC5C,IAAI,EAAE;;;;;;;;;;;;;;;;;;OAkBL;SACF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,oDAAoD,CACrD,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE;0BACc;SACrB,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC/D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAE1D,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC/D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAE1D,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QAChE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,MAAM,CAAC;YACpD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;+CAuBmC;SAC1C,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC/D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC1D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/C,MAAM,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;QACrC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9C,MAAM,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;QACrC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9C,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YAC5C,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;0BAwBc;SACrB,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC/D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YAC5C,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCL;SACF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnD,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACjD,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;QAE9C,IAAI,CAAC,IAAI,CAAC,aAAa,CACrB,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe,EAAE;YACvC,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CACH,CAAC;QAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE;0BACc;SACrB,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;QACzE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEvD,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;QAC1E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAExD,wBAAwB;QACxB,MAAM,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,CAAC;QAE5C,6BAA6B;QAC7B,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sEAAsE,EAAE,KAAK,IAAI,EAAE;QACpF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,eAAe,CAAC;YAC7D,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwFP;SACA,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,gEAAgE,CACjE,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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(\"should render 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(\"should render 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(\"should render 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(\"should render 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(\"should render 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(\"should render 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(true);\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(\"should test 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(true);\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(\"should render 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(\"should render 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(\"should test 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(true);\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 brand 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.brandChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.foregroundColor).toBe(\"dark\");\n\n    await page.rootInstance.brandChangeHandler({ 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(\"should render 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.css

@@ -443,38 +443,20 @@ video {
 
 @keyframes loading {
   0% {
-    background-color: var(--ic-architectural-100);
+    background-color: var(--ic-skeleton-background);
   }
 
   50% {
-    background-color: var(--ic-architectural-200);
+    background-color: var(--ic-skeleton-background-secondary);
   }
 
   100% {
-    background-color: var(--ic-architectural-100);
+    background-color: var(--ic-skeleton-background);
   }
 }
 
-@keyframes loading-light {
-  0% {
-    background-color: var(--ic-architectural-600);
-  }
-
-  50% {
-    background-color: var(--ic-architectural-400);
-  }
-
-  100% {
-    background-color: var(--ic-architectural-600);
-  }
-}
-
-:host {
-  display: inline-block;
-}
-
 :host(.skeleton) {
-  background-color: var(--ic-architectural-100);
+  background-color: var(--ic-skeleton-background);
   border-radius: var(--ic-border-radius);
   animation: loading 1200ms infinite;
   display: inline-block;
@@ -489,11 +471,6 @@ video {
   border-radius: 50%;
 }
 
-:host(.ic-skeleton-light) {
-  background-color: var(--ic-architectural-600);
-  animation: loading-light 1200ms infinite;
-}
-
 @media (forced-colors: active) {
   :host(.skeleton) {
     -ms-high-contrast-adjust: none;

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

@@ -6,11 +6,11 @@ const DEFAULT_HEIGHTS = {
 };
 export class Skeleton {
     constructor() {
-        this.appearance = "default";
+        this.theme = "inherit";
         this.variant = "rectangle";
     }
     render() {
-        const { variant, appearance, el } = this;
+        const { variant, theme, el } = this;
         const style = !el.firstElementChild
             ? {
                 height: el.style.height || DEFAULT_HEIGHTS[variant],
@@ -20,7 +20,7 @@ export class Skeleton {
         return (h(Host, { class: {
                 skeleton: true,
                 "ic-skeleton-circle": variant === "circle",
-                "ic-skeleton-light": appearance === "light",
+                [`ic-theme-${theme}`]: theme !== "inherit",
             }, style: style, "aria-disabled": "true" }, h("slot", null)));
     }
     static get is() { return "ic-skeleton"; }
@@ -37,23 +37,29 @@ export class Skeleton {
     }
     static get properties() {
         return {
-            "appearance": {
+            "theme": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"light\" | \"default\"",
-                    "resolved": "\"default\" | \"light\"",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The appearance of the skeleton."
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
-                "attribute": "appearance",
+                "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"inherit\""
             },
             "variant": {
                 "type": "string",

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,MAAM,eAAe,CAAC;AAGlE,MAAM,eAAe,GAAG;IACtB,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,MAAM;CAClB,CAAC;AAOF,MAAM,OAAO,QAAQ;;0BAMwB,SAAS;uBAKb,WAAW;;IAElD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAEzC,MAAM,KAAK,GAAG,CAAC,EAAE,CAAC,iBAAiB;YACjC,CAAC,CAAC;gBACE,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,eAAe,CAAC,OAAO,CAAC;gBACnD,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;aACnE;YACH,CAAC,CAAC,SAAS,CAAC;QAEd,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,oBAAoB,EAAE,OAAO,KAAK,QAAQ;gBAC1C,mBAAmB,EAAE,UAAU,KAAK,OAAO;aAC5C,EACD,KAAK,EAAE,KAAK,mBACE,MAAM;YAEpB,eAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\n\nconst DEFAULT_HEIGHTS = {\n  text: \"1em\",\n  circle: \"25px\",\n  rectangle: \"93px\",\n};\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  /**\n   * The appearance of the skeleton.\n   */\n  @Prop() appearance?: \"light\" | \"default\" = \"default\";\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  render() {\n    const { variant, appearance, el } = this;\n\n    const style = !el.firstElementChild\n      ? {\n          height: el.style.height || DEFAULT_HEIGHTS[variant],\n          width: el.style.width || (variant === \"circle\" ? \"25px\" : \"260px\"),\n        }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          skeleton: true,\n          \"ic-skeleton-circle\": variant === \"circle\",\n          \"ic-skeleton-light\": appearance === \"light\",\n        }}\n        style={style}\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,MAAM,eAAe,CAAC;AAIlE,MAAM,eAAe,GAAG;IACtB,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,MAAM;CAClB,CAAC;AAOF,MAAM,OAAO,QAAQ;;qBAMW,SAAS;uBAKA,WAAW;;IAElD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAEpC,MAAM,KAAK,GAAG,CAAC,EAAE,CAAC,iBAAiB;YACjC,CAAC,CAAC;gBACE,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,eAAe,CAAC,OAAO,CAAC;gBACnD,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;aACnE;YACH,CAAC,CAAC,SAAS,CAAC;QAEd,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,oBAAoB,EAAE,OAAO,KAAK,QAAQ;gBAC1C,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C,EACD,KAAK,EAAE,KAAK,mBACE,MAAM;YAEpB,eAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst DEFAULT_HEIGHTS = {\n  text: \"1em\",\n  circle: \"25px\",\n  rectangle: \"93px\",\n};\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  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  render() {\n    const { variant, theme, el } = this;\n\n    const style = !el.firstElementChild\n      ? {\n          height: el.style.height || DEFAULT_HEIGHTS[variant],\n          width: el.style.width || (variant === \"circle\" ? \"25px\" : \"260px\"),\n        }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          skeleton: true,\n          \"ic-skeleton-circle\": variant === \"circle\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        style={style}\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,143 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  theme: "inherit",
+  variant: "rectangle",
+};
+
+export default {
+  title: "Web Components/Skeleton",
+  component: "ic-skeleton",
+};
+
+export const Rectangle = {
+  render: () =>
+    html` <ic-typography variant="h4">Default</ic-typography>
+      <ic-skeleton></ic-skeleton>
+      <ic-typography variant="h4">Inherited from child</ic-typography>
+      <ic-skeleton
+        ><div style="height:200px;width:450px;">Test text</div></ic-skeleton
+      >
+      <ic-typography variant="h4"
+        >Height and width set with styles</ic-typography
+      >
+      <ic-skeleton style="height:200px;width:200px;"></ic-skeleton>
+      <ic-typography variant="h4">Height set with styles</ic-typography>
+      <ic-skeleton style="height:75px;"></ic-skeleton>
+      <ic-typography variant="h4">Width set with styles</ic-typography>
+      <ic-skeleton style="width:450px;"></ic-skeleton>`,
+
+  name: "Rectangle",
+};
+
+export const Circle = {
+  render: () => html`<ic-skeleton variant="circle" />`,
+  name: "Circle",
+};
+
+export const Text = {
+  render: () =>
+    html` <ic-typography variant="h1">h1</ic-typography>
+      <ic-typography variant="h1"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="h2">h2</ic-typography>
+      <ic-typography variant="h2"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="h3">h3</ic-typography>
+      <ic-typography variant="h3"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="h4">h4</ic-typography>
+      <ic-typography variant="h4"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="subtitle-large">subtitle-large</ic-typography>
+      <ic-typography variant="subtitle-large"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="subtitle-small">subtitle-small</ic-typography>
+      <ic-typography variant="subtitle-small"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="body">body</ic-typography>
+      <ic-typography variant="body"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="caption">caption</ic-typography>
+      <ic-typography variant="caption"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="label">label</ic-typography>
+      <ic-typography variant="subtitle-small"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="caption-uppercase"
+        >caption uppercase</ic-typography
+      >
+      <ic-typography variant="caption-uppercase"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="label-uppercase">label uppercase</ic-typography>
+      <ic-typography variant="subtitle-small"
+        ><ic-skeleton variant="text"
+      /></ic-typography>`,
+
+  name: "Text",
+};
+
+export const Example = {
+  render: () =>
+    html` <ic-skeleton variant="circle" height="20"></ic-skeleton>
+      <div style="height:8px"></div>
+      <ic-typography variant="caption"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <div style="height:8px"></div>
+      <ic-skeleton></ic-skeleton>`,
+
+  name: "Example",
+};
+
+export const DarkMode = {
+  render: () =>
+    html` <div style="background-color:black;">
+      <ic-skeleton variant="circle" height="20" theme="dark"></ic-skeleton>
+      <div style="height:8px"></div>
+      <ic-typography variant="caption"
+        ><ic-skeleton variant="text" theme="dark"
+      /></ic-typography>
+      <div style="height:8px"></div>
+      <ic-skeleton theme="dark"></ic-skeleton>
+    </div>`,
+
+  name: "Dark mode",
+};
+
+export const Playground = {
+  render: (args) =>
+    html` <div>
+      <ic-skeleton
+        theme=${args.theme}
+        variant=${args.variant}
+        style="height: ${args.variant == "circle"
+          ? "20px"
+          : ""};width:${args.variant == "circle" ? "20px" : ""};"
+      ></ic-skeleton>
+    </div>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    variant: {
+      options: ["rectangle", "circle", "text"],
+
+      control: {
+        type: "radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-status-tag/ic-status-tag.css

@@ -472,7 +472,7 @@ video {
 
 .filled-warning {
   background-color: var(--ic-status-tag-warning);
-  --ic-typography-color: var(--ic-status-tag-outlined-text);
+  --ic-typography-color: var(--ic-status-tag-text-inverted);
 }
 
 .filled-danger {
@@ -496,30 +496,30 @@ video {
 .outlined-neutral {
   background-color: var(--ic-status-tag-outlined-background-neutral);
   border: var(--ic-border-width) solid var(--ic-status-tag-outlined-neutral);
-  --ic-typography-color: var(--ic-status-tag-outlined-text);
+  --ic-typography-color: var(--ic-status-tag-text-inverted);
 }
 
 .outlined-success {
   background-color: var(--ic-status-tag-outlined-background-success);
   border: var(--ic-border-width) solid var(--ic-status-tag-outlined-success);
-  --ic-typography-color: var(--ic-status-tag-outlined-text);
+  --ic-typography-color: var(--ic-status-tag-text-inverted);
 }
 
 .outlined-warning {
   background-color: var(--ic-status-tag-outlined-background-warning);
   border: var(--ic-border-width) solid var(--ic-status-tag-outlined-warning);
-  --ic-typography-color: var(--ic-status-tag-outlined-text);
+  --ic-typography-color: var(--ic-status-tag-text-inverted);
 }
 
 .outlined-danger {
   background-color: var(--ic-status-tag-outlined-background-error);
   border: var(--ic-border-width) solid var(--ic-status-tag-outlined-error);
-  --ic-typography-color: var(--ic-status-tag-outlined-text);
+  --ic-typography-color: var(--ic-status-tag-text-inverted);
 }
 
 @media (forced-colors: active) {
   .tag {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
     -ms-high-contrast-adjust: none;
     forced-color-adjust: none;
   }

package/dist/collection/components/ic-status-tag/ic-status-tag.js

@@ -7,19 +7,20 @@ export class StatusTag {
         this.size = "medium";
         this.status = "neutral";
         this.theme = "inherit";
+        this.uppercase = true;
         this.variant = "filled";
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Status Tag");
     }
     render() {
-        const { label, status, variant, size, announced, theme } = this;
+        const { label, status, variant, size, announced, theme, uppercase } = this;
         return (h(Host, { class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { class: {
                 ["tag"]: true,
                 [`${variant}-${status}`]: true,
                 ["outlined"]: variant === "outlined",
                 [`${size}`]: true,
-            } }, h("ic-typography", { variant: "label-uppercase", "apply-vertical-margins": false }, h("span", null, label)))));
+            } }, h("ic-typography", { variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", null, label)))));
     }
     static get is() { return "ic-status-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -136,6 +137,24 @@ export class StatusTag {
                 "reflect": false,
                 "defaultValue": "\"inherit\""
             },
+            "uppercase": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The letter case of the status tag's label."
+                },
+                "attribute": "uppercase",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/ic-status-tag/ic-status-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AASvE,MAAM,OAAO,SAAS;;yBAKU,KAAK;;oBAUV,QAAQ;sBAKM,SAAS;qBAKD,SAAS;uBAKrB,QAAQ;;IAE3C,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAChE,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS,EAAE,EACrD,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,gBACtB,QAAQ;YAEnB,cACE,KAAK,EAAE;oBACL,CAAC,KAAK,CAAC,EAAE,IAAI;oBACb,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;oBAC9B,CAAC,UAAU,CAAC,EAAE,OAAO,KAAK,UAAU;oBACpC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;iBAClB;gBAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK;oBAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStatusTagStatuses } from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-status-tag\",\n  styleUrl: \"ic-status-tag.css\",\n  shadow: true,\n})\nexport class StatusTag {\n  /**\n   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n   * Screen readers will announce changes to the `label`, but not the initial value.\n   */\n  @Prop() announced?: boolean = false;\n\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the status tag component.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: \"dark\" | \"light\" | \"inherit\" = \"inherit\";\n\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, variant, size, announced, theme } = this;\n    return (\n      <Host\n        class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}\n        role={announced ? \"status\" : null}\n        aria-label=\"Status\"\n      >\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${variant}-${status}`]: true,\n            [\"outlined\"]: variant === \"outlined\",\n            [`${size}`]: true,\n          }}\n        >\n          <ic-typography\n            variant=\"label-uppercase\"\n            apply-vertical-margins={false}\n          >\n            <span>{label}</span>\n          </ic-typography>\n        </strong>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AASvE,MAAM,OAAO,SAAS;;yBAKU,KAAK;;oBAUV,QAAQ;sBAKM,SAAS;qBAKD,SAAS;yBAK1B,IAAI;uBAKC,QAAQ;;IAE3C,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3E,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS,EAAE,EACrD,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,gBACtB,QAAQ;YAEnB,cACE,KAAK,EAAE;oBACL,CAAC,KAAK,CAAC,EAAE,IAAI;oBACb,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;oBAC9B,CAAC,UAAU,CAAC,EAAE,OAAO,KAAK,UAAU;oBACpC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;iBAClB;gBAED,qBACE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,4BACxB,KAAK;oBAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStatusTagStatuses } from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-status-tag\",\n  styleUrl: \"ic-status-tag.css\",\n  shadow: true,\n})\nexport class StatusTag {\n  /**\n   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n   * Screen readers will announce changes to the `label`, but not the initial value.\n   */\n  @Prop() announced?: boolean = false;\n\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the status tag component.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: \"dark\" | \"light\" | \"inherit\" = \"inherit\";\n\n  /**\n   * The letter case of the status tag's label.\n   */\n  @Prop() uppercase?: boolean = true;\n\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, variant, size, announced, theme, uppercase } = this;\n    return (\n      <Host\n        class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}\n        role={announced ? \"status\" : null}\n        aria-label=\"Status\"\n      >\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${variant}-${status}`]: true,\n            [\"outlined\"]: variant === \"outlined\",\n            [`${size}`]: true,\n          }}\n        >\n          <ic-typography\n            variant={uppercase ? \"label-uppercase\" : \"label\"}\n            apply-vertical-margins={false}\n          >\n            <span>{label}</span>\n          </ic-typography>\n        </strong>\n      </Host>\n    );\n  }\n}\n"]}