@carbon/charts 0.41.88 → 0.41.92

package/styles/vendor/carbon-components/src/components/ui-shell/_theme.scss

@@ -20,7 +20,8 @@ $shell-header-bg-01: $carbon--gray-100;
 /// @type Color
 /// @access private
 /// @group ui-shell
-$shell-header-bg-02: #2c2c2c; //TODO needs color var gray-100-hover
+/// TODO needs color var gray-100-hover
+$shell-header-bg-02: #2c2c2c;
 
 /// Header action active background
 /// @type Color
@@ -32,7 +33,8 @@ $shell-header-bg-03: $carbon--gray-80;
 /// @type Color
 /// @access private
 /// @group ui-shell
-$shell-header-bg-04: #353535; //TODO needs color var gray-90-hover
+/// TODO needs color var gray-90-hover
+$shell-header-bg-04: #353535;
 
 /// Header nav link active and focus background
 /// @type Color
@@ -108,7 +110,8 @@ $shell-panel-bg-01: $carbon--gray-100;
 /// @type Color
 /// @access private
 /// @group ui-shell
-$shell-panel-bg-02: #2c2c2c; //TODO needs color var gray-100-hover
+/// TODO needs color var gray-100-hover
+$shell-panel-bg-02: #2c2c2c;
 
 /// Panel item focus and active background
 /// @type Color
@@ -162,25 +165,29 @@ $shell-side-nav-bg-01: $carbon--white-0;
 /// @type Color
 /// @access private
 /// @group ui-shell
-$shell-side-nav-bg-02: $carbon--gray-80; //TODO waiting for updated color
+/// TODO waiting for updated color
+$shell-side-nav-bg-02: $carbon--gray-80;
 
 /// Selected L2 nested item
 /// @type Color
 /// @access private
 /// @group ui-shell
-$shell-side-nav-bg-03: $ibm-color__gray-70; //TODO waiting for updated color
+/// TODO waiting for updated color
+$shell-side-nav-bg-03: $ibm-color__gray-70;
 
 /// Side nav item hover background
 /// @type Color
 /// @access private
 /// @group ui-shell
-$shell-side-nav-bg-04: #e5e5e5; //TODO needs color var gray-90-hover
+/// TODO needs color var gray-90-hover
+$shell-side-nav-bg-04: #e5e5e5;
 
 /// Side nav menu item hover background
 /// @type Color
 /// @access private
 /// @group ui-shell
-$shell-side-nav-bg-05: #dcdcdc; //TODO needs color var gray-80-hover
+/// TODO needs color var gray-80-hover
+$shell-side-nav-bg-05: #dcdcdc;
 
 /// Primary text in side-nav
 /// L2 Flatten item text
@@ -189,7 +196,8 @@ $shell-side-nav-bg-05: #dcdcdc; //TODO needs color var gray-80-hover
 /// @type Color
 /// @access private
 /// @group ui-shell
-$shell-side-nav-text-01: $ibm-color__gray-70; //TODO waiting for updated color
+/// TODO waiting for updated color
+$shell-side-nav-text-01: $ibm-color__gray-70;
 
 /// Secondary text in side nav
 /// L2 Category label

package/styles/vendor/carbon-components/src/components/ui-shell/_ui-shell.scss

@@ -10,7 +10,8 @@
 @import 'functions';
 @import 'header';
 @import 'header-panel';
-@import 'product-switcher'; // TODO needs to be depracated and redone to match react
+// TODO needs to be deprecated and redone to match react
+@import 'product-switcher';
 @import 'switcher';
 @import 'side-nav';
 @import 'navigation-menu';

package/styles/vendor/carbon-components/src/components/ui-shell/header-nav.hbs

@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
@@ -17,27 +17,27 @@
   "0", while the rest should get "-1"
 -->
 <nav class="{{@root.prefix}}--header__nav" aria-label="Platform Name" data-header-nav>
-  <ul class="{{@root.prefix}}--header__menu-bar" role="menubar" aria-label="Platform Name">
+  <ul class="{{@root.prefix}}--header__menu-bar" aria-label="Platform Name">
     {{#each header.navLinks}}
     {{#if href}}
     <li>
-      <a class="{{@root.prefix}}--header__menu-item" href="javascript:void(0)" role="menuitem" tabindex="0">
+      <a class="{{@root.prefix}}--header__menu-item" href="javascript:void(0)" tabindex="0">
         {{this.title}}
       </a>
     </li>
     {{else}}
     <li class="{{@root.prefix}}--header__submenu" data-header-submenu>
-      <a class="{{@root.prefix}}--header__menu-item {{@root.prefix}}--header__menu-title" role="menuitem" aria-haspopup="true"
+      <a class="{{@root.prefix}}--header__menu-item {{@root.prefix}}--header__menu-title" aria-haspopup="true"
         aria-expanded="{{this.state.expanded}}" href="javascript:void(0)" tabindex="0">
         {{this.title}}
         <svg class="{{@root.prefix}}--header__menu-arrow" width="12" height="7" aria-hidden="true">
           <path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
         </svg>
       </a>
-      <ul class="{{@root.prefix}}--header__menu" role="menu" aria-label="{{this.title}}">
+      <ul class="{{@root.prefix}}--header__menu" aria-label="{{this.title}}">
         {{#each this.items}}
         <li role="none">
-          <a class="{{@root.prefix}}--header__menu-item" role="menuitem" href="{{this.href}}" tabindex="-1">
+          <a class="{{@root.prefix}}--header__menu-item" href="{{this.href}}" tabindex="-1">
             <span class="{{@root.prefix}}--text-truncate--end">
               {{this.title}}
             </span>

package/styles/vendor/carbon-components/src/components/ui-shell/header-nav.js

@@ -12,13 +12,20 @@ import handles from '../../globals/js/mixins/handles';
 import on from '../../globals/js/misc/on';
 import settings from '../../globals/js/settings';
 
-const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
+const toArray = (arrayLike) => Array.prototype.slice.call(arrayLike);
 
-export default class HeaderNav extends mixin(
-  createComponent,
-  initComponentBySearch,
-  handles
-) {
+class HeaderNav extends mixin(createComponent, initComponentBySearch, handles) {
+  /**
+   * Header nav.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @extends Handles
+   * @param {HTMLElement} element The element working as an header nav.
+   * @param {object} [options] The component options.
+   * @param {string} [options.selectorSubmenu] The CSS selector to find sub menus.
+   * @param {string} [options.selectorSubmenuLink] The CSS selector to find the trigger buttons of sub menus.
+   * @param {string} [options.selectorSubmenuItem] The CSS selector to find the sub menu items.
+   */
   constructor(element, options) {
     super(element, options);
     this.manage(on(this.element, 'keydown', this._handleKeyDown));
@@ -47,12 +54,12 @@ export default class HeaderNav extends mixin(
    * Moves the focus up/down.
    * @param {number} direction The direction of navigating.
    */
-  navigate = direction => {
+  navigate = (direction) => {
     const items = toArray(
       this.element.querySelectorAll(this.options.selectorSubmenuLink)
     );
     const start = this.getCurrentNavigation();
-    const getNextItem = old => {
+    const getNextItem = (old) => {
       const handleUnderflow = (index, length) =>
         index + (index >= 0 ? 0 : length);
       const handleOverflow = (index, length) =>
@@ -71,7 +78,7 @@ export default class HeaderNav extends mixin(
    * Handles keydown event.
    * @param {Event} event The event triggering this method.
    */
-  _handleKeyDown = event => {
+  _handleKeyDown = (event) => {
     const keyCodes = {
       37: this.constructor.NAVIGATE.BACKWARD, // left arrow
       39: this.constructor.NAVIGATE.FORWARD, // right arrow
@@ -92,6 +99,9 @@ export default class HeaderNav extends mixin(
    * @member HeaderNav.options
    * @type {object}
    * @property {string} selectorInit The data attribute to find side navs.
+   * @property {string} [selectorSubmenu] The CSS selector to find sub menus.
+   * @property {string} [selectorSubmenuLink] The CSS selector to find the trigger buttons of sub menus.
+   * @property {string} [selectorSubmenuItem] The CSS selector to find the sub menu items.
    */
   static get options() {
     const { prefix } = settings;
@@ -108,7 +118,7 @@ export default class HeaderNav extends mixin(
    * Enum for navigating backward/forward.
    * @readonly
    * @member Header.NAVIGATE
-   * @type {Object}
+   * @type {object}
    * @property {number} BACKWARD Navigating backward.
    * @property {number} FORWARD Navigating forward.
    */
@@ -117,3 +127,5 @@ export default class HeaderNav extends mixin(
     FORWARD: 1,
   };
 }
+
+export default HeaderNav;

package/styles/vendor/carbon-components/src/components/ui-shell/header-submenu.js

@@ -14,13 +14,24 @@ import settings from '../../globals/js/settings';
 import eventMatches from '../../globals/js/misc/event-matches';
 
 const forEach = /* #__PURE__ */ (() => Array.prototype.forEach)();
-const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
+const toArray = (arrayLike) => Array.prototype.slice.call(arrayLike);
 
-export default class HeaderSubmenu extends mixin(
+class HeaderSubmenu extends mixin(
   createComponent,
   initComponentBySearch,
   handles
 ) {
+  /**
+   * Sub menus in header nav.
+   * @extends CreateComponent
+   * @extends InitComponentBySearch
+   * @extends Handles
+   * @param {HTMLElement} element The element working as a submenu in header nav.
+   * @param {object} [options] The component options.
+   * @param {string} [options.selectorTrigger] The CSS selector to find the trigger button.
+   * @param {string} [options.selectorItem] The CSS selector to find the menu items.
+   * @param {string} [options.attribExpanded] The attribute that represents the expanded/collapsed state.
+   */
   constructor(element, options) {
     super(element, options);
     const hasFocusOut = 'onfocusout' in window;
@@ -60,7 +71,7 @@ export default class HeaderSubmenu extends mixin(
   /**
    * @returns {actions | null}
    */
-  _getAction = event => {
+  _getAction = (event) => {
     const isFlyoutMenu = eventMatches(event, this.options.selectorFlyoutMenu);
     if (isFlyoutMenu) {
       return this.constructor.actions.DELEGATE_TO_FLYOUT_MENU;
@@ -96,7 +107,7 @@ export default class HeaderSubmenu extends mixin(
    * @param {action} action
    * @returns {boolean} new header submenu state
    */
-  _getNewState = action => {
+  _getNewState = (action) => {
     const trigger = this.element.querySelector(this.options.selectorTrigger);
     const isExpanded =
       trigger.getAttribute(this.options.attribExpanded) === 'true';
@@ -121,7 +132,7 @@ export default class HeaderSubmenu extends mixin(
     trigger.setAttribute(this.options.attribExpanded, shouldBeExpanded);
     forEach.call(
       this.element.querySelectorAll(this.options.selectorItem),
-      item => {
+      (item) => {
         item.tabIndex = shouldBeExpanded ? 0 : -1;
       }
     );
@@ -147,14 +158,14 @@ export default class HeaderSubmenu extends mixin(
    * Moves the focus up/down.
    * @param {number} direction The direction of navigating.
    */
-  navigate = direction => {
+  navigate = (direction) => {
     const items = toArray(
       this.element.querySelectorAll(this.options.selectorItem)
     );
     const start =
       this.getCurrentNavigation() ||
       this.element.querySelector(this.options.selectorItemSelected);
-    const getNextItem = old => {
+    const getNextItem = (old) => {
       const handleUnderflow = (index, length) =>
         index + (index >= 0 ? 0 : length);
       const handleOverflow = (index, length) =>
@@ -182,7 +193,7 @@ export default class HeaderSubmenu extends mixin(
     }
   };
 
-  _handleEvent = event => {
+  _handleEvent = (event) => {
     const trigger = this.element.querySelector(this.options.selectorTrigger);
     if (!trigger) {
       return;
@@ -198,7 +209,7 @@ export default class HeaderSubmenu extends mixin(
    * Handles keydown event.
    * @param {Event} event The event triggering this method.
    */
-  _handleKeyDown = event => {
+  _handleKeyDown = (event) => {
     const trigger = this.element.querySelector(this.options.selectorTrigger);
     if (!trigger) {
       return;
@@ -282,6 +293,9 @@ export default class HeaderSubmenu extends mixin(
    * @member HeaderSubmenu.options
    * @type {object}
    * @property {string} selectorInit The data attribute to find side navs.
+   * @property {string} [selectorTrigger] The CSS selector to find the trigger button.
+   * @property {string} [selectorItem] The CSS selector to find the menu items.
+   * @property {string} [attribExpanded] The attribute that represents the expanded/collapsed state.
    */
   static get options() {
     const { prefix } = settings;
@@ -297,7 +311,7 @@ export default class HeaderSubmenu extends mixin(
    * Enum for navigating backward/forward.
    * @readonly
    * @member HeaderSubmenu.NAVIGATE
-   * @type {Object}
+   * @type {object}
    * @property {number} BACKWARD Navigating backward.
    * @property {number} FORWARD Navigating forward.
    */
@@ -306,3 +320,5 @@ export default class HeaderSubmenu extends mixin(
     FORWARD: 1,
   };
 }
+
+export default HeaderSubmenu;

package/styles/vendor/carbon-components/src/components/ui-shell/navigation-menu-panel.js

@@ -21,7 +21,7 @@ export default class NavigationMenuPanel extends mixin(
   handles,
   eventedState
 ) {
-  createdByLauncher = event => {
+  createdByLauncher = (event) => {
     const isExpanded = !this.element.hasAttribute('hidden');
     const newState = isExpanded ? 'collapsed' : 'expanded';
     this.triggerButton = event.delegateTarget;
@@ -34,7 +34,7 @@ export default class NavigationMenuPanel extends mixin(
    * @param {string} state
    * @returns {boolean} true if given state is different from current state
    */
-  shouldStateBeChanged = state =>
+  shouldStateBeChanged = (state) =>
     (state === 'expanded') === this.element.hasAttribute('hidden');
 
   /**

package/styles/vendor/carbon-components/src/components/ui-shell/navigation-menu.hbs

@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
@@ -12,7 +12,8 @@
       {{#each this.items}}
       {{#if this.active}}
       {{#if this.hasIcon}}
-      <li class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--active {{@root.prefix}}--navigation-item--icon">
+      <li
+        class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--active {{@root.prefix}}--navigation-item--icon">
         {{else}}
       <li class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--active">
         {{/if}}
@@ -28,7 +29,8 @@
           {{#if this.hasIcon}}
           <div class="{{@root.prefix}}--navigation-icon">
             <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
-              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+              <path
+                d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
             </svg>
           </div>
           {{/if}}
@@ -47,7 +49,8 @@
               <div class="{{@root.prefix}}--navigation-icon">
 
                 <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                  <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+                  <path
+                    d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
                 </svg>
               </div>
               {{/if}}
@@ -58,14 +61,15 @@
                 </svg>
               </div>
             </button>
-            <ul id="category-1-menu" class="{{@root.prefix}}--navigation__category-items" role="menu">
+            <ul id="category-1-menu" class="{{@root.prefix}}--navigation__category-items">
               {{#each this.links}}
               {{#if this.active}}
-              <li class="{{@root.prefix}}--navigation__category-item {{@root.prefix}}--navigation__category-item--active">
+              <li
+                class="{{@root.prefix}}--navigation__category-item {{@root.prefix}}--navigation__category-item--active">
                 {{else}}
               <li class="{{@root.prefix}}--navigation__category-item">
                 {{/if}}
-                <a class="{{@root.prefix}}--navigation-link" href="{{ this.href }}" role="menuitem">
+                <a class="{{@root.prefix}}--navigation-link" href="{{ this.href }}">
                   {{ this.title }}
                 </a>
               </li>

package/styles/vendor/carbon-components/src/components/ui-shell/navigation-menu.js

@@ -42,7 +42,7 @@ export default class NavigationMenu extends NavigationMenuPanel {
     this.manage(on(element, 'click', this._handleClick));
     this.manage(on(element, 'keydown', this._handleKeyDown));
     this.manage(
-      on(this.element.ownerDocument, 'click', event => {
+      on(this.element.ownerDocument, 'click', (event) => {
         if (
           !this.element.hasAttribute('hidden') &&
           !this.triggerButton.contains(event.target) &&
@@ -72,12 +72,12 @@ export default class NavigationMenu extends NavigationMenuPanel {
    * Moves the focus up/down.
    * @param {number} direction The direction of navigating.
    */
-  navigate = direction => {
+  navigate = (direction) => {
     const items = [
       ...this.element.querySelectorAll(this.options.selectorFocusableNavItems),
     ];
     const start = this.getCurrentNavigation();
-    const getNextItem = old => {
+    const getNextItem = (old) => {
       const handleUnderflow = (index, length) =>
         index + (index >= 0 ? 0 : length);
       const handleOverflow = (index, length) =>
@@ -98,7 +98,7 @@ export default class NavigationMenu extends NavigationMenuPanel {
    * Esc closes the menu
    * @param {Event} event The event triggering this method.
    */
-  _handleKeyDown = event => {
+  _handleKeyDown = (event) => {
     // handle Esc
     const isExpanded = !this.element.hasAttribute('hidden');
     if (event.which === 27 && isExpanded) {
@@ -134,7 +134,7 @@ export default class NavigationMenu extends NavigationMenuPanel {
   /**
    * @param {Event} event The event triggering this method
    */
-  _handleFocusOut = event => {
+  _handleFocusOut = (event) => {
     const nextTargetIsOfSelf =
       this.element.contains(event.relatedTarget) ||
       event.relatedTarget === this.triggerButton ||
@@ -159,7 +159,7 @@ export default class NavigationMenu extends NavigationMenuPanel {
     );
     Array.prototype.forEach.call(
       shellNavCategory.querySelectorAll(this.options.selectorShellNavLink),
-      item => {
+      (item) => {
         item.tabIndex = !shouldBeCollapsed ? 0 : -1;
       }
     );
@@ -169,7 +169,7 @@ export default class NavigationMenu extends NavigationMenuPanel {
    * toggle the state of the nav menu on click
    * @param {Event} event The event triggering this method
    */
-  _handleClick = event => {
+  _handleClick = (event) => {
     const matchesNavSubmenu = eventMatches(
       event,
       this.options.selectorShellNavSubmenu
@@ -190,7 +190,7 @@ export default class NavigationMenu extends NavigationMenuPanel {
         ...this.element.querySelectorAll(
           this.options.selectorShellNavLinkCurrent
         ),
-      ].forEach(el => {
+      ].forEach((el) => {
         el.classList.remove(
           this.options.classShellNavItemActive,
           this.options.classShellNavLinkCurrent
@@ -212,7 +212,7 @@ export default class NavigationMenu extends NavigationMenuPanel {
         ...this.element.querySelectorAll(
           this.options.selectorShellNavLinkCurrent
         ),
-      ].forEach(el => {
+      ].forEach((el) => {
         el.classList.remove(
           this.options.classShellNavItemActive,
           this.options.classShellNavLinkCurrent
@@ -273,7 +273,7 @@ export default class NavigationMenu extends NavigationMenuPanel {
    * Enum for navigating backward/forward.
    * @readonly
    * @member NavigationMenuPanel.NAVIGATE
-   * @type {Object}
+   * @type {object}
    * @property {number} BACKWARD Navigating backward.
    * @property {number} FORWARD Navigating forward.
    */

package/styles/vendor/carbon-components/src/components/ui-shell/product-switcher.js

@@ -3,9 +3,11 @@ import on from '../../globals/js/misc/on';
 import settings from '../../globals/js/settings';
 import onFocusOutByKeyboard from '../../globals/js/misc/on-focus-by-keyboard';
 
-export default class ProductSwitcher extends NavigationMenuPanel {
+let seq = 0;
+
+class ProductSwitcher extends NavigationMenuPanel {
   /**
-   * A navigation menu
+   * A navigation menu.
    * @extends NavigationMenuPanel
    * @param {HTMLElement} element The element working as a selector.
    * @param {object} [options] The component options.
@@ -46,7 +48,7 @@ export default class ProductSwitcher extends NavigationMenuPanel {
    * trigger button
    * @param {Event} event The event triggering this method
    */
-  _handleFocusOut = event => {
+  _handleFocusOut = (event) => {
     if (this.element.contains(event.relatedTarget)) {
       return;
     }
@@ -65,7 +67,7 @@ export default class ProductSwitcher extends NavigationMenuPanel {
   /**
    * @param {Event} event The event triggering this method
    */
-  _handleKeyDown = event => {
+  _handleKeyDown = (event) => {
     const isExpanded = !this.element.hasAttribute('hidden');
     if (event.which === 27 && isExpanded) {
       const triggerButton = this.current;
@@ -74,15 +76,13 @@ export default class ProductSwitcher extends NavigationMenuPanel {
     }
   };
 
-  createdByLauncher = event => {
+  createdByLauncher = (event) => {
     const isExpanded = this.element.classList.contains(
       this.options.classProductSwitcherExpanded
     );
     const launcher = event.delegateTarget;
     if (!launcher.id) {
-      launcher.id = `__carbon-product-switcher-launcher-${Math.random()
-        .toString(36)
-        .substr(2)}`;
+      launcher.id = `__carbon-product-switcher-launcher-${seq++}`;
     }
     const current = launcher.id;
     this.changeState(
@@ -97,7 +97,7 @@ export default class ProductSwitcher extends NavigationMenuPanel {
    * @param {string} current
    * @returns {boolean} true if given state is different from current state
    */
-  shouldStateBeChanged = current => this.current !== current;
+  shouldStateBeChanged = (current) => this.current !== current;
 
   /**
    * Changes the expanded/collapsed state.
@@ -116,7 +116,7 @@ export default class ProductSwitcher extends NavigationMenuPanel {
     }
 
     // deactivate all other trigger buttons
-    this.triggerButtonIds.forEach(id => {
+    this.triggerButtonIds.forEach((id) => {
       const button = this.element.ownerDocument.getElementById(id);
       const label = button.getAttribute(this.options.attribLabelExpand);
       button.classList.remove(
@@ -195,3 +195,5 @@ export default class ProductSwitcher extends NavigationMenuPanel {
     });
   }
 }
+
+export default ProductSwitcher;

package/styles/vendor/carbon-components/src/components/ui-shell/side-nav-fixed.hbs

@@ -20,19 +20,19 @@
             </svg>
           </div>
         </button>
-        <ul class="{{@root.prefix}}--side-nav__menu" role="menu" hidden="">
+        <ul class="{{@root.prefix}}--side-nav__menu" hidden="">
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
-          <li class="{{@root.prefix}}--side-nav__menu-item" role="menuitem">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+          <li class="{{@root.prefix}}--side-nav__menu-item">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
@@ -50,28 +50,28 @@
             </svg>
           </div>
         </button>
-        <ul class="{{@root.prefix}}--side-nav__menu" role="menu">
+        <ul class="{{@root.prefix}}--side-nav__menu">
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 L0 menu item
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 L0 menu item
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>