@ukic/web-components 2.1.0-beta.9 → 2.2.0

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":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,CAAC,EACD,MAAM,EACN,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EACjB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAGL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAG3B;;GAEG;AASH,MAAM,OAAO,gBAAgB;;IAwCnB,wBAAmB,GAA6B,EAAE,CAAC;;;;;oBAlBrB,KAAK;;;gBAaT,QAAQ;6BAEb,uBAAuB,EAAE;;EAMtD,qBAAqB;IACnB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;EACrB,CAAC;EAGD,sBAAsB;IACpB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;EACvB,CAAC;EAGD,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC;EACtC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;KACvB;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE;MACpD,GAAG,iBAAiB;MACpB,OAAO;KACR,CAAC,CAAC;EACL,CAAC;EAED,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,mBAAmB,CACpB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAE7D,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,IAAI,SAAS,GAAG,EAAE,CAAC;IACnB,IAAI,OAAO,GAAwB,MAAM,CAAC;IAC1C,IAAI,UAAU,GACZ,IAAI,CAAC,iBAAiB,CAAC;IACzB,IAAI,IAAI,GAAwB,OAAO,CAAC;IACxC,IAAI,SAAS,GAAG,KAAK,CAAC;IAEtB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;MACxB,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;MACnB,OAAO,GAAG,UAAU,CAAC;MACrB,UAAU,GAAG,qBAAqB,CAAC,OAAO,CAAC;MAC3C,IAAI,GAAG,SAAS,CAAC;MACjB,SAAS,GAAG,IAAI,CAAC;MACjB,SAAS,GAAG,oBAAoB,CAAC;KAClC;IAED,MAAM,WAAW,GAAG;MAClB,OAAO;MACP,UAAU;MACV,IAAI;MACJ,IAAI;MACJ,MAAM;MACN,GAAG;MACH,QAAQ;MACR,cAAc;MACd,SAAS;KACV,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;MACrD,+BACE,KAAK,EAAE,SAAS,gBACJ,IAAI,CAAC,KAAK,EACtB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,IAC7B,WAAW,EACX,IAAI,CAAC,mBAAmB;QAE3B,KAAK;QACN,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CAC3B,CACP,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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

@@ -450,7 +450,7 @@ video {
 }
 
 :host(.in-side-menu) {
-  border-bottom: 0.063rem solid var(--ic-architectural-200);
+  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-200);
   padding: var(--ic-space-md) 0;
 }
 
@@ -570,7 +570,7 @@ video {
 
 :host .navigation-group-dropdown {
   background-color: var(--ic-architectural-20);
-  border-bottom: 0.063rem solid var(--ic-architectural-300);
+  border-bottom: var(--ic-border-default);
   position: absolute;
   left: 0;
   right: 0;
@@ -640,11 +640,3 @@ video {
   left: var(--navigation-group-title-position-left);
   white-space: nowrap;
 }
-
-.menu-visibility-visible {
-  visibility: visible;
-}
-
-.menu-visibility-hidden {
-  visibility: hidden;
-}

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

@@ -4,6 +4,9 @@ import chevronIcon from "../../assets/chevron-icon.svg";
 export class NavigationGroup {
   constructor() {
     this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 50;
+    this.IC_NAVIGATION_ITEM = "ic-navigation-item";
+    this.mouseGate = false;
+    this.nodeName = "IC-NAVIGATION-GROUP";
     this.sideNavExpandHandler = () => {
       setTimeout(() => this.setInitialGroupedLinksWrapperHeight(), this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
     };
@@ -15,7 +18,9 @@ export class NavigationGroup {
       }
     };
     this.setGroupedNavItemTabIndex = (tabIndexValue) => {
-      this.el.querySelectorAll("ic-navigation-item").forEach((navigationItem) => {
+      this.el
+        .querySelectorAll(this.IC_NAVIGATION_ITEM)
+        .forEach((navigationItem) => {
         const navItem = navigationItem.shadowRoot.querySelector("a") ||
           navigationItem.querySelector("a");
         if (navItem) {
@@ -55,16 +60,15 @@ export class NavigationGroup {
       }
     };
     this.handleTopNavKeydown = (ev) => {
-      if (!this.inTopNavSideMenu && ev.key === "Escape") {
-        this.hideDropdown();
-        this.el.blur();
-      }
-      else if (ev.key === " " || ev.key === "Enter") {
+      if (ev.key === " " || ev.key === "Enter") {
         this.toggleDropdown();
       }
+      else if (!this.inTopNavSideMenu && ev.key === "Escape") {
+        this.hideDropdown();
+      }
     };
     this.handleKeydown = (ev) => {
-      if (ev.key === "Enter" || ev.key === "Space") {
+      if (ev.key === "Enter" || ev.key === " " || ev.key === "Escape") {
         switch (this.navigationType) {
           case "top":
             this.handleTopNavKeydown(ev);
@@ -80,16 +84,40 @@ export class NavigationGroup {
       }
     };
     this.handleMouseLeave = (ev) => {
-      const target = ev.relatedTarget;
-      if (!this.el.contains(target) &&
-        target !== this.dropdown &&
+      const relTarget = ev.relatedTarget;
+      this.mouseGate = false;
+      if (!this.el.contains(relTarget) &&
+        relTarget !== this.dropdown &&
         document.activeElement !== this.el &&
-        !this.el.contains(document.activeElement)) {
+        !this.el.contains(document.activeElement) &&
+        relTarget.nodeName === this.nodeName &&
+        this.dropdownOpen === true) {
+        this.mouseGate = true;
         this.hideDropdown();
       }
+      else if (!this.el.contains(relTarget) &&
+        relTarget !== this.dropdown &&
+        !this.el.contains(document.activeElement)) {
+        this.mouseGate = false;
+        setTimeout(() => {
+          this.dropdownOpen ? this.hideDropdown() : null;
+        }, 500);
+      }
     };
-    this.triggerShowDropdown = () => {
-      this.showDropdown();
+    this.handleMouseEnter = (ev) => {
+      const relTarget = ev.relatedTarget;
+      document.addEventListener("keydown", this.handleKeydown);
+      if (relTarget.nodeName === this.nodeName && this.mouseGate === true) {
+        this.showDropdown();
+      }
+      else if (this.dropdownOpen === false &&
+        relTarget !== null &&
+        this.mouseGate === false) {
+        this.mouseGate = true;
+        setTimeout(() => {
+          this.mouseGate && this.showDropdown();
+        }, 500);
+      }
     };
     this.renderDropdownGroupedLinks = () => (h("div", { class: {
         ["navigation-group-dropdown"]: !this.inTopNavSideMenu,
@@ -104,8 +132,8 @@ export class NavigationGroup {
      * smoothness of expand/collapse animations
      */
     this.getNavigationChildItemsHeight = () => {
-      const navigationItemLength = this.el.querySelectorAll("ic-navigation-item").length || 0;
-      const navigationItem = this.el.querySelector("ic-navigation-item") || null;
+      const navigationItemLength = this.el.querySelectorAll(this.IC_NAVIGATION_ITEM).length || 0;
+      const navigationItem = this.el.querySelector(this.IC_NAVIGATION_ITEM) || null;
       if (this.navigationType === "side" &&
         !!navigationItemLength &&
         navigationItem) {
@@ -128,15 +156,45 @@ export class NavigationGroup {
       }
       return null;
     };
-    this.label = undefined;
-    this.expandable = false;
-    this.dropdownOpen = false;
-    this.inTopNavSideMenu = false;
     this.deviceSize = DEVICE_SIZES.XL;
+    this.dropdownOpen = false;
+    this.expanded = true;
     this.focusStyle = getThemeForegroundColor();
+    this.inTopNavSideMenu = false;
     this.navigationType = undefined;
     this.parentEl = undefined;
-    this.expanded = true;
+    this.expandable = false;
+    this.label = undefined;
+  }
+  disconnectedCallback() {
+    if (this.navigationType === "side") {
+      this.parentEl.removeEventListener("sideNavExpanded", this.sideNavExpandHandler);
+    }
+    else if (this.navigationType === "top") {
+      this.parentEl.removeEventListener("topNavResized", this.topNavResizedHandler);
+    }
+  }
+  componentWillLoad() {
+    this.deviceSize = getCurrentDeviceSize();
+    const navParentDetails = getNavItemParentDetails(this.el);
+    this.navigationType = navParentDetails.navType;
+    this.parentEl = navParentDetails.parent;
+    if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === "top") {
+      this.inTopNavSideMenu = true;
+    }
+    if (this.navigationType === "side") {
+      this.parentEl.addEventListener("sideNavExpanded", this.sideNavExpandHandler);
+    }
+    else if (this.navigationType === "top") {
+      this.parentEl.addEventListener("topNavResized", this.topNavResizedHandler);
+    }
+  }
+  componentDidLoad() {
+    /**
+     * debounce is required as the incorrect height was retrieved instantly after
+     * componentDidLoad is invoked.
+     */
+    setTimeout(() => this.setInitialGroupedLinksWrapperHeight(), this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
   }
   childBlurHandler() {
     this.hideDropdown();
@@ -165,40 +223,11 @@ export class NavigationGroup {
     }
   }
   hideDropdown() {
+    document.removeEventListener("keydown", this.handleKeydown);
     if (this.dropdownOpen) {
       this.toggleDropdown();
     }
   }
-  componentWillLoad() {
-    this.deviceSize = getCurrentDeviceSize();
-    const navParentDetails = getNavItemParentDetails(this.el);
-    this.navigationType = navParentDetails.navType;
-    this.parentEl = navParentDetails.parent;
-    if (this.deviceSize <= DEVICE_SIZES.L && this.navigationType === "top") {
-      this.inTopNavSideMenu = true;
-    }
-    if (this.navigationType === "side") {
-      this.parentEl.addEventListener("sideNavExpanded", this.sideNavExpandHandler);
-    }
-    else if (this.navigationType === "top") {
-      this.parentEl.addEventListener("topNavResized", this.topNavResizedHandler);
-    }
-  }
-  componentDidLoad() {
-    /**
-     * debounce is required as the incorrect height was retrieved instantly after
-     * componentDidLoad is invoked.
-     */
-    setTimeout(() => this.setInitialGroupedLinksWrapperHeight(), this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS);
-  }
-  disconnectedCallback() {
-    if (this.navigationType === "side") {
-      this.parentEl.removeEventListener("sideNavExpanded", this.sideNavExpandHandler);
-    }
-    else if (this.navigationType === "top") {
-      this.parentEl.removeEventListener("topNavResized", this.topNavResizedHandler);
-    }
-  }
   render() {
     const { label, dropdownOpen, inTopNavSideMenu, expandable } = this;
     const NavigationGroupElement = !inTopNavSideMenu || expandable ? "button" : "div";
@@ -207,9 +236,9 @@ export class NavigationGroup {
         expanded: this.expanded,
         collapsed: !this.expanded,
         ["navigation-group-side-nav"]: this.navigationType === "side",
-      }, role: "listitem" }, h(NavigationGroupElement, { tabindex: inTopNavSideMenu && !expandable ? "-1" : "0", onMouseOver: !inTopNavSideMenu && this.navigationType === "top"
-        ? this.triggerShowDropdown
-        : null, onMouseLeave: this.navigationType === "top" && this.handleMouseLeave, onBlur: this.handleBlur, onClick: expandable ? this.handleClick : null, onKeyDown: this.handleKeydown, class: {
+      }, role: "listitem" }, h(NavigationGroupElement, { onMouseEnter: !inTopNavSideMenu &&
+        this.navigationType === "top" &&
+        this.handleMouseEnter, onMouseLeave: this.navigationType === "top" && this.handleMouseLeave, tabindex: inTopNavSideMenu && !expandable ? "-1" : "0", onBlur: this.handleBlur, onClick: expandable ? this.handleClick : null, onKeyDown: this.handleKeydown, class: {
         ["navigation-group"]: true,
         [this.focusStyle]: !inTopNavSideMenu,
         ["navigation-group-side-menu"]: inTopNavSideMenu && !expandable,
@@ -238,52 +267,52 @@ export class NavigationGroup {
   }
   static get properties() {
     return {
-      "label": {
-        "type": "string",
+      "expandable": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The label to display on the group."
+          "text": "If `true`, the group will be expandable in the side menu."
         },
-        "attribute": "label",
-        "reflect": false
+        "attribute": "expandable",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "expandable": {
-        "type": "boolean",
+      "label": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the group will be expandable in the side menu."
+          "text": "The label to display on the group."
         },
-        "attribute": "expandable",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "label",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "dropdownOpen": {},
-      "inTopNavSideMenu": {},
       "deviceSize": {},
+      "dropdownOpen": {},
+      "expanded": {},
       "focusStyle": {},
+      "inTopNavSideMenu": {},
       "navigationType": {},
-      "parentEl": {},
-      "expanded": {}
+      "parentEl": {}
     };
   }
   static get methods() {