@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

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

@@ -0,0 +1,105 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { MenuItem } from "../../ic-menu-item";
+import { Button } from "../../../ic-button/ic-button";
+describe("menu item variants", () => {
+  it("should render the default variant", async () => {
+    const page = await newSpecPage({
+      components: [MenuItem],
+      html: `<ic-menu-item
+            label="Default variant"
+          />`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render a menu item with a description", async () => {
+    const page = await newSpecPage({
+      components: [MenuItem],
+      html: `<ic-menu-item
+            label="Default variant"
+            description="This is the default variant of the menu item with a description"
+          />`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render with keyboard shortcut", async () => {
+    const page = await newSpecPage({
+      components: [MenuItem],
+      html: `<ic-menu-item
+              label="Toggle variant"
+              keyboard-shortcut="Cmd+"
+            />`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render the toggle variant", async () => {
+    const page = await newSpecPage({
+      components: [MenuItem, Button],
+      html: `<ic-menu-item
+            variant="toggle"
+            label="Toggle variant"
+            id="test-menu-item"
+          />`,
+    });
+    expect(page.root).toMatchSnapshot();
+    expect(page.rootInstance.variant).toMatch("toggle");
+    expect(page.rootInstance.toggleChecked).toBeFalsy();
+    const button = page.root.shadowRoot
+      .querySelector("li > ic-button")
+      .shadowRoot.querySelector("button");
+    button.click();
+    await page.waitForChanges;
+  });
+  it("should render the destructive variant", async () => {
+    const page = await newSpecPage({
+      components: [MenuItem],
+      html: `<ic-menu-item
+            variant="destuctive"
+            label="Destructive variant"
+          />`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  it("should render a menu item that triggers a popover menu instance", async () => {
+    const page = await newSpecPage({
+      components: [MenuItem],
+      html: `<ic-menu-item
+            variant="destuctive"
+            submenu-trigger-for="submenu-1"
+            label="Destructive variant"
+          />`,
+    });
+    expect(page.rootInstance.submenuTriggerFor).not.toBeUndefined();
+    expect(page.rootInstance.variant).toMatch("default");
+  });
+  it('should emit the triggerPopoverMenuInstance event when the menu item has the prop: "submenu-trigger-for" and is clicked', async () => {
+    const page = await newSpecPage({
+      components: [MenuItem, Button],
+      html: `<ic-menu-item
+      id="test-menu-item"
+            submenu-trigger-for="submenu-1"
+            label="I emit an event"
+          />`,
+    });
+    const eventSpy = jest.fn();
+    page.win.addEventListener("triggerPopoverMenuInstance", eventSpy);
+    expect(page.rootInstance.submenuTriggerFor).not.toBeUndefined();
+    const element = await document.getElementById("test-menu-item");
+    await element.click();
+    await page.waitForChanges();
+    await page.rootInstance.handleClick;
+  });
+  it("should prevent default action on click", async () => {
+    const page = await newSpecPage({
+      components: [MenuItem],
+      html: `<ic-menu-item
+      id="test-menu-item"
+            label="I emit an event"
+            submenu-trigger-for="test-submenu"
+          />`,
+    });
+    const mockEvent = { preventDefault: jest.fn() };
+    page.rootInstance.handleClick(mockEvent);
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+  });
+});
+//# sourceMappingURL=ic-menu-item.spec.js.map

package/dist/collection/components/ic-menu-item/test/basic/ic-menu-item.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-menu-item.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-menu-item/test/basic/ic-menu-item.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { MenuItem } from \"../../ic-menu-item\";\nimport { Button } from \"../../../ic-button/ic-button\";\n\ndescribe(\"menu item variants\", () => {\n  it(\"should render the default variant\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n            label=\"Default variant\"\n          />`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a menu item with a description\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n            label=\"Default variant\"\n            description=\"This is the default variant of the menu item with a description\"\n          />`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with keyboard shortcut\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n              label=\"Toggle variant\"\n              keyboard-shortcut=\"Cmd+\"\n            />`,\n    });\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render the toggle variant\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem, Button],\n      html: `<ic-menu-item\n            variant=\"toggle\"\n            label=\"Toggle variant\"\n            id=\"test-menu-item\"\n          />`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n    expect(page.rootInstance.variant).toMatch(\"toggle\");\n    expect(page.rootInstance.toggleChecked).toBeFalsy();\n\n    const button = page.root.shadowRoot\n      .querySelector(\"li > ic-button\")\n      .shadowRoot.querySelector(\"button\");\n\n    button.click();\n    await page.waitForChanges;\n  });\n\n  it(\"should render the destructive variant\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n            variant=\"destuctive\"\n            label=\"Destructive variant\"\n          />`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render a menu item that triggers a popover menu instance\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n            variant=\"destuctive\"\n            submenu-trigger-for=\"submenu-1\"\n            label=\"Destructive variant\"\n          />`,\n    });\n\n    expect(page.rootInstance.submenuTriggerFor).not.toBeUndefined();\n\n    expect(page.rootInstance.variant).toMatch(\"default\");\n  });\n\n  it('should emit the triggerPopoverMenuInstance event when the menu item has the prop: \"submenu-trigger-for\" and is clicked', async () => {\n    const page = await newSpecPage({\n      components: [MenuItem, Button],\n      html: `<ic-menu-item\n      id=\"test-menu-item\"\n            submenu-trigger-for=\"submenu-1\"\n            label=\"I emit an event\"\n          />`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"triggerPopoverMenuInstance\", eventSpy);\n    expect(page.rootInstance.submenuTriggerFor).not.toBeUndefined();\n\n    const element = await document.getElementById(\"test-menu-item\");\n\n    await element.click();\n\n    await page.waitForChanges();\n\n    await page.rootInstance.handleClick;\n  });\n\n  it(\"should prevent default action on click\", async () => {\n    const page = await newSpecPage({\n      components: [MenuItem],\n      html: `<ic-menu-item\n      id=\"test-menu-item\"\n            label=\"I emit an event\"\n            submenu-trigger-for=\"test-submenu\"\n          />`,\n    });\n\n    const mockEvent = { preventDefault: jest.fn() };\n    page.rootInstance.handleClick(mockEvent as unknown as MouseEvent);\n\n    expect(mockEvent.preventDefault).toHaveBeenCalled();\n  });\n});\n"]}

package/dist/collection/components/ic-navigation-button/ic-navigation-button.js

@@ -8,15 +8,24 @@ import { IcThemeForegroundEnum, } from "../../utils/types";
 export class NavigationButton {
   constructor() {
     this.inheritedAttributes = {};
-    this.label = undefined;
-    this.href = undefined;
-    this.target = undefined;
-    this.rel = undefined;
+    this.initialAppearance = getThemeForegroundColor();
+    this.mode = "navbar";
     this.download = false;
+    this.href = undefined;
     this.hreflang = undefined;
+    this.label = undefined;
     this.referrerpolicy = undefined;
-    this.mode = "navbar";
-    this.initialAppearance = getThemeForegroundColor();
+    this.rel = undefined;
+    this.target = undefined;
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, [
+      ...IC_INHERITED_ARIA,
+      "title",
+    ]);
+  }
+  componentDidLoad() {
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Navigation Button");
   }
   navBarMenuOpenHandler() {
     this.mode = "menu";
@@ -36,15 +45,6 @@ export class NavigationButton {
       this.buttonEl.focus();
     }
   }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, [
-      ...IC_INHERITED_ARIA,
-      "title",
-    ]);
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Navigation Button");
-  }
   render() {
     const { href, target, rel, download, referrerpolicy } = this;
     let label = "";
@@ -89,22 +89,23 @@ export class NavigationButton {
   }
   static get properties() {
     return {
-      "label": {
-        "type": "string",
+      "download": {
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | boolean",
+          "resolved": "boolean | string",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "The label info to display."
+          "text": "If `true`, the user can save the linked URL instead of navigating to it."
         },
-        "attribute": "label",
-        "reflect": false
+        "attribute": "download",
+        "reflect": false,
+        "defaultValue": "false"
       },
       "href": {
         "type": "string",
@@ -123,7 +124,7 @@ export class NavigationButton {
         "attribute": "href",
         "reflect": false
       },
-      "target": {
+      "hreflang": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -135,12 +136,12 @@ export class NavigationButton {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+          "text": "The human language of the linked URL."
         },
-        "attribute": "target",
+        "attribute": "hreflang",
         "reflect": false
       },
-      "rel": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -148,34 +149,37 @@ export class NavigationButton {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "The relationship of the linked URL as space-separated link types."
+          "text": "The label info to display."
         },
-        "attribute": "rel",
+        "attribute": "label",
         "reflect": false
       },
-      "download": {
-        "type": "any",
+      "referrerpolicy": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string | boolean",
-          "resolved": "boolean | string",
-          "references": {}
+          "original": "ReferrerPolicy",
+          "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
+          "references": {
+            "ReferrerPolicy": {
+              "location": "global"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the user can save the linked URL instead of navigating to it."
+          "text": "How much of the referrer to send when following the link."
         },
-        "attribute": "download",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "referrerpolicy",
+        "reflect": false
       },
-      "hreflang": {
+      "rel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -187,38 +191,34 @@ export class NavigationButton {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The human language of the linked URL."
+          "text": "The relationship of the linked URL as space-separated link types."
         },
-        "attribute": "hreflang",
+        "attribute": "rel",
         "reflect": false
       },
-      "referrerpolicy": {
+      "target": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ReferrerPolicy",
-          "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
-          "references": {
-            "ReferrerPolicy": {
-              "location": "global"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "How much of the referrer to send when following the link."
+          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
         },
-        "attribute": "referrerpolicy",
+        "attribute": "target",
         "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "mode": {},
-      "initialAppearance": {}
+      "initialAppearance": {},
+      "mode": {}
     };
   }
   static get methods() {

package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-button.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-button/ic-navigation-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  @State() initialAppearance = getThemeForegroundColor();\n\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n    ]);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n  }\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={this.label}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"icon\" name=\"icon\"></slot>\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-button.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-button/ic-navigation-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance = getThemeForegroundColor();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n    ]);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={this.label}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"icon\" name=\"icon\"></slot>\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,84 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Button } from "../../../ic-button/ic-button";
+import { NavigationButton } from "../../ic-navigation-button";
+describe("ic-navigation-button", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [NavigationButton],
+      html: `<ic-navigation-button
+        label="button1"
+        onclick="alert('test')"
+      >
+      <svg
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path
+          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"
+        />
+      </svg>
+    </ic-navigation-button>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ic-navigation-button label="button1" onclick="alert('test')">
+        <mock:shadow-root>
+          <ic-button aria-label="button1" appearance="light" size="large" variant="icon">
+            <slot name="icon" slot="icon"></slot>
+          </ic-button>
+        </mock:shadow-root>
+        <svg fill="#000000" height="24px" slot="icon" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0 0h24v24H0V0z" fill="none"></path>
+          <path 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"></path>
+        </svg>
+      </ic-navigation-button>
+    `);
+  });
+  it("renders differently if mode is menu", async () => {
+    const page = await newSpecPage({
+      components: [NavigationButton],
+      html: `<ic-navigation-button label="button1" onclick="alert('test')">
+      </ic-navigation-button>`,
+    });
+    page.rootInstance.mode = "menu";
+    const el = page.root.shadowRoot.querySelector("ic-button");
+    await page.waitForChanges();
+    expect(el.className).toEqual("popout-menu-button");
+  });
+  it("correctly sets mode on menu open and close", async () => {
+    const page = await newSpecPage({
+      components: [NavigationButton],
+      html: `<ic-navigation-button label="button1" onclick="alert('test')">
+      </ic-navigation-button>`,
+    });
+    await page.rootInstance.navBarMenuOpenHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.mode).toEqual("menu");
+    await page.rootInstance.navBarMenuCloseHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.mode).toEqual("navbar");
+  });
+  it("correctly sets appearance on theme change", async () => {
+    const page = await newSpecPage({
+      components: [NavigationButton],
+      html: `<ic-navigation-button label="button1" onclick="alert('test')">
+      </ic-navigation-button>`,
+    });
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.initialAppearance).toBe("dark");
+  });
+  it("correctly sets focus", async () => {
+    const page = await newSpecPage({
+      components: [NavigationButton, Button],
+      html: `<ic-navigation-button label="button1" onclick="alert('test')">
+      </ic-navigation-button>`,
+    });
+    await page.rootInstance.setFocus();
+  });
+});
+//# sourceMappingURL=ic-navigation-button.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-navigation-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-button/test/basic/ic-navigation-button.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;;;;;;;;;;;;;;;;;4BAiBgB;KACvB,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;EACrD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;IAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;IAChD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAE/C,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,CAAC;IACjD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EACnD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;IACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;IACzE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EAC3D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC;MACtC,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;EACrC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationButton } from \"../../ic-navigation-button\";\n\ndescribe(\"ic-navigation-button\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button\n        label=\"button1\"\n        onclick=\"alert('test')\"\n      >\n      <svg\n        slot=\"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-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n        <mock:shadow-root>\n          <ic-button aria-label=\"button1\" appearance=\"light\" size=\"large\" variant=\"icon\">\n            <slot name=\"icon\" slot=\"icon\"></slot>\n          </ic-button>\n        </mock:shadow-root>\n        <svg fill=\"#000000\" height=\"24px\" slot=\"icon\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n          <path 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\"></path>\n        </svg>\n      </ic-navigation-button>\n    `);\n  });\n\n  it(\"renders differently if mode is menu\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    page.rootInstance.mode = \"menu\";\n    const el = page.root.shadowRoot.querySelector(\"ic-button\");\n\n    await page.waitForChanges();\n    expect(el.className).toEqual(\"popout-menu-button\");\n  });\n\n  it(\"correctly sets mode on menu open and close\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.navBarMenuOpenHandler();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.mode).toEqual(\"menu\");\n\n    await page.rootInstance.navBarMenuCloseHandler();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.mode).toEqual(\"navbar\");\n  });\n\n  it(\"correctly sets appearance on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.initialAppearance).toBe(\"dark\");\n  });\n\n  it(\"correctly sets focus\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton, Button],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.setFocus();\n  });\n});\n"]}

package/dist/collection/components/ic-navigation-group/ic-navigation-group.css

@@ -570,7 +570,7 @@ video {
 
 :host .navigation-group-dropdown {
   background-color: var(--ic-architectural-20);
-  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-300);
+  border-bottom: var(--ic-border-default);
   position: absolute;
   left: 0;
   right: 0;