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

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

@@ -463,7 +463,6 @@ video {
   align-items: center;
   text-decoration: none;
   padding: var(--ic-space-xxs);
-  margin-left: calc(-1 * var(--ic-space-xxs));
   transition: var(--ic-easing-transition-fast);
 }
 
@@ -503,7 +502,7 @@ video {
 
 :host .nav-panel-container {
   border-top: var(--ic-keyline-lighten);
-  padding-left: var(--ic-space-lg);
+  padding: 0 var(--ic-space-lg);
   margin-left: calc(-1 * var(--section-container-margin));
   margin-right: calc(-1 * var(--section-container-margin));
   display: flex;
@@ -520,7 +519,7 @@ video {
 }
 
 .navigation-tabs {
-  margin-top: -0.063rem;
+  margin-top: calc(-1 * var(--ic-space-1px));
 }
 
 .app-details-container {
@@ -554,11 +553,14 @@ video {
 }
 
 :host .app-status {
-  border-radius: 5rem;
+  border-radius: var(--ic-space-md);
   background-color: var(--ic-architectural-white);
   color: var(--ic-color-primary-text);
   padding: var(--ic-space-xxs) var(--ic-space-lg);
   margin-left: var(--ic-space-md);
+  flex: 1 1 0;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
 }
 
 :host(.dark) .app-status {
@@ -567,18 +569,13 @@ video {
 }
 
 :host .app-version {
-  border-radius: 1rem;
+  border-radius: var(--ic-space-md);
   background-color: var(--ic-theme-active);
   padding: var(--ic-space-xxs) var(--ic-space-sm);
   margin-left: var(--ic-space-xs);
-}
-
-.app-status-text,
-.app-version-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 6rem;
+  flex: 1 1 0;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
 }
 
 slot[name="app-icon"]::slotted(svg) {
@@ -595,13 +592,21 @@ slot[name="toggle-icon"] svg {
   justify-content: right;
   display: flex;
   align-items: center;
-  flex: 1 auto;
 }
 
 .menu-button-container {
   margin-left: var(--ic-space-md);
 }
 
+.menu-button-container .navigation-landmark-button-text {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
 .search-actions-container {
   display: flex;
 }
@@ -613,10 +618,10 @@ slot[name="toggle-icon"] svg {
 
 .navigation-landmark-text {
   position: absolute;
-  width: 0.063rem;
-  height: 0.063rem;
+  width: var(--ic-space-1px);
+  height: var(--ic-space-1px);
   padding: 0;
-  margin: -0.063rem;
+  margin: calc(-1 * var(--ic-space-1px));
   overflow: hidden;
 }
 
@@ -626,20 +631,8 @@ slot[name="toggle-icon"] svg {
   height: 2.75rem;
 }
 
-:host([content-aligned="left"]) .app-details-container {
-  flex-basis: 1;
-}
-
-:host([content-aligned="left"]) .app-details-container,
-:host([content-aligned="left"]) .nav-panel-container,
-:host([content-aligned="center"]) .nav-panel-container,
-:host([content-aligned="left"]) .search-menu-container,
-:host([content-aligned="center"]) .search-menu-container {
-  justify-content: flex-start;
-}
-
-:host([content-aligned="center"]) .app-details-container {
-  justify-content: flex-end;
+.navigation-item-list::-webkit-scrollbar {
+  display: none;
 }
 
 :host ic-section-container {
@@ -651,21 +644,12 @@ slot[name="toggle-icon"] svg {
   .app-details-container {
     margin-right: var(--ic-space-lg);
   }
-
-  :host([content-aligned="center"]) .top-navigation {
-    display: flex;
-    justify-content: center;
-  }
-
-  :host([content-aligned="left"]) .top-navigation {
-    display: flex;
-  }
 }
 
 /* large */
 @media screen and (max-width: 1200px) {
   :host .nav-panel-container {
-    padding-left: var(--ic-space-md);
+    padding: 0 var(--ic-space-md);
   }
 }
 
@@ -696,13 +680,6 @@ slot[name="toggle-icon"] svg {
     margin-left: calc(-1 * var(--section-container-margin));
     margin-right: calc(-1 * var(--section-container-margin));
   }
-
-  :host([content-aligned="left"]) .app-details-container,
-  :host([content-aligned="left"]) .search-menu-container,
-  :host([content-aligned="center"]) .search-menu-container,
-  :host([content-aligned="center"]) .app-details-container {
-    justify-content: flex-start;
-  }
 }
 
 /* x small */

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

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import { IcThemeForegroundEnum, } from "../../utils/types";
-import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getThemeForegroundColor, getSlot, onComponentPropUndefinedChange, onComponentRequiredPropUndefined, isSlotUsed, } from "../../utils/helpers";
+import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getThemeForegroundColor, getSlot, onComponentPropUndefinedChange, onComponentRequiredPropUndefined, isSlotUsed, isEmptyString, } from "../../utils/helpers";
 /**
  * @slot app-icon - Content will be rendered to left of app title.
  * @slot app-title - Handle routing by nesting a route in the app title.
@@ -12,9 +12,10 @@ import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getThemeForegr
 export class TopNavigation {
   constructor() {
     this.hasAppIcon = false;
-    this.hasNavigation = false;
     this.hasIconButtons = false;
+    this.hasNavigation = false;
     this.hasSearchSlotContent = false;
+    this.resizeObserver = null;
     this.searchBar = null;
     this.initialiseSearchBar = () => {
       if (this.hasSearchSlotContent) {
@@ -44,7 +45,6 @@ export class TopNavigation {
       this.toggleSearchBar();
       this.searchButtonClick = false;
     };
-    this.resizeObserver = null;
     this.resizeObserverCallback = (currSize) => {
       if (currSize !== this.deviceSize) {
         this.deviceSize = currSize;
@@ -62,7 +62,7 @@ export class TopNavigation {
           //remove attribute again as this trigger a redraw & applies css
           this.searchBar.removeAttribute("hidden");
           setTimeout(() => {
-            this.searchBar.setFocus();
+            this.searchBar.focus();
           }, 100);
         }
       }
@@ -74,31 +74,56 @@ export class TopNavigation {
       });
       this.resizeObserver.observe(this.el);
     };
-    this.appTitle = undefined;
-    this.href = "/";
-    this.version = "";
-    this.status = "";
-    this.contentAligned = "full-width";
-    this.inline = false;
-    this.menuOpen = false;
     this.deviceSize = DEVICE_SIZES.XL;
+    this.foregroundColor = getThemeForegroundColor();
+    this.hasFullWidthSearchBar = false;
+    this.menuOpen = false;
     this.mobileSearchBarVisible = false;
-    this.navMenuVisible = false;
-    this.searchValue = "";
     this.mobileSearchHiddenOnBlur = false;
+    this.navMenuVisible = false;
     this.searchButtonClick = false;
-    this.foregroundColor = getThemeForegroundColor();
-    this.hasFullWidthSearchBar = false;
+    this.searchValue = "";
+    this.contentAligned = "full-width";
+    this.href = "/";
+    this.inline = false;
+    this.shortAppTitle = "";
+    this.status = "";
+    this.version = "";
+    this.appTitle = undefined;
   }
   watchPropHandler(newValue, oldValue) {
     //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value
     //this watch can be removed once gatbsy hydration issue is resolved
     onComponentPropUndefinedChange(oldValue, newValue, this.initialiseSearchBar);
   }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  componentWillLoad() {
+    this.hasAppIcon = isSlotUsed(this.el, "app-icon");
+    this.hasNavigation = isSlotUsed(this.el, "navigation");
+    this.hasIconButtons = isSlotUsed(this.el, "buttons");
+    this.hasSearchSlotContent = isSlotUsed(this.el, "search");
+    this.deviceSize = getCurrentDeviceSize();
+    this.initialiseSearchBar();
+  }
+  componentDidLoad() {
+    checkResizeObserver(this.runResizeObserver);
+    !isSlotUsed(this.el, "app-title") &&
+      onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
+  }
+  componentWillRender() {
+    this.hasNavigation = isSlotUsed(this.el, "navigation");
+    this.hasSearchSlotContent = isSlotUsed(this.el, "search");
+    this.hasIconButtons = isSlotUsed(this.el, "buttons");
+    this.hasAppIcon = isSlotUsed(this.el, "app-icon");
+  }
   navBarMenuCloseHandler() {
     this.showNavMenu(false);
     const menuBtn = this.el.shadowRoot.querySelector("#menu-button");
-    menuBtn.setFocus();
+    menuBtn.focus();
   }
   searchInputBlurHandler(ev) {
     if (ev.detail !== null) {
@@ -124,7 +149,7 @@ export class TopNavigation {
         this.hasFullWidthSearchBar = true;
         this.searchBar.fullWidth = true;
         setTimeout(() => {
-          this.searchBar.setFocus();
+          this.searchBar.focus();
         }, 100);
       }
       else {
@@ -138,33 +163,13 @@ export class TopNavigation {
     this.navMenuVisible = show;
     if (show) {
       this.icNavigationMenuOpened.emit();
+      document.body.style.height = "100%";
+      document.body.style.overflow = "hidden";
     }
     else {
       this.icNavigationMenuClosed.emit();
-    }
-  }
-  componentWillLoad() {
-    this.hasAppIcon = isSlotUsed(this.el, "app-icon");
-    this.hasNavigation = isSlotUsed(this.el, "navigation");
-    this.hasIconButtons = isSlotUsed(this.el, "buttons");
-    this.hasSearchSlotContent = isSlotUsed(this.el, "search");
-    this.deviceSize = getCurrentDeviceSize();
-    this.initialiseSearchBar();
-  }
-  componentWillRender() {
-    this.hasNavigation = isSlotUsed(this.el, "navigation");
-    this.hasSearchSlotContent = isSlotUsed(this.el, "search");
-    this.hasIconButtons = isSlotUsed(this.el, "buttons");
-    this.hasAppIcon = isSlotUsed(this.el, "app-icon");
-  }
-  componentDidLoad() {
-    checkResizeObserver(this.runResizeObserver);
-    !isSlotUsed(this.el, "app-title") &&
-      onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
+      document.body.style.height = "auto";
+      document.body.style.overflow = "auto";
     }
   }
   render() {
@@ -192,10 +197,9 @@ export class TopNavigation {
     return (h(Host, { class: {
         ["fullwidth-searchbar"]: this.hasFullWidthSearchBar,
         [IcThemeForegroundEnum.Dark]: this.foregroundColor === IcThemeForegroundEnum.Dark,
-      } }, h("div", { class: "top-navigation" }, h("ic-section-container", { aligned: "full-width", "full-height": true }, h("header", { role: "banner" }, h("div", { class: "top-panel-container" }, h("div", { class: "app-details-container" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (h(Component, Object.assign({ class: "title-link" }, attrs), this.hasAppIcon && (h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" }))), h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, isSlotUsed(this.el, "app-title") ? (h("slot", { name: "app-title" })) : (this.appTitle))))), this.status !== "" && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, this.status))), this.version !== "" && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, this.version)))), (this.hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, this.deviceSize > DEVICE_SIZES.L && (h("slot", { name: "search" })), this.hasSearchSlotContent &&
-      this.deviceSize <= DEVICE_SIZES.L && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: this.searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: this.foregroundColor, onClick: this.searchButtonClickHandler }, h("slot", { name: "toggle-icon", slot: "icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (h("div", { class: "menu-button-container" }, h("nav", { "aria-labelledby": "navigation-landmark-text", "aria-hidden": !this.hasNavigation || this.navMenuVisible
-        ? "true"
-        : "false" }, h("ic-button", { id: "menu-button", appearance: this.foregroundColor, variant: "secondary", "aria-expanded": this.menuOpen ? "true" : "false", "aria-haspopup": "true", "aria-label": `Open ${this.hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: this.menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), this.mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main navigation"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ul", { class: "navigation-item-list" }, h("slot", { name: "navigation" })))))))), this.navMenuVisible && (h("ic-navigation-menu", { version: this.version, status: this.status, class: {
+      } }, h("div", { class: "top-navigation" }, h("ic-section-container", { aligned: this.contentAligned, "full-height": true }, h("header", { role: "banner" }, h("div", { class: "top-panel-container" }, h("div", { class: "app-details-container" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (h(Component, Object.assign({ class: "title-link" }, attrs), this.hasAppIcon && (h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" }))), this.deviceSize <= DEVICE_SIZES.S &&
+      !isEmptyString(this.shortAppTitle) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": `${this.appTitle} (${this.shortAppTitle})` }, h("h1", null, this.shortAppTitle))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, isSlotUsed(this.el, "app-title") ? (h("slot", { name: "app-title" })) : (this.appTitle)))))), this.status !== "" && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, this.status))), this.version !== "" && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, this.version)))), (this.hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, this.deviceSize > DEVICE_SIZES.L && (h("slot", { name: "search" })), this.hasSearchSlotContent &&
+      this.deviceSize <= DEVICE_SIZES.L && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: this.searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: this.foregroundColor, onClick: this.searchButtonClickHandler }, h("slot", { name: "toggle-icon", slot: "icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": this.navMenuVisible ? "true" : "false" }, h("ic-button", { id: "menu-button", appearance: this.foregroundColor, variant: "secondary", "aria-expanded": this.menuOpen ? "true" : "false", "aria-haspopup": "true", "aria-label": `Open ${this.hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: this.menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), this.mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main navigation"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { appearance: this.foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), this.navMenuVisible && (h("ic-navigation-menu", { version: this.version, status: this.status, class: {
         ["inline"]: this.inline,
       } }, h("div", { class: "menu-buttons-slot", slot: "buttons" }, h("slot", { name: "buttons" })), h("ul", { slot: "navigation" }, h("slot", { name: "navigation" }))))));
   }
@@ -213,22 +217,28 @@ export class TopNavigation {
   }
   static get properties() {
     return {
-      "appTitle": {
+      "contentAligned": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcAlignment",
+          "resolved": "\"center\" | \"full-width\" | \"left\"",
+          "references": {
+            "IcAlignment": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The app title to be displayed. This is required, unless a slotted app title link is used."
+          "text": "The alignment of the top navigation content."
         },
-        "attribute": "app-title",
-        "reflect": false
+        "attribute": "content-aligned",
+        "reflect": false,
+        "defaultValue": "\"full-width\""
       },
       "href": {
         "type": "string",
@@ -248,7 +258,25 @@ export class TopNavigation {
         "reflect": false,
         "defaultValue": "\"/\""
       },
-      "version": {
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the flyout navigation menu on small devices will be contained by the parent element."
+        },
+        "attribute": "inline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "shortAppTitle": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -260,9 +288,9 @@ export class TopNavigation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The version info to be displayed."
+          "text": "The short title of the app to be displayed at small screen sizes in place of the app title."
         },
-        "attribute": "version",
+        "attribute": "short-app-title",
         "reflect": false,
         "defaultValue": "\"\""
       },
@@ -284,73 +312,67 @@ export class TopNavigation {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "contentAligned": {
+      "version": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcAlignment",
-          "resolved": "\"center\" | \"full-width\" | \"left\"",
-          "references": {
-            "IcAlignment": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The alignment of the top navigation content."
+          "text": "The version info to be displayed."
         },
-        "attribute": "content-aligned",
+        "attribute": "version",
         "reflect": false,
-        "defaultValue": "\"full-width\""
+        "defaultValue": "\"\""
       },
-      "inline": {
-        "type": "boolean",
+      "appTitle": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the flyout navigation menu on small devices will be contained by the parent element."
+          "text": "The app title to be displayed. This is required, unless a slotted app title link is used."
         },
-        "attribute": "inline",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "app-title",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "menuOpen": {},
       "deviceSize": {},
+      "foregroundColor": {},
+      "hasFullWidthSearchBar": {},
+      "menuOpen": {},
       "mobileSearchBarVisible": {},
-      "navMenuVisible": {},
-      "searchValue": {},
       "mobileSearchHiddenOnBlur": {},
+      "navMenuVisible": {},
       "searchButtonClick": {},
-      "foregroundColor": {},
-      "hasFullWidthSearchBar": {}
+      "searchValue": {}
     };
   }
   static get events() {
     return [{
-        "method": "icNavigationMenuOpened",
-        "name": "icNavigationMenuOpened",
+        "method": "icNavigationMenuClosed",
+        "name": "icNavigationMenuClosed",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "- Emitted when the menu is opened."
+              "text": "- Emitted when the menu is closed."
             }],
           "text": ""
         },
@@ -360,15 +382,15 @@ export class TopNavigation {
           "references": {}
         }
       }, {
-        "method": "icNavigationMenuClosed",
-        "name": "icNavigationMenuClosed",
+        "method": "icNavigationMenuOpened",
+        "name": "icNavigationMenuOpened",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "- Emitted when the menu is closed."
+              "text": "- Emitted when the menu is opened."
             }],
           "text": ""
         },