@carbon/web-components 2.0.0-beta.2 → 2.0.0-beta.4

package/es/components/ui-shell/side-nav.js

@@ -2,7 +2,8 @@ import _decorate from "@babel/runtime/helpers/esm/decorate";
 import _get from "@babel/runtime/helpers/esm/get";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 let _ = t => t,
-  _t;
+  _t,
+  _t2;
 /**
  * @license
  *
@@ -14,6 +15,7 @@ let _ = t => t,
 
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import on from '../../globals/mixins/on';
 import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
@@ -28,15 +30,15 @@ export { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };
  *
  * @element cds-side-nav
  */
-let BXSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_initialize, _HostListenerMixin) {
-  class BXSideNav extends _HostListenerMixin {
+let CDSSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_initialize, _HostListenerMixin) {
+  class CDSSideNav extends _HostListenerMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXSideNav,
+    F: CDSSideNav,
     d: [{
       kind: "field",
       key: "_hovered",
@@ -127,30 +129,6 @@ let BXSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_init
         });
       }
 
-      /**
-       * Handles `mouseover` event handler.
-       */
-    }, {
-      kind: "method",
-      decorators: [HostListener('mouseover')],
-      key: "_handleMouseover",
-      value: function _handleMouseover() {
-        this._hovered = true;
-        this._updatedSideNavMenuForceCollapsedState();
-      }
-
-      /**
-       * Handles `mouseout` event handler.
-       */
-    }, {
-      kind: "method",
-      decorators: [HostListener('mouseout')],
-      key: "_handleMouseout",
-      value: function _handleMouseout() {
-        this._hovered = false;
-        this._updatedSideNavMenuForceCollapsedState();
-      }
-
       /**
        * Collapse mode of the side nav.
        */
@@ -177,12 +155,23 @@ let BXSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_init
     }, {
       kind: "field",
       decorators: [property({
+        type: Boolean,
+        attribute: 'is-not-child-of-header'
+      })],
+      key: "isNotChildOfHeader",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
         reflect: true,
-        attribute: 'usage-mode'
+        attribute: 'is-not-persistent'
       })],
-      key: "usageMode",
+      key: "isNotPersistent",
       value() {
-        return SIDE_NAV_USAGE_MODE.REGULAR;
+        return false;
       }
     }, {
       kind: "method",
@@ -192,20 +181,23 @@ let BXSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_init
        * `true` to expand the side nav.
        */
       /**
-       * Usage mode of the side nav.
+       * If `true` will style the side nav to sit below the header
+       */
+      /**
+       * Specify if the side-nav will be persistent above the lg breakpoint
        */
       function connectedCallback() {
         if (!this.hasAttribute('role')) {
           this.setAttribute('role', 'navigation');
         }
-        _get(_getPrototypeOf(BXSideNav.prototype), "connectedCallback", this).call(this);
+        _get(_getPrototypeOf(CDSSideNav.prototype), "connectedCallback", this).call(this);
       }
     }, {
       kind: "method",
       key: "disconnectedCallback",
       value: function disconnectedCallback() {
         this._cleanHTransition();
-        _get(_getPrototypeOf(BXSideNav.prototype), "disconnectedCallback", this).call(this);
+        _get(_getPrototypeOf(CDSSideNav.prototype), "disconnectedCallback", this).call(this);
       }
     }, {
       kind: "method",
@@ -226,16 +218,6 @@ let BXSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_init
       kind: "method",
       key: "updated",
       value: function updated(changedProperties) {
-        if (changedProperties.has('collapseMode') || changedProperties.has('usageMode')) {
-          const {
-            collapseMode,
-            usageMode
-          } = this;
-          if ((collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED || collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) && usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV) {
-            console.warn('Fixed/rail modes of side nav cannot be used with header nav mode.'); // eslint-disable-line no-console
-          }
-        }
-
         const doc = this.getRootNode();
         if (changedProperties.has('collapseMode')) {
           forEach(doc.querySelectorAll(this.constructor.selectorButtonToggle), item => {
@@ -243,22 +225,123 @@ let BXSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_init
           });
         }
         if (changedProperties.has('expanded')) {
+          const headerItems = doc.querySelectorAll(this.constructor.selectorHeaderItems);
           this._updatedSideNavMenuForceCollapsedState();
           forEach(doc.querySelectorAll(this.constructor.selectorButtonToggle), item => {
             item.active = this.expanded;
           });
+          if (this.expanded) {
+            forEach(headerItems, item => {
+              item.setAttribute('tabindex', '-1');
+            });
+          } else {
+            forEach(headerItems, item => {
+              item.removeAttribute('tabindex');
+            });
+          }
         }
-        if (changedProperties.has('usageMode')) {
+        if (changedProperties.has('isNotChildOfHeader')) {
           forEach(doc.querySelectorAll(this.constructor.selectorButtonToggle), item => {
-            item.usageMode = this.usageMode;
+            item.isNotChildOfHeader = this.isNotChildOfHeader;
           });
         }
       }
+
+      /**
+       * Handles `blur` event handler on this element.
+       *
+       * @param event The event.
+       */
+    }, {
+      kind: "method",
+      decorators: [HostListener('focusout')],
+      key: "_handleFocusOut",
+      value: function _handleFocusOut({
+        relatedTarget
+      }) {
+        if (!this.contains(relatedTarget)) {
+          this.expanded = false;
+        }
+      }
+
+      /**
+       * Handles `focus` event handler on this element.
+       *
+       * @param event The event.
+       */
+    }, {
+      kind: "method",
+      decorators: [HostListener('focusin')],
+      key: "_handleFocusIn",
+      value: function _handleFocusIn() {
+        this.expanded = true;
+      }
+
+      /**
+       * Handles the `mouseover` event for the side nav in rail mode.
+       *
+       */
+    }, {
+      kind: "method",
+      key: "_handleNavMouseOver",
+      value: function _handleNavMouseOver() {
+        const {
+          collapseMode
+        } = this;
+        if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {
+          this.expanded = true;
+          this._hovered = true;
+          this._updatedSideNavMenuForceCollapsedState();
+        }
+      }
+
+      /**
+       * Handles the `mouseout` event for the side nav in rail mode.
+       *
+       */
+    }, {
+      kind: "method",
+      key: "_handleNavMouseOut",
+      value: function _handleNavMouseOut() {
+        const {
+          collapseMode
+        } = this;
+        if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {
+          this.expanded = false;
+          this._hovered = false;
+          this._updatedSideNavMenuForceCollapsedState();
+        }
+      }
     }, {
       kind: "method",
       key: "render",
       value: function render() {
-        return html(_t || (_t = _` <slot></slot> `));
+        const {
+          collapseMode,
+          expanded,
+          isNotChildOfHeader,
+          isNotPersistent
+        } = this;
+        const classes = classMap({
+          [`${prefix}--side-nav__navigation`]: true,
+          [`${prefix}--side-nav`]: true,
+          [`${prefix}--side-nav--expanded`]: expanded,
+          [`${prefix}--side-nav--collapsed`]: !expanded && collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED,
+          [`${prefix}--side-nav--rail`]: collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL,
+          [`${prefix}--side-nav--ux`]: !isNotChildOfHeader,
+          [`${prefix}--side-nav--hidden`]: isNotPersistent
+        });
+        const overlayClasses = classMap({
+          [`${prefix}--side-nav__overlay`]: true,
+          [`${prefix}--side-nav__overlay-active`]: expanded
+        });
+        return html(_t || (_t = _`${0}
+      <div
+        class="${0}"
+        @mouseover="${0}"
+        @mouseout="${0}">
+        <slot></slot>
+      </div>`), this.collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ? null : html(_t2 || (_t2 = _`<div class="${0}"></div>`), overlayClasses), classes, this._handleNavMouseOver, this._handleNavMouseOut);
       }
 
       /**
@@ -272,6 +355,17 @@ let BXSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_init
         return `${prefix}-header-menu-button`;
       }
 
+      /**
+       * A selector that will return the header name + global action elements.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "selectorHeaderItems",
+      value: function selectorHeaderItems() {
+        return `${prefix}-header-name, ${prefix}-header-global-action`;
+      }
+
       /**
        * A selector that will return side nav focusable items.
        */
@@ -314,5 +408,5 @@ let BXSideNav = _decorate([customElement(`${prefix}-side-nav`)], function (_init
     }]
   };
 }, HostListenerMixin(LitElement));
-export default BXSideNav;
+export default CDSSideNav;
 //# sourceMappingURL=side-nav.js.map

package/es/components/ui-shell/side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.js","names":["LitElement","html","property","customElement","on","prefix","HostListenerMixin","HostListener","forEach","SIDE_NAV_COLLAPSE_MODE","SIDE_NAV_USAGE_MODE","styles","BXSideNav","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","Promise","resolve","_updateAndTransitionPromise","updateComplete","then","_transitionPromise","_cleanHTransition","_hTransition","release","decorators","event","expanded","detail","active","_this$querySelector","querySelector","selectorNavItems","focus","_updatedSideNavMenuForceCollapsedState","_hovered","hovered","querySelectorAll","selectorMenu","item","forceCollapsed","_handleMouseover","_handleMouseout","reflect","attribute","RESPONSIVE","type","Boolean","REGULAR","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","disconnectedCallback","shouldUpdate","changedProperties","has","updated","collapseMode","usageMode","FIXED","RAIL","HEADER_NAV","console","warn","doc","getRootNode","selectorButtonToggle","render","_t","_","static","eventButtonToggle"],"sources":["components/ui-shell/side-nav.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport on from '../../globals/mixins/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport BXHeaderMenuButton from './header-menu-button';\nimport BXSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass BXSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof BXSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof BXSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as BXSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Handles `mouseover` event handler.\n   */\n  @HostListener('mouseover')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseover() {\n    this._hovered = true;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Handles `mouseout` event handler.\n   */\n  @HostListener('mouseout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleMouseout() {\n    this._hovered = false;\n    this._updatedSideNavMenuForceCollapsedState();\n  }\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Usage mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'usage-mode' })\n  usageMode = SIDE_NAV_USAGE_MODE.REGULAR;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    if (\n      changedProperties.has('collapseMode') ||\n      changedProperties.has('usageMode')\n    ) {\n      const { collapseMode, usageMode } = this;\n      if (\n        (collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ||\n          collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) &&\n        usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV\n      ) {\n        console.warn(\n          'Fixed/rail modes of side nav cannot be used with header nav mode.'\n        ); // eslint-disable-line no-console\n      }\n    }\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).active = this.expanded;\n        }\n      );\n    }\n    if (changedProperties.has('usageMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof BXSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as BXHeaderMenuButton).usageMode = this.usageMode;\n        }\n      );\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSideNav;\n"],"mappings":"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"}
+{"version":3,"file":"side-nav.js","names":["LitElement","html","property","customElement","classMap","on","prefix","HostListenerMixin","HostListener","forEach","SIDE_NAV_COLLAPSE_MODE","SIDE_NAV_USAGE_MODE","styles","CDSSideNav","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","Promise","resolve","_updateAndTransitionPromise","updateComplete","then","_transitionPromise","_cleanHTransition","_hTransition","release","decorators","event","expanded","detail","active","_this$querySelector","querySelector","selectorNavItems","focus","_updatedSideNavMenuForceCollapsedState","_hovered","hovered","querySelectorAll","selectorMenu","item","forceCollapsed","reflect","attribute","RESPONSIVE","type","Boolean","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","disconnectedCallback","shouldUpdate","changedProperties","has","updated","doc","getRootNode","selectorButtonToggle","collapseMode","headerItems","selectorHeaderItems","removeAttribute","isNotChildOfHeader","_handleFocusOut","relatedTarget","contains","_handleFocusIn","_handleNavMouseOver","RAIL","_handleNavMouseOut","render","isNotPersistent","classes","FIXED","overlayClasses","_t","_","_t2","static","eventButtonToggle"],"sources":["components/ui-shell/side-nav.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport on from '../../globals/mixins/on';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport Handle from '../../globals/internal/handle';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';\nimport CDSHeaderMenuButton from './header-menu-button';\nimport CDSSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/**\n * Side nav.\n *\n * @element cds-side-nav\n */\n@customElement(`${prefix}-side-nav`)\nclass CDSSideNav extends HostListenerMixin(LitElement) {\n  /**\n   * `true` if this side nav is hovered.\n   */\n  private _hovered = false;\n\n  /**\n   * The handle for `transitionend` event listener.\n   */\n  private _hTransition: Handle | null = null;\n\n  /**\n   * A promise that is resolved when the transition is complete.\n   */\n  private _transitionPromise = Promise.resolve();\n\n  /**\n   * A promise that is resolved when the transition upon proprety update is complete.\n   */\n  private get _updateAndTransitionPromise() {\n    return this.updateComplete.then(() => this._transitionPromise);\n  }\n\n  /**\n   * Cleans the handle for `transitionend` event listener.\n   */\n  private _cleanHTransition() {\n    if (this._hTransition) {\n      this._hTransition = this._hTransition.release();\n    }\n  }\n\n  /**\n   * Handles `${prefix}-header-menu-button-toggle` event on the document.\n   */\n  @HostListener('parentRoot:eventButtonToggle')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleButtonToggle = async (event: CustomEvent) => {\n    this.expanded = event.detail.active;\n    if (this.expanded) {\n      await this._updateAndTransitionPromise;\n      // Checks if the side nav is not collapsed during the animation\n      if (this.expanded) {\n        (\n          this.querySelector(\n            (this.constructor as typeof CDSSideNav).selectorNavItems\n          ) as HTMLElement\n        )?.focus();\n      }\n    }\n  };\n\n  /**\n   * Force child side nav menus collapsed upon the hover/expanded state of this side nav.\n   */\n  private _updatedSideNavMenuForceCollapsedState() {\n    const { expanded, _hovered: hovered } = this;\n    forEach(\n      this.querySelectorAll(\n        (this.constructor as typeof CDSSideNav).selectorMenu\n      ),\n      (item) => {\n        (item as CDSSideNavMenu).forceCollapsed = !expanded && !hovered;\n      }\n    );\n  }\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` to expand the side nav.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * If `true` will style the side nav to sit below the header\n   */\n  @property({\n    type: Boolean,\n    attribute: 'is-not-child-of-header',\n  })\n  isNotChildOfHeader = false;\n\n  /**\n   * Specify if the side-nav will be persistent above the lg breakpoint\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'is-not-persistent' })\n  isNotPersistent = false;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'navigation');\n    }\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    this._cleanHTransition();\n    super.disconnectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      this._transitionPromise = new Promise((resolve) => {\n        this._cleanHTransition();\n        this._hTransition = on(this, 'transitionend', () => {\n          this._cleanHTransition();\n          resolve();\n        });\n      });\n    }\n    return true;\n  }\n\n  updated(changedProperties) {\n    const doc = this.getRootNode() as Document;\n    if (changedProperties.has('collapseMode')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof CDSSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as CDSHeaderMenuButton).collapseMode = this.collapseMode;\n        }\n      );\n    }\n    if (changedProperties.has('expanded')) {\n      const headerItems = doc.querySelectorAll(\n        (this.constructor as typeof CDSSideNav).selectorHeaderItems\n      );\n      this._updatedSideNavMenuForceCollapsedState();\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof CDSSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as CDSHeaderMenuButton).active = this.expanded;\n        }\n      );\n      if (this.expanded) {\n        forEach(headerItems, (item) => {\n          item.setAttribute('tabindex', '-1');\n        });\n      } else {\n        forEach(headerItems, (item) => {\n          item.removeAttribute('tabindex');\n        });\n      }\n    }\n    if (changedProperties.has('isNotChildOfHeader')) {\n      forEach(\n        doc.querySelectorAll(\n          (this.constructor as typeof CDSSideNav).selectorButtonToggle\n        ),\n        (item) => {\n          (item as CDSHeaderMenuButton).isNotChildOfHeader =\n            this.isNotChildOfHeader;\n        }\n      );\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusOut({ relatedTarget }: FocusEvent) {\n    if (!this.contains(relatedTarget as Node)) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * Handles `focus` event handler on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusIn() {\n    this.expanded = true;\n  }\n\n  /**\n   * Handles the `mouseover` event for the side nav in rail mode.\n   *\n   */\n  private _handleNavMouseOver() {\n    const { collapseMode } = this;\n    if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {\n      this.expanded = true;\n      this._hovered = true;\n      this._updatedSideNavMenuForceCollapsedState();\n    }\n  }\n\n  /**\n   * Handles the `mouseout` event for the side nav in rail mode.\n   *\n   */\n  private _handleNavMouseOut() {\n    const { collapseMode } = this;\n    if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {\n      this.expanded = false;\n      this._hovered = false;\n      this._updatedSideNavMenuForceCollapsedState();\n    }\n  }\n\n  render() {\n    const { collapseMode, expanded, isNotChildOfHeader, isNotPersistent } =\n      this;\n    const classes = classMap({\n      [`${prefix}--side-nav__navigation`]: true,\n      [`${prefix}--side-nav`]: true,\n      [`${prefix}--side-nav--expanded`]: expanded,\n      [`${prefix}--side-nav--collapsed`]:\n        !expanded && collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED,\n      [`${prefix}--side-nav--rail`]:\n        collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL,\n      [`${prefix}--side-nav--ux`]: !isNotChildOfHeader,\n      [`${prefix}--side-nav--hidden`]: isNotPersistent,\n    });\n\n    const overlayClasses = classMap({\n      [`${prefix}--side-nav__overlay`]: true,\n      [`${prefix}--side-nav__overlay-active`]: expanded,\n    });\n    return html`${this.collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED\n        ? null\n        : html`<div class=\"${overlayClasses}\"></div>`}\n      <div\n        class=\"${classes}\"\n        @mouseover=\"${this._handleNavMouseOver}\"\n        @mouseout=\"${this._handleNavMouseOut}\">\n        <slot></slot>\n      </div>`;\n  }\n\n  /**\n   * A selector that will return the toggle buttons.\n   */\n  static get selectorButtonToggle() {\n    return `${prefix}-header-menu-button`;\n  }\n\n  /**\n   * A selector that will return the header name + global action elements.\n   */\n  static get selectorHeaderItems() {\n    return `${prefix}-header-name, ${prefix}-header-global-action`;\n  }\n\n  /**\n   * A selector that will return side nav focusable items.\n   */\n  static get selectorNavItems() {\n    return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;\n  }\n\n  /**\n   * A selector that will return side nav menus.\n   */\n  static get selectorMenu() {\n    return `${prefix}-side-nav-menu`;\n  }\n\n  /**\n   * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\n   */\n  static get eventButtonToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSSideNav;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,QAAQ,QAAQ,6BAA6B;AACtD,OAAOC,EAAE,MAAM,yBAAyB;AACxC,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,OAAOC,YAAY,MAAM,wCAAwC;AACjE,SAASC,OAAO,QAAQ,2CAA2C;AAEnE,SAASC,sBAAsB,EAAEC,mBAAmB,QAAQ,QAAQ;AAGpE,OAAOC,MAAM,MAAM,qBAAiB;AAEpC,SAASF,sBAAsB,EAAEC,mBAAmB;;AAEpD;AACA;AACA;AACA;AACA;AAJA,IAMME,UAAU,GAAAC,SAAA,EADfX,aAAa,CAAE,GAAEG,MAAO,WAAU,CAAC,aAAAS,WAAA,EAAAC,kBAAA;EAApC,MACMH,UAAU,SAAAG,kBAAA,CAAuC;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA2RvD;EAAC;IAAAI,CAAA,EA3RKN,UAAU;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAIK,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAKc,IAAI;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAKbC,OAAO,CAACC,OAAO,EAAE;MAAA;IAAA;MAAAJ,IAAA;MAAAC,GAAA;MAAAC,KAAA;MAb9C;AACF;AACA;;MAGE;AACF;AACA;;MAGE;AACF;AACA;;MAGE;AACF;AACA;MACE,SAAAG,4BAAA,EAA0C;QACxC,OAAO,IAAI,CAACC,cAAc,CAACC,IAAI,CAAC,MAAM,IAAI,CAACC,kBAAkB,CAAC;MAChE;;MAEA;AACF;AACA;IAFE;MAAAR,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAGA,SAAAO,kBAAA,EAA4B;QAC1B,IAAI,IAAI,CAACC,YAAY,EAAE;UACrB,IAAI,CAACA,YAAY,GAAG,IAAI,CAACA,YAAY,CAACC,OAAO,EAAE;QACjD;MACF;;MAEA;AACF;AACA;IAFE;MAAAX,IAAA;MAAAY,UAAA,GAGCzB,YAAY,CAAC,8BAA8B,CAAC;MAAAc,GAAA;MAAAC,MAAA;QAAA,OAEf,MAAOW,KAAkB,IAAK;UAC1D,IAAI,CAACC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAACC,MAAM;UACnC,IAAI,IAAI,CAACF,QAAQ,EAAE;YACjB,MAAM,IAAI,CAACT,2BAA2B;YACtC;YACA,IAAI,IAAI,CAACS,QAAQ,EAAE;cAAA,IAAAG,mBAAA;cACjB,CAAAA,mBAAA,GACE,IAAI,CAACC,aAAa,CACf,IAAI,CAACtB,WAAW,CAAuBuB,gBAAgB,CACzD,cAAAF,mBAAA,uBAHHA,mBAAA,CAIGG,KAAK,EAAE;YACZ;UACF;QACF,CAAC;MAAA;IAAA;MAAApB,IAAA;MAAAC,GAAA;MAAAC,KAAA;MAED;AACF;AACA;MACE,SAAAmB,uCAAA,EAAiD;QAC/C,MAAM;UAAEP,QAAQ;UAAEQ,QAAQ,EAAEC;QAAQ,CAAC,GAAG,IAAI;QAC5CnC,OAAO,CACL,IAAI,CAACoC,gBAAgB,CAClB,IAAI,CAAC5B,WAAW,CAAuB6B,YAAY,CACrD,EACAC,IAAI,IAAK;UACPA,IAAI,CAAoBC,cAAc,GAAG,CAACb,QAAQ,IAAI,CAACS,OAAO;QACjE,CAAC,CACF;MACH;;MAEA;AACF;AACA;IAFE;MAAAvB,IAAA;MAAAY,UAAA,GAGC/B,QAAQ,CAAC;QAAE+C,OAAO,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAgB,CAAC,CAAC;MAAA5B,GAAA;MAAAC,MAAA;QAAA,OACzCb,sBAAsB,CAACyC,UAAU;MAAA;IAAA;MAAA9B,IAAA;MAAAY,UAAA,GAK/C/B,QAAQ,CAAC;QAAEkD,IAAI,EAAEC,OAAO;QAAEJ,OAAO,EAAE;MAAK,CAAC,CAAC;MAAA3B,GAAA;MAAAC,MAAA;QAAA,OAChC,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAY,UAAA,GAKf/B,QAAQ,CAAC;QACRkD,IAAI,EAAEC,OAAO;QACbH,SAAS,EAAE;MACb,CAAC,CAAC;MAAA5B,GAAA;MAAAC,MAAA;QAAA,OACmB,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAY,UAAA,GAKzB/B,QAAQ,CAAC;QAAEkD,IAAI,EAAEC,OAAO;QAAEJ,OAAO,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAoB,CAAC,CAAC;MAAA5B,GAAA;MAAAC,MAAA;QAAA,OACzD,KAAK;MAAA;IAAA;MAAAF,IAAA;MAAAC,GAAA;MAAAC,KAAA;MAnBvB;AACF;AACA;MAIE;AACF;AACA;MAOE;AACF;AACA;MAIE,SAAA+B,kBAAA,EAAoB;QAClB,IAAI,CAAC,IAAI,CAACC,YAAY,CAAC,MAAM,CAAC,EAAE;UAC9B,IAAI,CAACC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC;QACzC;QACAC,IAAA,CAAAC,eAAA,CAlGE7C,UAAU,CAAA8C,SAAA,8BAAAC,IAAA;MAmGd;IAAC;MAAAvC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAsC,qBAAA,EAAuB;QACrB,IAAI,CAAC/B,iBAAiB,EAAE;QACxB2B,IAAA,CAAAC,eAAA,CAvGE7C,UAAU,CAAA8C,SAAA,iCAAAC,IAAA;MAwGd;IAAC;MAAAvC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAAuC,aAAaC,iBAAiB,EAAE;QAC9B,IAAIA,iBAAiB,CAACC,GAAG,CAAC,UAAU,CAAC,EAAE;UACrC,IAAI,CAACnC,kBAAkB,GAAG,IAAIL,OAAO,CAAEC,OAAO,IAAK;YACjD,IAAI,CAACK,iBAAiB,EAAE;YACxB,IAAI,CAACC,YAAY,GAAG1B,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,MAAM;cAClD,IAAI,CAACyB,iBAAiB,EAAE;cACxBL,OAAO,EAAE;YACX,CAAC,CAAC;UACJ,CAAC,CAAC;QACJ;QACA,OAAO,IAAI;MACb;IAAC;MAAAJ,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAA0C,QAAQF,iBAAiB,EAAE;QACzB,MAAMG,GAAG,GAAG,IAAI,CAACC,WAAW,EAAc;QAC1C,IAAIJ,iBAAiB,CAACC,GAAG,CAAC,cAAc,CAAC,EAAE;UACzCvD,OAAO,CACLyD,GAAG,CAACrB,gBAAgB,CACjB,IAAI,CAAC5B,WAAW,CAAuBmD,oBAAoB,CAC7D,EACArB,IAAI,IAAK;YACPA,IAAI,CAAyBsB,YAAY,GAAG,IAAI,CAACA,YAAY;UAChE,CAAC,CACF;QACH;QACA,IAAIN,iBAAiB,CAACC,GAAG,CAAC,UAAU,CAAC,EAAE;UACrC,MAAMM,WAAW,GAAGJ,GAAG,CAACrB,gBAAgB,CACrC,IAAI,CAAC5B,WAAW,CAAuBsD,mBAAmB,CAC5D;UACD,IAAI,CAAC7B,sCAAsC,EAAE;UAC7CjC,OAAO,CACLyD,GAAG,CAACrB,gBAAgB,CACjB,IAAI,CAAC5B,WAAW,CAAuBmD,oBAAoB,CAC7D,EACArB,IAAI,IAAK;YACPA,IAAI,CAAyBV,MAAM,GAAG,IAAI,CAACF,QAAQ;UACtD,CAAC,CACF;UACD,IAAI,IAAI,CAACA,QAAQ,EAAE;YACjB1B,OAAO,CAAC6D,WAAW,EAAGvB,IAAI,IAAK;cAC7BA,IAAI,CAACS,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC;YACrC,CAAC,CAAC;UACJ,CAAC,MAAM;YACL/C,OAAO,CAAC6D,WAAW,EAAGvB,IAAI,IAAK;cAC7BA,IAAI,CAACyB,eAAe,CAAC,UAAU,CAAC;YAClC,CAAC,CAAC;UACJ;QACF;QACA,IAAIT,iBAAiB,CAACC,GAAG,CAAC,oBAAoB,CAAC,EAAE;UAC/CvD,OAAO,CACLyD,GAAG,CAACrB,gBAAgB,CACjB,IAAI,CAAC5B,WAAW,CAAuBmD,oBAAoB,CAC7D,EACArB,IAAI,IAAK;YACPA,IAAI,CAAyB0B,kBAAkB,GAC9C,IAAI,CAACA,kBAAkB;UAC3B,CAAC,CACF;QACH;MACF;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAApD,IAAA;MAAAY,UAAA,GAKCzB,YAAY,CAAC,UAAU,CAAC;MAAAc,GAAA;MAAAC,KAAA,EAAzB,SAAAmD,gBAEwB;QAAEC;MAA0B,CAAC,EAAE;QACrD,IAAI,CAAC,IAAI,CAACC,QAAQ,CAACD,aAAa,CAAS,EAAE;UACzC,IAAI,CAACxC,QAAQ,GAAG,KAAK;QACvB;MACF;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAAd,IAAA;MAAAY,UAAA,GAKCzB,YAAY,CAAC,SAAS,CAAC;MAAAc,GAAA;MAAAC,KAAA,EAAxB,SAAAsD,eAAA,EAEyB;QACvB,IAAI,CAAC1C,QAAQ,GAAG,IAAI;MACtB;;MAEA;AACF;AACA;AACA;IAHE;MAAAd,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAIA,SAAAuD,oBAAA,EAA8B;QAC5B,MAAM;UAAET;QAAa,CAAC,GAAG,IAAI;QAC7B,IAAIA,YAAY,KAAK3D,sBAAsB,CAACqE,IAAI,EAAE;UAChD,IAAI,CAAC5C,QAAQ,GAAG,IAAI;UACpB,IAAI,CAACQ,QAAQ,GAAG,IAAI;UACpB,IAAI,CAACD,sCAAsC,EAAE;QAC/C;MACF;;MAEA;AACF;AACA;AACA;IAHE;MAAArB,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAIA,SAAAyD,mBAAA,EAA6B;QAC3B,MAAM;UAAEX;QAAa,CAAC,GAAG,IAAI;QAC7B,IAAIA,YAAY,KAAK3D,sBAAsB,CAACqE,IAAI,EAAE;UAChD,IAAI,CAAC5C,QAAQ,GAAG,KAAK;UACrB,IAAI,CAACQ,QAAQ,GAAG,KAAK;UACrB,IAAI,CAACD,sCAAsC,EAAE;QAC/C;MACF;IAAC;MAAArB,IAAA;MAAAC,GAAA;MAAAC,KAAA,EAED,SAAA0D,OAAA,EAAS;QACP,MAAM;UAAEZ,YAAY;UAAElC,QAAQ;UAAEsC,kBAAkB;UAAES;QAAgB,CAAC,GACnE,IAAI;QACN,MAAMC,OAAO,GAAG/E,QAAQ,CAAC;UACvB,CAAE,GAAEE,MAAO,wBAAuB,GAAG,IAAI;UACzC,CAAE,GAAEA,MAAO,YAAW,GAAG,IAAI;UAC7B,CAAE,GAAEA,MAAO,sBAAqB,GAAG6B,QAAQ;UAC3C,CAAE,GAAE7B,MAAO,uBAAsB,GAC/B,CAAC6B,QAAQ,IAAIkC,YAAY,KAAK3D,sBAAsB,CAAC0E,KAAK;UAC5D,CAAE,GAAE9E,MAAO,kBAAiB,GAC1B+D,YAAY,KAAK3D,sBAAsB,CAACqE,IAAI;UAC9C,CAAE,GAAEzE,MAAO,gBAAe,GAAG,CAACmE,kBAAkB;UAChD,CAAE,GAAEnE,MAAO,oBAAmB,GAAG4E;QACnC,CAAC,CAAC;QAEF,MAAMG,cAAc,GAAGjF,QAAQ,CAAC;UAC9B,CAAE,GAAEE,MAAO,qBAAoB,GAAG,IAAI;UACtC,CAAE,GAAEA,MAAO,4BAA2B,GAAG6B;QAC3C,CAAC,CAAC;QACF,OAAOlC,IAAI,CAAAqF,EAAA,KAAAA,EAAA,GAAAC,CAAC,IAEsC;AACtD;AACA,iBAAe,CAAU;AACzB,sBAAoB,CAA2B;AAC/C,qBAAmB,CAA0B;AAC7C;AACA,aAAY,GARM,IAAI,CAAClB,YAAY,KAAK3D,sBAAsB,CAAC0E,KAAK,GAC1D,IAAI,GACJnF,IAAI,CAAAuF,GAAA,KAAAA,GAAA,GAAAD,CAAC,eAAY,CAAiB,UAAQ,GAAvBF,cAAc,CAAU,EAEpCF,OAAO,EACF,IAAI,CAACL,mBAAmB,EACzB,IAAI,CAACE,kBAAkB;MAG1C;;MAEA;AACF;AACA;IAFE;MAAA3D,IAAA;MAAAoE,MAAA;MAAAnE,GAAA;MAAAC,KAAA,EAGA,SAAA6C,qBAAA,EAAkC;QAChC,OAAQ,GAAE9D,MAAO,qBAAoB;MACvC;;MAEA;AACF;AACA;IAFE;MAAAe,IAAA;MAAAoE,MAAA;MAAAnE,GAAA;MAAAC,KAAA,EAGA,SAAAgD,oBAAA,EAAiC;QAC/B,OAAQ,GAAEjE,MAAO,iBAAgBA,MAAO,uBAAsB;MAChE;;MAEA;AACF;AACA;IAFE;MAAAe,IAAA;MAAAoE,MAAA;MAAAnE,GAAA;MAAAC,KAAA,EAGA,SAAAiB,iBAAA,EAA8B;QAC5B,OAAQ,GAAElC,MAAO,mBAAkBA,MAAO,wBAAuBA,MAAO,gBAAe;MACzF;;MAEA;AACF;AACA;IAFE;MAAAe,IAAA;MAAAoE,MAAA;MAAAnE,GAAA;MAAAC,KAAA,EAGA,SAAAuB,aAAA,EAA0B;QACxB,OAAQ,GAAExC,MAAO,gBAAe;MAClC;;MAEA;AACF;AACA;IAFE;MAAAe,IAAA;MAAAoE,MAAA;MAAAnE,GAAA;MAAAC,KAAA,EAGA,SAAAmE,kBAAA,EAA+B;QAC7B,OAAQ,GAAEpF,MAAO,6BAA4B;MAC/C;IAAC;MAAAe,IAAA;MAAAoE,MAAA;MAAAnE,GAAA;MAAAC,MAAA;QAAA,OAEeX,MAAM;MAAA;IAAA;EAAA;AAAA,GA1RCL,iBAAiB,CAACP,UAAU,CAAC;AA6RtD,eAAea,UAAU"}

package/es/components/ui-shell/side-nav.rtl.css.js

@@ -8,5 +8,5 @@
  */
 import { css } from 'lit';
 export default css([
-  '.cds--side-nav,:host(cds-side-nav){position:fixed;z-index:8000;top:0;bottom:0;right:0;overflow:hidden;width:3rem;max-width:16rem;background-color:var(--cds-background,#fff);color:var(--cds-text-secondary,#525252);transition:width .11s cubic-bezier(.2,0,1,.9);will-change:width}.cds--side-nav--ux,:host(cds-side-nav){top:3rem;width:16rem}@media (max-width:65.98rem){.cds--side-nav--ux,:host(cds-side-nav){width:0}}.cds--side-nav--rail{width:3rem}.cds--side-nav--hidden{width:0}.cds--side-nav--expanded,.cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover,:host(cds-side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover),:host(cds-side-nav[collapse-mode][expanded]),:host(cds-side-nav[expanded]){width:16rem}.cds--side-nav__overlay{position:fixed;top:3rem;right:0;width:0;height:0;background-color:transparent;opacity:0;transition:opacity .3s cubic-bezier(.5,0,.1,1),background-color .3s cubic-bezier(.5,0,.1,1)}@media (max-width:65.98rem){.cds--side-nav__overlay-active{width:100vw;height:100vh;background-color:var(--cds-overlay,rgba(22,22,22,.5));opacity:1;transition:opacity .3s cubic-bezier(.5,0,.1,1),background-color .3s cubic-bezier(.5,0,.1,1)}}.cds--header~.cds--side-nav,.cds--header~:host(cds-side-nav){top:3rem;height:calc(100% - 48px)}.cds--side-nav--fixed{width:16rem}.cds--side-nav--collapsed{width:16rem;transform:translateX(16rem)}.cds--side-nav__navigation,:host(cds-side-nav){display:flex;flex-direction:column}.cds--side-nav__items,:host(cds-side-nav-items){overflow:hidden;flex:1 1 0%;padding:1rem 0 0}.cds--side-nav--expanded .cds--side-nav__items,.cds--side-nav--expanded :host(cds-side-nav-items),.cds--side-nav--fixed .cds--side-nav__items,.cds--side-nav--fixed :host(cds-side-nav-items),.cds--side-nav:hover .cds--side-nav__items,.cds--side-nav:hover :host(cds-side-nav-items),:host(cds-side-nav:hover) .cds--side-nav__items,:host(cds-side-nav:hover) :host(cds-side-nav-items),:host(cds-side-nav[collapse-mode][expanded]) :host(cds-side-nav-items),:host(cds-side-nav[expanded]) .cds--side-nav__items,:host(cds-side-nav[expanded]) :host(cds-side-nav-items){overflow-y:auto}.cds--side-nav--ux .cds--side-nav__items,.cds--side-nav--ux :host(cds-side-nav-items),:host(cds-side-nav) .cds--side-nav__items,:host(cds-side-nav) :host(cds-side-nav-items){overflow-y:auto}.cds--side-nav__item,:host(cds-side-nav-link),:host(cds-side-nav-menu){overflow:hidden;width:auto;height:auto}.cds--side-nav--ux .cds--side-nav__item,.cds--side-nav--ux :host(cds-side-nav-link),.cds--side-nav--ux :host(cds-side-nav-menu),:host(cds-side-nav) .cds--side-nav__item,:host(cds-side-nav) :host(cds-side-nav-link),:host(cds-side-nav) :host(cds-side-nav-menu){width:auto;height:auto}.cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover,.cds--side-nav a.cds--header__menu-item:hover,.cds--side-nav__item:not(.cds--side-nav__item--active):hover .cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__submenu:hover,.cds--side-nav__item:not(.cds--side-nav__item--active):hover :host(cds-side-nav-link:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover,.cds--side-nav__item:not(.cds--side-nav__item--active):hover :host(cds-side-nav-menu:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover,.cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__link:hover,.cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,:host(cds-side-nav) .cds--header__menu-title[aria-expanded=true]:hover,:host(cds-side-nav) a.cds--header__menu-item:hover,:host(cds-side-nav-link:not(.cds--side-nav__item--active))>.cds--side-nav__link:hover,:host(cds-side-nav-link:not(.cds--side-nav__item--active):hover) .cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__submenu:hover,:host(cds-side-nav-link:not(.cds--side-nav__item--active):hover) :host(cds-side-nav-link:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover,:host(cds-side-nav-link:not(.cds--side-nav__item--active):hover) :host(cds-side-nav-menu:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover,:host(cds-side-nav-menu:not(.cds--side-nav__item--active))>.cds--side-nav__link:hover,:host(cds-side-nav-menu:not(.cds--side-nav__item--active):hover) .cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__submenu:hover,:host(cds-side-nav-menu:not(.cds--side-nav__item--active):hover) :host(cds-side-nav-link:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover,:host(cds-side-nav-menu:not(.cds--side-nav__item--active):hover) :host(cds-side-nav-menu:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover{background-color:var(--cds-background-hover,rgba(141,141,141,.12));color:var(--cds-text-primary,#161616)}.cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item>.cds--side-nav__link:hover>span,.cds--side-nav__item:not(.cds--side-nav__item--active) :host(cds-side-nav-menu-item)>.cds--side-nav__link:hover>span,.cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__link:hover>span,:host(cds-side-nav-link:not(.cds--side-nav__item--active)) .cds--side-nav__menu-item>.cds--side-nav__link:hover>span,:host(cds-side-nav-link:not(.cds--side-nav__item--active)) :host(cds-side-nav-menu-item)>.cds--side-nav__link:hover>span,:host(cds-side-nav-link:not(.cds--side-nav__item--active))>.cds--side-nav__link:hover>span,:host(cds-side-nav-menu:not(.cds--side-nav__item--active)) .cds--side-nav__menu-item>.cds--side-nav__link:hover>span,:host(cds-side-nav-menu:not(.cds--side-nav__item--active)) :host(cds-side-nav-menu-item)>.cds--side-nav__link:hover>span,:host(cds-side-nav-menu:not(.cds--side-nav__item--active))>.cds--side-nav__link:hover>span{color:var(--cds-text-primary,#161616)}.cds--side-nav__item--large{height:3rem}.cds--side-nav__divider,:host(cds-side-nav-divider){height:1px;margin:.5rem 1rem;background-color:var(--cds-border-subtle)}.cds--side-nav__submenu{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);line-height:var(--cds-heading-compact-01-line-height,1.28572);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);outline:2px solid transparent;outline-offset:-2px;display:flex;height:2rem;align-items:center;padding:0 1rem;color:var(--cds-text-secondary,#525252);transition:color 110ms,background-color 110ms,outline 110ms;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--side-nav__submenu *,.cds--side-nav__submenu ::after,.cds--side-nav__submenu ::before{box-sizing:inherit}.cds--side-nav__submenu::-moz-focus-inner{border:0}.cds--side-nav__submenu:hover{background-color:var(--cds-background-hover,rgba(141,141,141,.12));color:var(--cds-text-primary,#161616)}.cds--side-nav__submenu:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--side-nav__submenu:focus{outline-style:dotted}}.cds--side-nav__submenu-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.cds--side-nav__icon.cds--side-nav__submenu-chevron{display:flex;flex:1;justify-content:flex-end}.cds--side-nav__submenu-chevron>svg{width:1rem;height:1rem;transition:transform 110ms}.cds--side-nav__submenu[aria-expanded=true] .cds--side-nav__submenu-chevron>svg{transform:rotate(-180deg)}.cds--side-nav__item--large .cds--side-nav__submenu{height:3rem}.cds--side-nav__item--active .cds--side-nav__submenu:hover,:host(cds-side-nav-menu[active]) .cds--side-nav__submenu:hover{background-color:var(--cds-background-selected,rgba(141,141,141,.2));color:var(--cds-text-primary,#161616)}.cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false],:host(cds-side-nav-menu[active]) .cds--side-nav__submenu[aria-expanded=false]{position:relative;background-color:var(--cds-background-selected,rgba(141,141,141,.2));color:var(--cds-text-primary,#161616)}.cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false]::before,:host(cds-side-nav-menu[active]) .cds--side-nav__submenu[aria-expanded=false]::before{position:absolute;top:0;bottom:0;right:0;width:3px;background-color:var(--cds-border-interactive,#0f62fe);content:""}.cds--side-nav__item--active .cds--side-nav__submenu-title,:host(cds-side-nav-menu[active]) .cds--side-nav__submenu-title{color:var(--cds-text-primary,#161616);font-weight:600}.cds--side-nav__item--active .cds--side-nav__icon>svg,:host(cds-side-nav-menu[active]) .cds--side-nav__icon>svg{fill:var(--cds-icon-primary,#161616)}.cds--side-nav__menu{display:block;max-height:0;visibility:hidden}.cds--side-nav__submenu[aria-expanded=true]+.cds--side-nav__menu{max-height:93.75rem;visibility:inherit}.cds--side-nav__menu a.cds--side-nav__link{height:2rem;min-height:2rem;padding-right:2rem;font-weight:400}.cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link,:host(:host(cds-side-nav-menu[has-icon]cds-side-nav-menu)) a.cds--side-nav__link,:host(cds-side-nav-link.cds--side-nav__item--icon) a.cds--side-nav__link,:host(cds-side-nav-menu.cds--side-nav__item--icon) a.cds--side-nav__link{padding-right:4.5rem}.cds--side-nav__menu a.cds--side-nav__link--current,.cds--side-nav__menu a.cds--side-nav__link[aria-current=page],a.cds--side-nav__link--current{background-color:var(--cds-background-selected,rgba(141,141,141,.2))}.cds--side-nav__menu a.cds--side-nav__link--current>span,.cds--side-nav__menu a.cds--side-nav__link[aria-current=page]>span,a.cds--side-nav__link--current>span{color:var(--cds-text-primary,#161616);font-weight:600}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu,.cds--side-nav a.cds--header__menu-item,:host(cds-side-nav) .cds--header__menu-title[aria-expanded=true]+.cds--header__menu,:host(cds-side-nav) a.cds--header__menu-item,a.cds--side-nav__link{outline:2px solid transparent;outline-offset:-2px;font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);line-height:var(--cds-heading-compact-01-line-height,1.28572);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);position:relative;display:flex;min-height:2rem;align-items:center;padding:0 1rem;text-decoration:none;transition:color 110ms,background-color 110ms,outline 110ms}.cds--side-nav__item--large a.cds--side-nav__link{height:3rem}.cds--side-nav a.cds--header__menu-item .cds--text-truncate-end,:host(cds-side-nav) a.cds--header__menu-item .cds--text-truncate-end,a.cds--side-nav__link>.cds--side-nav__link-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cds-text-secondary,#525252);font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--side-nav a.cds--header__menu-item:focus,:host(cds-side-nav) a.cds--header__menu-item:focus,a.cds--side-nav__link:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--side-nav a.cds--header__menu-item:focus,:host(cds-side-nav) a.cds--header__menu-item:focus,a.cds--side-nav__link:focus{outline-style:dotted}}a.cds--side-nav__link--current,a.cds--side-nav__link[aria-current=page]{background-color:var(--cds-background-selected,rgba(141,141,141,.2));font-weight:600}a.cds--side-nav__link--current .cds--side-nav__link-text,a.cds--side-nav__link[aria-current=page] .cds--side-nav__link-text{color:var(--cds-text-primary,#161616)}a.cds--side-nav__link--current::before,a.cds--side-nav__link[aria-current=page]::before{position:absolute;top:0;bottom:0;right:0;width:3px;background-color:var(--cds-border-interactive,#0f62fe);content:""}.cds--side-nav__icon{display:flex;flex:0 0 1rem;align-items:center;justify-content:center}.cds--side-nav__icon:not(.cds--side-nav__submenu-chevron){margin-left:1.5rem}.cds--side-nav__icon>svg{width:1rem;height:1rem;fill:var(--cds-icon-secondary,#525252)}.cds--side-nav__icon>svg.cds--side-nav-collapse-icon{display:none}.cds--side-nav--expanded .cds--side-nav__icon>svg.cds--side-nav-expand-icon,:host(cds-side-nav[expanded]) .cds--side-nav__icon>svg.cds--side-nav-expand-icon{display:none}.cds--side-nav--expanded .cds--side-nav__icon>svg.cds--side-nav-collapse-icon,:host(cds-side-nav[expanded]) .cds--side-nav__icon>svg.cds--side-nav-collapse-icon{display:block}.cds--side-nav--fixed .cds--side-nav__submenu,.cds--side-nav--fixed a.cds--side-nav__link{padding-right:1rem}.cds--side-nav--fixed .cds--side-nav__item:not(.cds--side-nav__item--icon) .cds--side-nav__menu a.cds--side-nav__link,.cds--side-nav--fixed :host(cds-side-nav-link:not(.cds--side-nav__item--icon)) .cds--side-nav__menu a.cds--side-nav__link,.cds--side-nav--fixed :host(cds-side-nav-menu:not(.cds--side-nav__item--icon)) .cds--side-nav__menu a.cds--side-nav__link{padding-right:2rem}@media (max-width:65.98rem){.cds--side-nav .cds--header__nav,:host(cds-side-nav) .cds--header__nav{display:block}}.cds--side-nav__header-navigation{display:none}@media (max-width:65.98rem){.cds--side-nav__header-navigation{position:relative;display:block;margin-bottom:2rem}}.cds--side-nav__header-divider::after{position:absolute;bottom:-1rem;right:1rem;width:calc(100% - 32px);height:.0625rem;background:var(--cds-border-subtle);content:""}.cds--side-nav a.cds--header__menu-item,:host(cds-side-nav) a.cds--header__menu-item{justify-content:space-between;color:var(--cds-text-secondary,#525252);white-space:nowrap}.cds--side-nav a.cds--header__menu-item[aria-expanded=true],:host(cds-side-nav) a.cds--header__menu-item[aria-expanded=true]{background-color:transparent}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu,:host(cds-side-nav) .cds--header__menu-title[aria-expanded=true]+.cds--header__menu{bottom:inherit;width:100%;padding:0;background-color:transparent;box-shadow:none;transform:none}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu li,:host(cds-side-nav) .cds--header__menu-title[aria-expanded=true]+.cds--header__menu li{width:100%}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu a.cds--header__menu-item,:host(cds-side-nav) .cds--header__menu-title[aria-expanded=true]+.cds--header__menu a.cds--header__menu-item{padding-right:4.25rem;font-weight:400}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu a.cds--header__menu-item:hover,:host(cds-side-nav) .cds--header__menu-title[aria-expanded=true]+.cds--header__menu a.cds--header__menu-item:hover{background-color:var(--cds-background-hover,rgba(141,141,141,.12));color:var(--cds-text-primary,#161616)}.cds--side-nav .cds--header__menu a.cds--header__menu-item,:host(cds-side-nav) .cds--header__menu a.cds--header__menu-item{height:inherit}.cds--side-nav .cds--header__menu-arrow,.cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,.cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,:host(cds-side-nav) .cds--header__menu-arrow{fill:var(--cds-icon-secondary,#525252)}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--side-nav .cds--header__menu-arrow,.cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,.cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,.cds--side-nav__icon>svg,:host(cds-side-nav) .cds--header__menu-arrow{fill:ButtonText}}:host(cds-side-nav){top:0}:host(cds-side-nav[collapse-mode=fixed]){width:16rem}:host(cds-side-nav[collapse-mode=rail]){width:3rem}:host(cds-side-nav[collapse-mode=rail]:hover){width:16rem}:host(cds-side-nav[collapse-mode][usage-mode=header-nav]),:host(cds-side-nav[usage-mode=header-nav]){width:0}@media (max-width:65.98rem){:host(cds-side-nav[collapse-mode][expanded][usage-mode=header-nav]),:host(cds-side-nav[expanded][usage-mode=header-nav]){width:16rem}}:host(cds-side-nav-link){display:block;outline:0;width:auto;height:auto}:host(cds-side-nav-link) .cds--side-nav__icon{color:var(--cds-text-primary,#161616)}:host(cds-side-nav-link) .cds--side-nav__icon[hidden]{display:none}:host(cds-side-nav-divider){display:block}:host(cds-side-nav-menu){display:block;outline:0;width:auto;height:auto}:host(cds-side-nav-menu) .cds--side-nav__icon[hidden]{display:none}:host(cds-side-nav-menu[active]){background-color:var(--cds-background-selected,rgba(141,141,141,.2));color:var(--cds-text-primary,#161616);position:relative}:host(cds-side-nav-menu[active])::before{content:"";position:absolute;top:0;bottom:0;right:0;width:4px;background-color:var(--cds-border-interactive,#0f62fe)}:host(cds-side-nav-menu[active][expanded]){background-color:inherit;color:inherit;position:inherit}:host(cds-side-nav-menu[active][expanded])::before{content:none}:host(cds-side-nav-menu-item){display:block;outline:0;width:auto;height:auto}:host(cds-side-nav-menu-item) a.cds--side-nav__link{height:1rem;min-height:1rem;padding-right:1rem;font-weight:400}:host(cds-side-nav-menu-item[parent-has-icon]) a.cds--side-nav__link{padding-right:rem(72px)}:host(cds-side-nav-item) .cds--side-nav__link:hover,:host(cds-side-nav-menu) .cds--side-nav__submenu:hover,:host(cds-side-nav-menu-item) .cds--side-nav__link:hover{background-color:var(--cds-background-hover,rgba(141,141,141,.12));color:var(--cds-text-primary,#161616)}',
+  '.cds--side-nav{position:fixed;z-index:8000;top:0;bottom:0;right:0;overflow:hidden;width:3rem;max-width:16rem;background-color:var(--cds-background,#fff);color:var(--cds-text-secondary,#525252);transition:width .11s cubic-bezier(.2,0,1,.9);will-change:width}.cds--side-nav--ux{top:3rem;width:16rem}@media (max-width:65.98rem){.cds--side-nav--ux{width:0}}.cds--side-nav--rail{width:3rem}.cds--side-nav--hidden{width:0}.cds--side-nav--expanded,.cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover{width:16rem}.cds--side-nav__overlay{position:fixed;top:3rem;right:0;width:0;height:0;background-color:transparent;opacity:0;transition:opacity .3s cubic-bezier(.5,0,.1,1),background-color .3s cubic-bezier(.5,0,.1,1)}@media (max-width:65.98rem){.cds--side-nav__overlay-active{z-index:6000;width:100vw;height:100vh;background-color:var(--cds-overlay,rgba(22,22,22,.5));opacity:1;transition:opacity .3s cubic-bezier(.5,0,.1,1),background-color .3s cubic-bezier(.5,0,.1,1)}}.cds--header~.cds--side-nav{top:3rem;height:calc(100% - 48px)}.cds--side-nav--fixed{width:16rem}.cds--side-nav--collapsed{width:16rem;transform:translateX(16rem)}.cds--side-nav__navigation{display:flex;flex-direction:column}.cds--side-nav__items,:host(cds-side-nav-items){overflow:hidden;flex:1 1 0%;padding:1rem 0 0}.cds--side-nav--expanded .cds--side-nav__items,.cds--side-nav--expanded :host(cds-side-nav-items),.cds--side-nav--fixed .cds--side-nav__items,.cds--side-nav--fixed :host(cds-side-nav-items),.cds--side-nav:hover .cds--side-nav__items,.cds--side-nav:hover :host(cds-side-nav-items){overflow-y:auto}.cds--side-nav--ux .cds--side-nav__items,.cds--side-nav--ux :host(cds-side-nav-items){overflow-y:auto}.cds--side-nav__item,:host(cds-side-nav-link),:host(cds-side-nav-menu){overflow:hidden;width:auto;height:auto}.cds--side-nav--ux .cds--side-nav__item,.cds--side-nav--ux :host(cds-side-nav-link),.cds--side-nav--ux :host(cds-side-nav-menu){width:auto;height:auto}.cds--side-nav .cds--header__menu-title[aria-expanded=true]:hover,.cds--side-nav a.cds--header__menu-item:hover,.cds--side-nav__item:not(.cds--side-nav__item--active):hover .cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__submenu:hover,.cds--side-nav__item:not(.cds--side-nav__item--active):hover :host(cds-side-nav-link:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover,.cds--side-nav__item:not(.cds--side-nav__item--active):hover :host(cds-side-nav-menu:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover,.cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__link:hover,.cds--side-nav__menu a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current=page]):hover,:host(cds-side-nav-link:not(.cds--side-nav__item--active))>.cds--side-nav__link:hover,:host(cds-side-nav-link:not(.cds--side-nav__item--active):hover) .cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__submenu:hover,:host(cds-side-nav-link:not(.cds--side-nav__item--active):hover) :host(cds-side-nav-link:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover,:host(cds-side-nav-link:not(.cds--side-nav__item--active):hover) :host(cds-side-nav-menu:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover,:host(cds-side-nav-menu:not(.cds--side-nav__item--active))>.cds--side-nav__link:hover,:host(cds-side-nav-menu:not(.cds--side-nav__item--active):hover) .cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__submenu:hover,:host(cds-side-nav-menu:not(.cds--side-nav__item--active):hover) :host(cds-side-nav-link:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover,:host(cds-side-nav-menu:not(.cds--side-nav__item--active):hover) :host(cds-side-nav-menu:not(.cds--side-nav__item--active))>.cds--side-nav__submenu:hover{background-color:var(--cds-background-hover,rgba(141,141,141,.12));color:var(--cds-text-primary,#161616)}.cds--side-nav__item:not(.cds--side-nav__item--active) .cds--side-nav__menu-item>.cds--side-nav__link:hover>span,.cds--side-nav__item:not(.cds--side-nav__item--active) :host(cds-side-nav-menu-item)>.cds--side-nav__link:hover>span,.cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__link:hover>span,:host(cds-side-nav-link:not(.cds--side-nav__item--active)) .cds--side-nav__menu-item>.cds--side-nav__link:hover>span,:host(cds-side-nav-link:not(.cds--side-nav__item--active)) :host(cds-side-nav-menu-item)>.cds--side-nav__link:hover>span,:host(cds-side-nav-link:not(.cds--side-nav__item--active))>.cds--side-nav__link:hover>span,:host(cds-side-nav-menu:not(.cds--side-nav__item--active)) .cds--side-nav__menu-item>.cds--side-nav__link:hover>span,:host(cds-side-nav-menu:not(.cds--side-nav__item--active)) :host(cds-side-nav-menu-item)>.cds--side-nav__link:hover>span,:host(cds-side-nav-menu:not(.cds--side-nav__item--active))>.cds--side-nav__link:hover>span{color:var(--cds-text-primary,#161616)}.cds--side-nav__item--large,:host(cds-side-nav-link[large]),:host(cds-side-nav-menu[large]){height:3rem}.cds--side-nav__divider,:host(cds-side-nav-divider){height:1px;margin:.5rem 1rem;background-color:var(--cds-border-subtle)}.cds--side-nav__submenu{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);line-height:var(--cds-heading-compact-01-line-height,1.28572);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);outline:2px solid transparent;outline-offset:-2px;display:flex;height:2rem;align-items:center;padding:0 1rem;color:var(--cds-text-secondary,#525252);transition:color 110ms,background-color 110ms,outline 110ms;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--side-nav__submenu *,.cds--side-nav__submenu ::after,.cds--side-nav__submenu ::before{box-sizing:inherit}.cds--side-nav__submenu::-moz-focus-inner{border:0}.cds--side-nav__submenu:hover{background-color:var(--cds-background-hover,rgba(141,141,141,.12));color:var(--cds-text-primary,#161616)}.cds--side-nav__submenu:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--side-nav__submenu:focus{outline-style:dotted}}.cds--side-nav__submenu-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.cds--side-nav__icon.cds--side-nav__submenu-chevron{display:flex;flex:1;justify-content:flex-end}.cds--side-nav__submenu-chevron>svg{width:1rem;height:1rem;transition:transform 110ms}.cds--side-nav__submenu[aria-expanded=true] .cds--side-nav__submenu-chevron>svg{transform:rotate(-180deg)}.cds--side-nav__item--large .cds--side-nav__submenu,:host(cds-side-nav-link[large]) .cds--side-nav__submenu,:host(cds-side-nav-menu[large]) .cds--side-nav__submenu{height:3rem}.cds--side-nav__item--active .cds--side-nav__submenu:hover,:host(cds-side-nav-menu[active]) .cds--side-nav__submenu:hover{background-color:var(--cds-background-selected,rgba(141,141,141,.2));color:var(--cds-text-primary,#161616)}.cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false],:host(cds-side-nav-menu[active]) .cds--side-nav__submenu[aria-expanded=false]{position:relative;background-color:var(--cds-background-selected,rgba(141,141,141,.2));color:var(--cds-text-primary,#161616)}.cds--side-nav__item--active .cds--side-nav__submenu[aria-expanded=false]::before,:host(cds-side-nav-menu[active]) .cds--side-nav__submenu[aria-expanded=false]::before{position:absolute;top:0;bottom:0;right:0;width:3px;background-color:var(--cds-border-interactive,#0f62fe);content:""}.cds--side-nav__item--active .cds--side-nav__submenu-title,:host(cds-side-nav-menu[active]) .cds--side-nav__submenu-title{color:var(--cds-text-primary,#161616);font-weight:600}.cds--side-nav__item--active .cds--side-nav__icon>svg,:host(cds-side-nav-menu[active]) .cds--side-nav__icon>svg{fill:var(--cds-icon-primary,#161616)}.cds--side-nav__menu{display:block;max-height:0;visibility:hidden}.cds--side-nav__submenu[aria-expanded=true]+.cds--side-nav__menu{max-height:93.75rem;visibility:inherit}.cds--side-nav__menu a.cds--side-nav__link{height:2rem;min-height:2rem;padding-right:2rem;font-weight:400}.cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link,:host(:host(cds-side-nav-menu[has-icon]cds-side-nav-menu)) a.cds--side-nav__link,:host(cds-side-nav-link.cds--side-nav__item--icon) a.cds--side-nav__link,:host(cds-side-nav-menu.cds--side-nav__item--icon) a.cds--side-nav__link{padding-right:4.5rem}.cds--side-nav__menu a.cds--side-nav__link--current,.cds--side-nav__menu a.cds--side-nav__link[aria-current=page],a.cds--side-nav__link--current{background-color:var(--cds-background-selected,rgba(141,141,141,.2))}.cds--side-nav__menu a.cds--side-nav__link--current>span,.cds--side-nav__menu a.cds--side-nav__link[aria-current=page]>span,a.cds--side-nav__link--current>span{color:var(--cds-text-primary,#161616);font-weight:600}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu,.cds--side-nav a.cds--header__menu-item,a.cds--side-nav__link{outline:2px solid transparent;outline-offset:-2px;font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);line-height:var(--cds-heading-compact-01-line-height,1.28572);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);position:relative;display:flex;min-height:2rem;align-items:center;padding:0 1rem;text-decoration:none;transition:color 110ms,background-color 110ms,outline 110ms}.cds--side-nav__item--large a.cds--side-nav__link,:host(cds-side-nav-link[large]) a.cds--side-nav__link,:host(cds-side-nav-menu[large]) a.cds--side-nav__link{height:3rem}.cds--side-nav a.cds--header__menu-item .cds--text-truncate-end,a.cds--side-nav__link>.cds--side-nav__link-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cds-text-secondary,#525252);font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--side-nav a.cds--header__menu-item:focus,a.cds--side-nav__link:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--side-nav a.cds--header__menu-item:focus,a.cds--side-nav__link:focus{outline-style:dotted}}a.cds--side-nav__link--current,a.cds--side-nav__link[aria-current=page]{background-color:var(--cds-background-selected,rgba(141,141,141,.2));font-weight:600}a.cds--side-nav__link--current .cds--side-nav__link-text,a.cds--side-nav__link[aria-current=page] .cds--side-nav__link-text{color:var(--cds-text-primary,#161616)}a.cds--side-nav__link--current::before,a.cds--side-nav__link[aria-current=page]::before{position:absolute;top:0;bottom:0;right:0;width:3px;background-color:var(--cds-border-interactive,#0f62fe);content:""}.cds--side-nav__icon{display:flex;flex:0 0 1rem;align-items:center;justify-content:center}.cds--side-nav__icon:not(.cds--side-nav__submenu-chevron){margin-left:1.5rem}.cds--side-nav__icon>svg{width:1rem;height:1rem;fill:var(--cds-icon-secondary,#525252)}.cds--side-nav__icon>svg.cds--side-nav-collapse-icon{display:none}.cds--side-nav--expanded .cds--side-nav__icon>svg.cds--side-nav-expand-icon{display:none}.cds--side-nav--expanded .cds--side-nav__icon>svg.cds--side-nav-collapse-icon{display:block}.cds--side-nav--fixed .cds--side-nav__submenu,.cds--side-nav--fixed a.cds--side-nav__link{padding-right:1rem}.cds--side-nav--fixed .cds--side-nav__item:not(.cds--side-nav__item--icon) .cds--side-nav__menu a.cds--side-nav__link,.cds--side-nav--fixed :host(cds-side-nav-link:not(.cds--side-nav__item--icon)) .cds--side-nav__menu a.cds--side-nav__link,.cds--side-nav--fixed :host(cds-side-nav-menu:not(.cds--side-nav__item--icon)) .cds--side-nav__menu a.cds--side-nav__link{padding-right:2rem}@media (max-width:65.98rem){.cds--side-nav .cds--header__nav{display:block}}.cds--side-nav__header-navigation,:host(cds-header-side-nav-items){display:none}@media (max-width:65.98rem){.cds--side-nav__header-navigation,:host(cds-header-side-nav-items){position:relative;display:block;margin-bottom:2rem}}.cds--side-nav__header-divider::after,:host(cds-header-side-nav-items[has-divider])::after{position:absolute;bottom:-1rem;right:1rem;width:calc(100% - 32px);height:.0625rem;background:var(--cds-border-subtle);content:""}.cds--side-nav a.cds--header__menu-item{justify-content:space-between;color:var(--cds-text-secondary,#525252);white-space:nowrap}.cds--side-nav a.cds--header__menu-item[aria-expanded=true]{background-color:transparent}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu{bottom:inherit;width:100%;padding:0;background-color:transparent;box-shadow:none;transform:none}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu li{width:100%}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu a.cds--header__menu-item{padding-right:4.25rem;font-weight:400}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu a.cds--header__menu-item:hover{background-color:var(--cds-background-hover,rgba(141,141,141,.12));color:var(--cds-text-primary,#161616)}.cds--side-nav .cds--header__menu a.cds--header__menu-item{height:inherit}.cds--side-nav .cds--header__menu-arrow,.cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,.cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow{fill:var(--cds-icon-secondary,#525252)}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--side-nav .cds--header__menu-arrow,.cds--side-nav a.cds--header__menu-item:focus .cds--header__menu-arrow,.cds--side-nav a.cds--header__menu-item:hover .cds--header__menu-arrow,.cds--side-nav__icon>svg{fill:ButtonText}}:host(cds-side-nav[expanded]) ::slotted(cds-side-nav-items){overflow-y:auto}:host(cds-side-nav-link){display:block;outline:0;width:auto;height:auto}:host(cds-side-nav-link) .cds--side-nav__icon{color:var(--cds-text-primary,#161616)}:host(cds-side-nav-link) .cds--side-nav__icon[hidden]{display:none}:host(cds-side-nav-divider){display:block}:host(cds-side-nav-menu){display:block}:host(cds-side-nav-menu) .cds--side-nav__icon[hidden]{display:none}:host(cds-side-nav-menu) .cds--side-nav__menu{margin:0;padding:0}:host(cds-side-nav-menu[active]){color:var(--cds-text-primary,#161616);position:relative}:host(cds-side-nav-menu[active])::before{content:"";position:absolute;top:0;bottom:0;right:0;width:4px;background-color:var(--cds-border-interactive,#0f62fe)}:host(cds-side-nav-menu[active][expanded]){background-color:inherit;color:inherit;position:inherit}:host(cds-side-nav-menu[active][expanded])::before{content:none}:host(cds-side-nav-menu-item){display:block;outline:0;width:auto;height:auto}:host(cds-side-nav-menu-item) a.cds--side-nav__link{height:2rem;min-height:2rem;padding-right:2rem;font-weight:400}:host(cds-side-nav-menu-item[parent-has-icon]) a.cds--side-nav__link{padding-right:4.5rem}:host(cds-side-nav-item) .cds--side-nav__link:hover,:host(cds-side-nav-menu) .cds--side-nav__submenu:hover,:host(cds-side-nav-menu-item) .cds--side-nav__link:hover{background-color:var(--cds-background-hover,rgba(141,141,141,.12));color:var(--cds-text-primary,#161616)}',
 ]);

package/es/components/ui-shell/switcher-divider.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+/**
+ * A divider in switcher.
+ *
+ * @element cds-switcher-divider
+ */
+declare class CDSSwitcherDivider extends LitElement {
+    connectedCallback(): void;
+    static styles: any;
+}
+export default CDSSwitcherDivider;
+
+//# sourceMappingURL=switcher-divider.d.ts.map

package/es/components/ui-shell/switcher-divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/ui-shell/switcher-divider.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC;;;;GAIG;AACH,cACM,kBAAmB,SAAQ,UAAU;IACzC,iBAAiB;IAOjB,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,kBAAkB,CAAC","file":"switcher-divider.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './header.scss';\n\n/**\n * A divider in switcher.\n *\n * @element cds-switcher-divider\n */\n@customElement(`${prefix}-switcher-divider`)\nclass CDSSwitcherDivider extends LitElement {\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'separator');\n    }\n    super.connectedCallback();\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSSwitcherDivider;\n"]}

package/es/components/ui-shell/switcher-divider.js

@@ -0,0 +1,56 @@
+import _decorate from "@babel/runtime/helpers/esm/decorate";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from "././header.css.js";
+
+/**
+ * A divider in switcher.
+ *
+ * @element cds-switcher-divider
+ */ /**
+     * A divider in switcher.
+     *
+     * @element cds-switcher-divider
+     */
+let CDSSwitcherDivider = _decorate([customElement(`${prefix}-switcher-divider`)], function (_initialize, _LitElement) {
+  class CDSSwitcherDivider extends _LitElement {
+    constructor(...args) {
+      super(...args);
+      _initialize(this);
+    }
+  }
+  return {
+    F: CDSSwitcherDivider,
+    d: [{
+      kind: "method",
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        if (!this.hasAttribute('role')) {
+          this.setAttribute('role', 'separator');
+        }
+        _get(_getPrototypeOf(CDSSwitcherDivider.prototype), "connectedCallback", this).call(this);
+      }
+    }, {
+      kind: "field",
+      static: true,
+      key: "styles",
+      value() {
+        return styles;
+      }
+    }]
+  };
+}, LitElement);
+export default CDSSwitcherDivider;
+//# sourceMappingURL=switcher-divider.js.map

package/es/components/ui-shell/switcher-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switcher-divider.js","names":["LitElement","customElement","prefix","styles","CDSSwitcherDivider","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","key","value","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","static"],"sources":["components/ui-shell/switcher-divider.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './header.scss';\n\n/**\n * A divider in switcher.\n *\n * @element cds-switcher-divider\n */\n@customElement(`${prefix}-switcher-divider`)\nclass CDSSwitcherDivider extends LitElement {\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'separator');\n    }\n    super.connectedCallback();\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSSwitcherDivider;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,KAAK;AAChC,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,MAAM,MAAM,mBAAe;;AAElC;AACA;AACA;AACA;AACA,GAJA;AACA;AACA;AACA;AACA;AAJA,IAMMC,kBAAkB,GAAAC,SAAA,EADvBJ,aAAa,CAAE,GAAEC,MAAO,mBAAkB,CAAC,aAAAI,WAAA,EAAAC,WAAA;EAA5C,MACMH,kBAAkB,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAS5C;EAAC;IAAAI,CAAA,EATKN,kBAAkB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,GAAA;MAAAC,KAAA,EACtB,SAAAC,kBAAA,EAAoB;QAClB,IAAI,CAAC,IAAI,CAACC,YAAY,CAAC,MAAM,CAAC,EAAE;UAC9B,IAAI,CAACC,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC;QACxC;QACAC,IAAA,CAAAC,eAAA,CALEf,kBAAkB,CAAAgB,SAAA,8BAAAC,IAAA;MAMtB;IAAC;MAAAT,IAAA;MAAAU,MAAA;MAAAT,GAAA;MAAAC,MAAA;QAAA,OAEeX,MAAM;MAAA;IAAA;EAAA;AAAA,GARSH,UAAU;AAW3C,eAAeI,kBAAkB"}

package/es/components/{pagination/page-sizes-select.d.ts → ui-shell/switcher-item.d.ts}

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
-declare const BXPageSizesSelect_base: {
+declare const CDSSwitcherItem_base: {
     new (...args: any[]): {
         focus(): void;
         accessKey: string;
@@ -314,37 +314,33 @@ declare const BXPageSizesSelect_base: {
     };
 } & typeof LitElement;
 /**
- * The select box for page sizes.
+ * Switcher menu item.
  *
- * @element cds-page-sizes-select
- * @slot label-text - The label text.
- * @fires cds-page-sizes-select-changed - The custom event fired after the page size is changed.
+ * @element cds-switcher-item
  */
-declare class BXPageSizesSelect extends BXPageSizesSelect_base {
-    private _selectNode;
+declare class CDSSwitcherItem extends CDSSwitcherItem_base {
     /**
-     * Handles `change` event on the `<select>` to select page size.
+     * Required props for accessibility label
      */
-    private _handleChange;
+    ariaLabel: any;
     /**
-     * Handles `slotchange` event for the `<slot>` for `<options>`.
-     *
-     * @param event The event.
+     * Props for accessibility labelled by
      */
-    private _handleSlotChange;
+    ariaLabelledBy: any;
     /**
-     * The label text.
+     * Link `href`.
      */
-    labelText: string;
+    href: string;
     /**
-     * The value, working as the current page size.
+     * Specify if this is a large variation of the side nav link
      */
-    value: number;
-    render(): import("lit-html").TemplateResult<1>;
+    selected: boolean;
     /**
-     * The name of the custom event fired after the page size is changed.
+     * Specify if this is a large variation of the side nav link
      */
-    static get eventChange(): string;
+    tabIndex: number;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -352,6 +348,6 @@ declare class BXPageSizesSelect extends BXPageSizesSelect_base {
     };
     static styles: any;
 }
-export default BXPageSizesSelect;
+export default CDSSwitcherItem;
 
-//# sourceMappingURL=page-sizes-select.d.ts.map
+//# sourceMappingURL=switcher-item.d.ts.map

package/es/components/ui-shell/switcher-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/ui-shell/switcher-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMvC;;;;GAIG;AACH,cACM,eAAgB,SAAQ,oBAAsB;IAClD;;OAEG;IAEH,SAAS,MAAC;IAEV;;OAEG;IAEH,cAAc,MAAC;IAEf;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,SAAK;IAEb,iBAAiB;IAOjB,MAAM;IAqBN,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,eAAe,CAAC","file":"switcher-item.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss';\n\n/**\n * Switcher menu item.\n *\n * @element cds-switcher-item\n */\n@customElement(`${prefix}-switcher-item`)\nclass CDSSwitcherItem extends FocusMixin(LitElement) {\n  /**\n   * Required props for accessibility label\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  ariaLabel;\n\n  /**\n   * Props for accessibility labelled by\n   */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledBy;\n\n  /**\n   * Link `href`.\n   */\n  @property()\n  href = '';\n\n  /**\n   * Specify if this is a large variation of the side nav link\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Specify if this is a large variation of the side nav link\n   */\n  @property({ type: Number, reflect: true, attribute: 'tab-index' })\n  tabIndex = 0;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const { href, selected, ariaLabel, ariaLabelledBy, tabIndex } = this;\n\n    const classes = classMap({\n      [`${prefix}--switcher__item-link`]: true,\n      [`${prefix}--switcher__item-link--selected`]: selected,\n    });\n\n    return html`\n      <a\n        part=\"link\"\n        aria-label=\"${ariaLabel}\"\n        aria-labelledby=\"${ariaLabelledBy}\"\n        tabindex=\"${tabIndex}\"\n        class=\"${classes}\"\n        href=\"${href}\">\n        <slot></slot>\n      </a>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSSwitcherItem;\n"]}