@ukic/web-components 3.0.0-alpha.3 → 3.0.0-alpha.5

package/dist/collection/components/ic-menu-item/ic-menu-item.js

@@ -13,20 +13,20 @@ export class MenuItem {
             }
             else if (this.variant === "toggle") {
                 e.preventDefault();
-                this.toggleChecked = !this.toggleChecked;
+                this.checked = !this.checked;
+                this.icToggleChecked.emit({
+                    checked: this.checked,
+                });
             }
-            this.handleMenuItemClick.emit({
-                label: this.label,
-                hasSubMenu: !!this.el.submenuTriggerFor,
-            });
+            this.handleMenuItemClick.emit(this.el);
         };
         this.getMenuItemAriaLabel = () => {
             let ariaLabel = this.label;
             if (isPropDefined(this.description)) {
                 ariaLabel = `${ariaLabel}, ${this.description}`;
             }
-            if (isPropDefined(this.keyboardShortcut)) {
-                ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;
+            if (isPropDefined(this.keyboardShortcutLabel)) {
+                ariaLabel = `${ariaLabel}, ${this.keyboardShortcutLabel}`;
             }
             if (this.variant === "destructive") {
                 ariaLabel = `${ariaLabel}, destructive`;
@@ -46,12 +46,12 @@ export class MenuItem {
                 return ariaLabel;
             }
         };
-        this.toggleChecked = false;
+        this.checked = false;
         this.description = undefined;
         this.disabled = false;
         this.href = undefined;
         this.hreflang = undefined;
-        this.keyboardShortcut = undefined;
+        this.keyboardShortcutLabel = undefined;
         this.label = undefined;
         this.referrerpolicy = undefined;
         this.rel = undefined;
@@ -77,20 +77,20 @@ export class MenuItem {
     render() {
         // A sub-component to layout the menu information correctly in ic-button
         const MenuItemInformation = () => {
-            return (h("div", { class: "menu-item-info" }, h("div", { class: "menu-labels" }, h("ic-typography", { class: "menu-item-label" }, this.label), this.keyboardShortcut && (h("ic-typography", { variant: "caption", class: "shortcut" }, this.keyboardShortcut))), this.description && (h("ic-typography", { class: "menu-item-description", variant: "caption" }, this.description))));
+            return (h("div", { class: "menu-item-info" }, h("div", { class: "menu-labels" }, h("ic-typography", { class: "menu-item-label" }, this.label), this.keyboardShortcutLabel && (h("ic-typography", { variant: "caption", class: "shortcut" }, this.keyboardShortcutLabel))), this.description && (h("ic-typography", { class: "menu-item-description", variant: "caption" }, this.description))));
         };
         return (h(Host, { class: {
                 ["ic-menu-item-disabled"]: this.disabled,
-            } }, h("li", { role: this.variant === "toggle" ? "menuitemcheckbox" : "menuitem", "aria-disabled": `${this.disabled}`, "aria-checked": this.variant === "toggle" ? this.toggleChecked : undefined }, h("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: isPropDefined(this.href), hreflang: isPropDefined(this.hreflang), target: isPropDefined(this.target), rel: isPropDefined(this.rel), referrerpolicy: this.referrerpolicy !== undefined ? this.referrerpolicy : null, "aria-disabled": `${this.disabled}`, "aria-label": this.getMenuItemAriaLabel(), ariaControlsId: isPropDefined(this.submenuTriggerFor)
-                ? `ic-popover-submenu-${this.submenuTriggerFor}`
-                : false, "aria-haspopup": isPropDefined(this.submenuTriggerFor) ||
+            } }, h("li", { role: this.variant === "toggle" ? "menuitemcheckbox" : "menuitem", "aria-disabled": `${this.disabled}`, "aria-checked": this.variant === "toggle"
+                ? this.checked
+                    ? "true"
+                    : "false"
+                : undefined }, h("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: isPropDefined(this.href), hreflang: isPropDefined(this.hreflang), target: isPropDefined(this.target), rel: isPropDefined(this.rel), referrerpolicy: this.referrerpolicy !== undefined ? this.referrerpolicy : null, "aria-disabled": `${this.disabled}`, "aria-label": this.getMenuItemAriaLabel(), "aria-haspopup": isPropDefined(this.submenuTriggerFor) ||
                 this.el.classList.contains("ic-popover-submenu-back-button")
                 ? "menu"
-                : false, ariaOwnsId: isPropDefined(this.submenuTriggerFor)
-                ? `ic-popover-submenu-${this.submenuTriggerFor}`
                 : false }, h("div", { class: "focus-border" }, isSlotUsed(this.el, "icon") && (h("span", { class: "icon" }, h("slot", { name: "icon" }))), h(MenuItemInformation, null), this.variant === "toggle" && (h("span", { class: {
                 ["check-icon"]: true,
-                ["hide"]: !this.toggleChecked,
+                ["hide"]: !this.checked,
             }, "aria-hidden": "true", innerHTML: Check })), isPropDefined(this.submenuTriggerFor) && (h("span", { class: { ["submenu-icon"]: true }, "aria-hidden": "true", innerHTML: Chevron })))))));
     }
     static get is() { return "ic-menu-item"; }
@@ -108,6 +108,24 @@ export class MenuItem {
     }
     static get properties() {
         return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`."
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "description": {
                 "type": "string",
                 "mutable": false,
@@ -177,7 +195,7 @@ export class MenuItem {
                 "attribute": "hreflang",
                 "reflect": false
             },
-            "keyboardShortcut": {
+            "keyboardShortcutLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -191,7 +209,7 @@ export class MenuItem {
                     "tags": [],
                     "text": "The label describing the keyboard shortcut for a menu item's action."
                 },
-                "attribute": "keyboard-shortcut",
+                "attribute": "keyboard-shortcut-label",
                 "reflect": false
             },
             "label": {
@@ -310,11 +328,6 @@ export class MenuItem {
             }
         };
     }
-    static get states() {
-        return {
-            "toggleChecked": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "childBlur",
@@ -348,8 +361,28 @@ export class MenuItem {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    label: string;\n    hasSubMenu: boolean;\n  }",
-                    "resolved": "{ label: string; hasSubMenu: boolean; }",
+                    "original": "HTMLIcMenuItemElement",
+                    "resolved": "HTMLIcMenuItemElement",
+                    "references": {
+                        "HTMLIcMenuItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLIcMenuItemElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "icToggleChecked",
+                "name": "icToggleChecked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks a menu item that is set to the toggle variant."
+                },
+                "complexType": {
+                    "original": "{\n    checked: boolean;\n  }",
+                    "resolved": "{ checked: boolean; }",
                     "references": {}
                 }
             }, {

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

@@ -1 +1 @@
-{"version":3,"file":"ic-menu-item.js","sourceRoot":"","sources":["../../../src/components/ic-menu-item/ic-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n  tag: \"ic-menu-item\",\n  styleUrl: \"ic-menu-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class MenuItem {\n  @Element() el: HTMLIcMenuItemElement;\n\n  @State() toggleChecked: boolean = false;\n\n  /**\n   * The description displayed in the menu item, below the label.\n   */\n  @Prop() description?: string;\n\n  /**\n   * If `true`, the menu item will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the menu item 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 describing the keyboard shortcut for a menu item's action.\n   */\n  @Prop() keyboardShortcut?: string;\n\n  /**\n   * The label to display in the menu item.\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   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n   */\n  @Prop() submenuTriggerFor?: 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  /**\n   * The variant of the menu item.\n   */\n  @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n    \"default\";\n\n  /**\n   * @internal Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item.\n   */\n  @Event() handleMenuItemClick: EventEmitter<{\n    label: string;\n    hasSubMenu: boolean;\n  }>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n   */\n  @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    // This ensures that trigger menu items are always set to the default variant\n    if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n      this.variant = \"default\";\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Menu Item\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    }\n  }\n\n  private handleClick = (e: Event): void => {\n    if (isPropDefined(this.submenuTriggerFor)) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      e.preventDefault();\n      this.toggleChecked = !this.toggleChecked;\n    }\n    this.handleMenuItemClick.emit({\n      label: this.label,\n      hasSubMenu: !!this.el.submenuTriggerFor,\n    });\n  };\n\n  private getMenuItemAriaLabel = (): string => {\n    let ariaLabel = this.label;\n\n    if (isPropDefined(this.description)) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (isPropDefined(this.keyboardShortcut)) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcut}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (isPropDefined(this.submenuTriggerFor)) {\n      ariaLabel = `${ariaLabel}, triggers submenu`;\n    }\n\n    if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n      ariaLabel = \"Go back to parent menu\";\n    }\n    const parentEl = this.el.parentElement;\n\n    if (\n      parentEl.tagName === \"IC-MENU-GROUP\" &&\n      (parentEl as HTMLIcMenuGroupElement).label\n    ) {\n      return `${ariaLabel}, ${\n        (parentEl as HTMLIcMenuGroupElement).label\n      } menu group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  render() {\n    // A sub-component to layout the menu information correctly in ic-button\n    const MenuItemInformation = () => {\n      return (\n        <div class=\"menu-item-info\">\n          <div class=\"menu-labels\">\n            <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n            {this.keyboardShortcut && (\n              <ic-typography variant=\"caption\" class=\"shortcut\">\n                {this.keyboardShortcut}\n              </ic-typography>\n            )}\n          </div>\n          {this.description && (\n            <ic-typography class=\"menu-item-description\" variant=\"caption\">\n              {this.description}\n            </ic-typography>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"ic-menu-item-disabled\"]: this.disabled,\n        }}\n      >\n        <li\n          role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n          aria-disabled={`${this.disabled}`}\n          aria-checked={\n            this.variant === \"toggle\" ? this.toggleChecked : undefined\n          }\n        >\n          <ic-button\n            fullWidth\n            variant=\"tertiary\"\n            onClick={this.handleClick}\n            href={isPropDefined(this.href)}\n            hreflang={isPropDefined(this.hreflang)}\n            target={isPropDefined(this.target)}\n            rel={isPropDefined(this.rel)}\n            referrerpolicy={\n              this.referrerpolicy !== undefined ? this.referrerpolicy : null\n            }\n            aria-disabled={`${this.disabled}`}\n            aria-label={this.getMenuItemAriaLabel()}\n            ariaControlsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n            aria-haspopup={\n              isPropDefined(this.submenuTriggerFor) ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n            ariaOwnsId={\n              isPropDefined(this.submenuTriggerFor)\n                ? `ic-popover-submenu-${this.submenuTriggerFor}`\n                : false\n            }\n          >\n            <div class=\"focus-border\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <span class=\"icon\">\n                  <slot name=\"icon\"></slot>\n                </span>\n              )}\n              <MenuItemInformation />\n              {this.variant === \"toggle\" && (\n                <span\n                  class={{\n                    [\"check-icon\"]: true,\n                    [\"hide\"]: !this.toggleChecked,\n                  }}\n                  aria-hidden=\"true\"\n                  innerHTML={Check}\n                />\n              )}\n              {isPropDefined(this.submenuTriggerFor) && (\n                <span\n                  class={{ [\"submenu-icon\"]: true }}\n                  aria-hidden=\"true\"\n                  innerHTML={Chevron}\n                />\n              )}\n            </div>\n          </ic-button>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-menu-item.js","sourceRoot":"","sources":["../../../src/components/ic-menu-item/ic-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcMenuItemVariants } from \"./ic-menu-item.types\";\nimport Check from \"../../assets/check-icon.svg\";\nimport Chevron from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot icon - Content will be placed to the left of the menu item label.\n */\n\n@Component({\n  tag: \"ic-menu-item\",\n  styleUrl: \"ic-menu-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class MenuItem {\n  @Element() el: HTMLIcMenuItemElement;\n\n  /**\n   * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * The description displayed in the menu item, below the label.\n   */\n  @Prop() description?: string;\n\n  /**\n   * If `true`, the menu item will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the menu item 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 describing the keyboard shortcut for a menu item's action.\n   */\n  @Prop() keyboardShortcutLabel?: string;\n\n  /**\n   * The label to display in the menu item.\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   * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.\n   */\n  @Prop() submenuTriggerFor?: 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  /**\n   * The variant of the menu item.\n   */\n  @Prop({ mutable: true, reflect: true }) variant: IcMenuItemVariants =\n    \"default\";\n\n  /**\n   * @internal Emitted when item loses focus.\n   */\n  @Event() childBlur: EventEmitter<void>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item.\n   */\n  @Event() handleMenuItemClick: EventEmitter<HTMLIcMenuItemElement>;\n\n  /**\n   * Emitted when the user clicks a menu item that is set to the toggle variant.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  /**\n   * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.\n   */\n  @Event() triggerPopoverMenuInstance: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    // This ensures that trigger menu items are always set to the default variant\n    if (isPropDefined(this.submenuTriggerFor) && this.variant !== \"default\") {\n      this.variant = \"default\";\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Menu Item\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    }\n  }\n\n  private handleClick = (e: Event): void => {\n    if (isPropDefined(this.submenuTriggerFor)) {\n      this.triggerPopoverMenuInstance.emit();\n    } else if (this.variant === \"toggle\") {\n      e.preventDefault();\n      this.checked = !this.checked;\n      this.icToggleChecked.emit({\n        checked: this.checked,\n      });\n    }\n    this.handleMenuItemClick.emit(this.el);\n  };\n\n  private getMenuItemAriaLabel = (): string => {\n    let ariaLabel = this.label;\n\n    if (isPropDefined(this.description)) {\n      ariaLabel = `${ariaLabel}, ${this.description}`;\n    }\n\n    if (isPropDefined(this.keyboardShortcutLabel)) {\n      ariaLabel = `${ariaLabel}, ${this.keyboardShortcutLabel}`;\n    }\n\n    if (this.variant === \"destructive\") {\n      ariaLabel = `${ariaLabel}, destructive`;\n    }\n\n    if (isPropDefined(this.submenuTriggerFor)) {\n      ariaLabel = `${ariaLabel}, triggers submenu`;\n    }\n\n    if (this.el.classList.contains(\"ic-popover-submenu-back-button\")) {\n      ariaLabel = \"Go back to parent menu\";\n    }\n    const parentEl = this.el.parentElement;\n\n    if (\n      parentEl.tagName === \"IC-MENU-GROUP\" &&\n      (parentEl as HTMLIcMenuGroupElement).label\n    ) {\n      return `${ariaLabel}, ${\n        (parentEl as HTMLIcMenuGroupElement).label\n      } menu group`;\n    } else {\n      return ariaLabel;\n    }\n  };\n\n  render() {\n    // A sub-component to layout the menu information correctly in ic-button\n    const MenuItemInformation = () => {\n      return (\n        <div class=\"menu-item-info\">\n          <div class=\"menu-labels\">\n            <ic-typography class=\"menu-item-label\">{this.label}</ic-typography>\n            {this.keyboardShortcutLabel && (\n              <ic-typography variant=\"caption\" class=\"shortcut\">\n                {this.keyboardShortcutLabel}\n              </ic-typography>\n            )}\n          </div>\n          {this.description && (\n            <ic-typography class=\"menu-item-description\" variant=\"caption\">\n              {this.description}\n            </ic-typography>\n          )}\n        </div>\n      );\n    };\n\n    return (\n      <Host\n        class={{\n          [\"ic-menu-item-disabled\"]: this.disabled,\n        }}\n      >\n        <li\n          role={this.variant === \"toggle\" ? \"menuitemcheckbox\" : \"menuitem\"}\n          aria-disabled={`${this.disabled}`}\n          aria-checked={\n            this.variant === \"toggle\"\n              ? this.checked\n                ? \"true\"\n                : \"false\"\n              : undefined\n          }\n        >\n          <ic-button\n            fullWidth\n            variant=\"tertiary\"\n            onClick={this.handleClick}\n            href={isPropDefined(this.href)}\n            hreflang={isPropDefined(this.hreflang)}\n            target={isPropDefined(this.target)}\n            rel={isPropDefined(this.rel)}\n            referrerpolicy={\n              this.referrerpolicy !== undefined ? this.referrerpolicy : null\n            }\n            aria-disabled={`${this.disabled}`}\n            aria-label={this.getMenuItemAriaLabel()}\n            aria-haspopup={\n              isPropDefined(this.submenuTriggerFor) ||\n              this.el.classList.contains(\"ic-popover-submenu-back-button\")\n                ? \"menu\"\n                : false\n            }\n          >\n            <div class=\"focus-border\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <span class=\"icon\">\n                  <slot name=\"icon\"></slot>\n                </span>\n              )}\n              <MenuItemInformation />\n              {this.variant === \"toggle\" && (\n                <span\n                  class={{\n                    [\"check-icon\"]: true,\n                    [\"hide\"]: !this.checked,\n                  }}\n                  aria-hidden=\"true\"\n                  innerHTML={Check}\n                />\n              )}\n              {isPropDefined(this.submenuTriggerFor) && (\n                <span\n                  class={{ [\"submenu-icon\"]: true }}\n                  aria-hidden=\"true\"\n                  innerHTML={Chevron}\n                />\n              )}\n            </div>\n          </ic-button>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -26,7 +26,7 @@ describe("menu item variants", () => {
             components: [MenuItem],
             html: `<ic-menu-item
               label="Toggle variant"
-              keyboard-shortcut="Cmd+"
+              keyboard-shortcut-label="Cmd+"
             />`,
         });
         expect(page.root).toMatchSnapshot();
@@ -42,7 +42,7 @@ describe("menu item variants", () => {
         });
         expect(page.root).toMatchSnapshot();
         expect(page.rootInstance.variant).toMatch("toggle");
-        expect(page.rootInstance.toggleChecked).toBeFalsy();
+        expect(page.rootInstance.checked).toBeFalsy();
         const button = page.root.shadowRoot
             .querySelector("li > ic-button")
             .shadowRoot.querySelector("button");

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

@@ -1 +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=\"destructive\"\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=\"destructive\"\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 if variant is 'toggle'\", 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            variant=\"toggle\"\n          />`,\n    });\n\n    const eventSpy = jest.fn();\n\n    const mockEvent = {\n      preventDefault: eventSpy,\n    };\n\n    await page.rootInstance.handleClick(mockEvent as unknown as MouseEvent);\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n});\n"]}
+{"version":3,"file":"ic-menu-item.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-menu-item/test/basic/ic-menu-item.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAEtD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;aAEC;SACR,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;aAGC;SACR,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;eAGG;SACV,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;YAC9B,IAAI,EAAE;;;;aAIC;SACR,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QACpC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC;QAE9C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU;aAChC,aAAa,CAAC,gBAAgB,CAAC;aAC/B,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAEtC,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;aAGC;SACR,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;QAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;aAIC;SACR,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;QAEhE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wHAAwH,EAAE,KAAK,IAAI,EAAE;QACtI,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;YAC9B,IAAI,EAAE;;;;aAIC;SACR,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC3B,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,4BAA4B,EAAE,QAAQ,CAAC,CAAC;QAClE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;QAEhE,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;QAEhE,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;QAEtB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;QAC7E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;aAIC;SACR,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAE3B,MAAM,SAAS,GAAG;YAChB,cAAc,EAAE,QAAQ;SACzB,CAAC;QAEF,MAAM,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,SAAkC,CAAC,CAAC;QAExE,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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-label=\"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.checked).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=\"destructive\"\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=\"destructive\"\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 if variant is 'toggle'\", 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            variant=\"toggle\"\n          />`,\n    });\n\n    const eventSpy = jest.fn();\n\n    const mockEvent = {\n      preventDefault: eventSpy,\n    };\n\n    await page.rootInstance.handleClick(mockEvent as unknown as MouseEvent);\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n});\n"]}

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

@@ -455,3 +455,17 @@ video {
   height: 100%;
   min-height: 2.5rem;
 }
+
+:host(.in-side-menu) ::part(button) {
+  color: var(--ic-top-navigation-icon-active);
+}
+
+:host(.in-side-menu) ::part(button):hover {
+  color: var(--ic-top-navigation-icon-hover);
+  background-color: var(--ic-top-navigation-icon-hover-background);
+}
+
+:host(.in-side-menu) ::part(button):active {
+  color: var(--ic-top-navigation-icon-pressed);
+  background-color: var(--ic-top-navigation-icon-pressed-background);
+}

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

@@ -34,6 +34,7 @@ export class NavigationButton {
         this.referrerpolicy = undefined;
         this.rel = undefined;
         this.target = undefined;
+        this.theme = "inherit";
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);
@@ -101,7 +102,10 @@ export class NavigationButton {
             fullWidth,
             disableTooltip,
         };
-        return (h(Host, { class: { ["in-side-menu"]: this.mode === "menu" } }, h("ic-button", Object.assign({ class: className, "aria-label": variant == "icon" ? this.label : null, ref: (el) => (this.buttonEl = el) }, buttonProps, this.inheritedAttributes), label, h("slot", { slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && variant === "icon" && (h("slot", { name: "badge" })))));
+        return (h(Host, { class: {
+                ["in-side-menu"]: this.mode === "menu",
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
+            } }, h("ic-button", Object.assign({ class: className, "aria-label": variant == "icon" ? this.label : null, ref: (el) => (this.buttonEl = el) }, buttonProps, this.inheritedAttributes, { monochrome: this.mode !== "menu", theme: getThemeForegroundColor() == "light" ? "light" : "dark" }), label, h("slot", { slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && variant === "icon" && (h("slot", { name: "badge" })))));
     }
     static get is() { return "ic-navigation-button"; }
     static get encapsulation() { return "shadow"; }
@@ -242,6 +246,30 @@ export class NavigationButton {
                 },
                 "attribute": "target",
                 "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "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": "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": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             }
         };
     }

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  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\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\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\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]: string } = {};\n  private hostMutationObserver: MutationObserver = null;\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, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\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  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\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: \"medium\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"medium\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && variant === \"icon\" && (\n            <slot name=\"badge\"></slot>\n          )}\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  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\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]: string } = {};\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance: IcThemeForegroundNoDefault | IcThemeForeground =\n    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  /**\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  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\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  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\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: \"medium\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"medium\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host\n        class={{\n          [\"in-side-menu\"]: this.mode === \"menu\",\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n          monochrome={this.mode !== \"menu\"}\n          theme={getThemeForegroundColor() == \"light\" ? \"light\" : \"dark\"}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && variant === \"icon\" && (\n            <slot name=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -27,7 +27,7 @@ describe("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">
+          <ic-button appearance="light" aria-label="button1" monochrome="" size="large" theme="light" variant="icon">
             <slot name="icon" slot="left-icon"></slot>
           </ic-button>
         </mock:shadow-root>

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

@@ -1 +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":"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","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(\"should render\", 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=\"left-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(\"should render 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(\"should correctly set 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(\"should correctly set 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(\"should correctly set 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  it(\"should update any attributes that are inherited from the root element\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton, Button],\n      html: `<ic-navigation-button label=\"button1\"></ic-navigation-button>`,\n    });\n    expect(\n      page.root.shadowRoot.querySelector(\"ic-button\").getAttribute(\"aria-label\")\n    ).toBeNull();\n\n    page.root.setAttribute(\"aria-label\", \"new-label\");\n    page.rootInstance.hostMutationCallback([{ attributeName: \"aria-label\" }]);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot.querySelector(\"ic-button\").getAttribute(\"aria-label\")\n    ).toBe(\"new-label\");\n  });\n});\n"]}
+{"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;IACpC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE;;;;;;;;;;;;;;;;;4BAiBgB;SACvB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE;8BACkB;SACzB,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,MAAM,CAAC;QAChC,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAE3D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAChE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE;8BACkB;SACzB,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;QAChD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAE/C,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,CAAC;QACjD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE;8BACkB;SACzB,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;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC;YACtC,IAAI,EAAE;8BACkB;SACzB,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;QACrF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC;YACtC,IAAI,EAAE,+DAA+D;SACtE,CAAC,CAAC;QACH,MAAM,CACJ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,CAC3E,CAAC,QAAQ,EAAE,CAAC;QAEb,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;QAClD,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC;QAC1E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CACJ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,CAC3E,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACtB,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(\"should render\", 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 appearance=\"light\" aria-label=\"button1\" monochrome=\"\" size=\"large\" theme=\"light\" variant=\"icon\">\n            <slot name=\"icon\" slot=\"left-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(\"should render 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(\"should correctly set 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(\"should correctly set 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(\"should correctly set 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  it(\"should update any attributes that are inherited from the root element\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton, Button],\n      html: `<ic-navigation-button label=\"button1\"></ic-navigation-button>`,\n    });\n    expect(\n      page.root.shadowRoot.querySelector(\"ic-button\").getAttribute(\"aria-label\")\n    ).toBeNull();\n\n    page.root.setAttribute(\"aria-label\", \"new-label\");\n    page.rootInstance.hostMutationCallback([{ attributeName: \"aria-label\" }]);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot.querySelector(\"ic-button\").getAttribute(\"aria-label\")\n    ).toBe(\"new-label\");\n  });\n});\n"]}

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

@@ -452,7 +452,8 @@ video {
 }
 
 :host(.in-side-menu) {
-  border-bottom: var(--ic-border-width) solid var(--ic-architectural-200);
+  border-bottom: var(--ic-border-width) solid
+    var(--ic-divider-background-monochrome);
   padding: var(--ic-space-md) 0;
 }
 
@@ -483,14 +484,14 @@ video {
 }
 
 :host(.in-side-menu) .navigation-group-side-menu {
-  color: var(--ic-action-default);
+  color: var(--ic-top-navigation-nav-group-link);
   justify-content: flex-start;
   padding: 0 var(--ic-space-md) 0 var(--ic-space-md);
 }
 
 :host(.in-side-menu) .navigation-group-side-menu-collapsed,
 :host(.in-side-menu) .navigation-group-side-menu-expanded {
-  color: var(--ic-action-default);
+  color: var(--ic-top-navigation-nav-group-link);
   justify-content: flex-start;
   padding-left: var(--ic-space-md);
 }
@@ -537,15 +538,19 @@ video {
 }
 
 :host(.in-side-menu) .navigation-group-side-menu:hover,
-:host(.in-side-menu) .navigation-group-side-menu:active,
 :host(.in-side-menu) .navigation-group-side-menu:focus {
-  background-color: var(--ic-architectural-20);
-  color: var(--ic-action-default);
+  background-color: var(--ic-top-navigation-nav-group-hover);
+  color: var(--ic-top-navigation-nav-group-link);
   cursor: auto;
   box-shadow: none;
   outline: none;
 }
 
+:host(.in-side-menu) .navigation-group-side-menu:active {
+  background-color: var(--ic-top-navigation-nav-group-pressed);
+  color: var(--ic-top-navigation-nav-group-link);
+}
+
 :host(.in-side-menu) .navigation-group-side-menu:focus {
   outline: var(--ic-hc-focus-outline);
 }
@@ -572,8 +577,8 @@ video {
 }
 
 :host .navigation-group-dropdown {
-  background-color: var(--ic-architectural-20);
-  border-bottom: var(--ic-border-default);
+  background-color: var(--ic-top-navigation-menu-background);
+  border-bottom: var(--ic-space-1px) solid var(--ic-top-navigation-menu-border);
   position: absolute;
   left: 0;
   right: 0;

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

@@ -206,13 +206,15 @@ export class NavigationGroup {
         this.parentEl = undefined;
         this.expandable = false;
         this.label = undefined;
+        this.theme = "inherit";
     }
     disconnectedCallback() {
+        var _a, _b;
         if (this.navigationType === "side") {
-            this.parentEl.removeEventListener("icSideNavExpanded", this.sideNavExpandHandler);
+            (_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("icSideNavExpanded", this.sideNavExpandHandler);
         }
         else if (this.navigationType === "top") {
-            this.parentEl.removeEventListener("icTopNavResized", this.topNavResizedHandler);
+            (_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("icTopNavResized", this.topNavResizedHandler);
         }
     }
     componentWillLoad() {
@@ -280,6 +282,7 @@ export class NavigationGroup {
                 "ic-navigation-group-expanded": this.expanded,
                 "ic-navigation-group-collapsed": !this.expanded,
                 ["ic-navigation-group-side-nav"]: this.navigationType === "side",
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
             }, role: "listitem" }, h("button", { 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: {
@@ -343,6 +346,30 @@ export class NavigationGroup {
                 },
                 "attribute": "label",
                 "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "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": "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": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             }
         };
     }