npm - @carbon/web-components - Versions diffs - 2.0.0-beta.3 → 2.0.0-beta.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (615) hide show

package/es/components/ui-shell/side-nav-menu.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ui-shell/side-nav-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQvC;;;;;;;;;;;GAWG;AACH,cACM,~~aAAc~~,SAAQ,~~kBAAsB~~;~~IAChD~~;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IAEH,OAAO,CAAC,uBAAuB,CAAkB;IAEjD;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAiBlC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAYzB;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAUlC;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,cAAc,UAAS;IAEvB;;OAEG;IAEH,KAAK,SAAM;IAEX,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,KAAA;IAUzB,MAAM;IAyCN;;OAEG;IACH,MAAM,CAAC,iBAAiB,SAAqB;IAE7C;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,~~aAAa~~,CAAC","file":"side-nav-menu.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 { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport ChevronDown20 from '@carbon/icons/lib/chevron--down/20';\nimport { prefix } from '../../globals/settings';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './side-nav.scss';\n\n/\n Side nav menu.\n \n @element cds-side-nav-menu\n * @slot title-icon - The icon.\n * @csspart expando The expando.\n * @csspart expando-icon-container The expando icon container.\n * @csspart expando-icon The expando icon.\n * @csspart title The title.\n * @csspart title-icon-container The title icon container.\n * @csspart menu-body The menu body.\n /\n@customElement(`${prefix}-side-nav-menu`)\nclass ~~BXSideNavMenu~~ extends FocusMixin(LitElement) {\n /\n `true` if this menu has an icon.\n /\n private _hasIcon = false;\n\n /\n The container for the title icon.\n /\n @query('#title-icon-container')\n private _titleIconContainerNode!: HTMLDivElement;\n\n /\n Handles user-initiated toggle request of this side nav menu.\n \n @param expanded The new expanded state.\n /\n private _handleUserInitiatedToggle(expanded = !this.expanded) {\n const { eventBeforeToggle, eventToggle } = this\n .constructor as typeof ~~BXSideNavMenu~~;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n expanded,\n },\n };\n if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {\n this.expanded = expanded;\n this.dispatchEvent(new CustomEvent(eventToggle, init));\n }\n }\n\n /\n Handler for the `click` event on the expando button.\n /\n private _handleClickExpando() {\n this._handleUserInitiatedToggle();\n }\n\n /\n Handles `slotchange` event on the non-named `<slot>`.\n /\n private _handleSlotChange({ target }) {\n const { _hasIcon: hasIcon } = this;\n forEach(target.assignedNodes(), (item) => {\n if (item.nodeType === Node.ELEMENT_NODE) {\n item.toggleAttribute(\n (this.constructor as typeof ~~BXSideNavMenu~~).attribItemHasIcon,\n hasIcon\n );\n }\n });\n }\n\n /\n Handles `slotchange` event on the `<slot>` for the title icon.\n /\n private _handleSlotChangeTitleIcon({ target }) {\n const constructor = this.constructor as typeof ~~BXSideNavMenu~~;\n const hasIcon = target.assignedNodes().length > 0;\n this._hasIcon = hasIcon;\n this._titleIconContainerNode?.toggleAttribute('hidden', !hasIcon);\n forEach(this.querySelectorAll(constructor.selectorItem), (item) => {\n item.toggleAttribute(constructor.attribItemHasIcon, hasIcon);\n });\n }\n\n /\n `true` if the menu has active menu item.\n /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /\n `true` if the menu should be open.\n /\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /\n `true` if the menu should be forced collapsed upon side nav's expanded state.\n /\n @property({ type: Boolean, reflect: true, attribute: 'force-collapsed' })\n forceCollapsed = false;\n\n /\n The title text.\n /\n @property()\n title = '';\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n super.connectedCallback();\n }\n\n updated(changedProperties) {\n if (changedProperties.has('expanded')) {\n const { selectorItem } = this.constructor as typeof ~~BXSideNavMenu~~;\n const { expanded } = this;\n forEach(this.querySelectorAll(selectorItem), (elem) => {\n (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n });\n }\n }\n\n render() {\n const {\n expanded,\n forceCollapsed,\n title,\n _handleClickExpando: handleClickExpando,\n _handleSlotChange: handleSlotChange,\n _handleSlotChangeTitleIcon: handleSlotChangeTitleIcon,\n } = this;\n return html`\n <button\n type=\"button\"\n part=\"expando\"\n aria-haspopup=\"true\"\n aria-expanded=\"${String(Boolean(expanded && !forceCollapsed))}\"\n class=\"${prefix}--side-nav__submenu\"\n @click=${handleClickExpando}>\n <div\n id=\"title-icon-container\"\n part=\"title-icon-container\"\n hidden\n class=\"${prefix}--side-nav__icon\">\n <slot\n name=\"title-icon\"\n @slotchange=${handleSlotChangeTitleIcon}></slot>\n </div>\n <span part=\"title\" class=\"${prefix}--side-nav__submenu-title\"\n >${title}</span\n >\n <div\n part=\"expando-icon-container\"\n class=\"${prefix}--side-nav__icon ${prefix}--side-nav__icon--small ${prefix}--side-nav__submenu-chevron\">\n ${ChevronDown20({ part: 'expando-icon' })}\n </div>\n </button>\n <ul part=\"menu-body\" class=\"${prefix}--side-nav__menu\">\n <slot @slotchange=${handleSlotChange}></slot>\n </ul>\n `;\n }\n\n /\n The attribute name of the menu items, that is set if this menu has an icon.\n /\n static attribItemHasIcon = 'parent-has-icon';\n\n /\n A selector that will return the menu items.\n /\n static get selectorItem() {\n return `${prefix}-side-nav-menu-item`;\n }\n\n /\n The name of the custom event fired before this side nav menu is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling this side nav menu.\n /\n static get eventBeforeToggle() {\n return `${prefix}-side-nav-menu-beingtoggled`;\n }\n\n /\n The name of the custom event fired after this side nav menu is toggled upon a user gesture.\n */\n static get eventToggle() {\n return `${prefix}-side-nav-menu-toggled`;\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 ~~BXSideNavMenu~~;\n"]}
1	+ {"version":3,"sources":["components/ui-shell/side-nav-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQvC;;;;;;;;;;;GAWG;AACH,cACM,cAAe,SAAQ,mBAAsB;IACjD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IAEH,OAAO,CAAC,uBAAuB,CAAkB;IAEjD;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAiBlC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAYzB;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAUlC;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,cAAc,UAAS;IAEvB;;OAEG;IAEH,KAAK,SAAM;IAEX,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,KAAA;IAUzB,MAAM;IAyCN;;OAEG;IACH,MAAM,CAAC,iBAAiB,SAAqB;IAE7C;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC","file":"side-nav-menu.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 { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport ChevronDown20 from '@carbon/icons/lib/chevron--down/20';\nimport { prefix } from '../../globals/settings';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './side-nav.scss';\n\n/\n Side nav menu.\n \n @element cds-side-nav-menu\n * @slot title-icon - The icon.\n * @csspart expando The expando.\n * @csspart expando-icon-container The expando icon container.\n * @csspart expando-icon The expando icon.\n * @csspart title The title.\n * @csspart title-icon-container The title icon container.\n * @csspart menu-body The menu body.\n /\n@customElement(`${prefix}-side-nav-menu`)\nclass CDSSideNavMenu extends FocusMixin(LitElement) {\n /\n `true` if this menu has an icon.\n /\n private _hasIcon = false;\n\n /\n The container for the title icon.\n /\n @query('#title-icon-container')\n private _titleIconContainerNode!: HTMLDivElement;\n\n /\n Handles user-initiated toggle request of this side nav menu.\n \n @param expanded The new expanded state.\n /\n private _handleUserInitiatedToggle(expanded = !this.expanded) {\n const { eventBeforeToggle, eventToggle } = this\n .constructor as typeof CDSSideNavMenu;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n expanded,\n },\n };\n if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {\n this.expanded = expanded;\n this.dispatchEvent(new CustomEvent(eventToggle, init));\n }\n }\n\n /\n Handler for the `click` event on the expando button.\n /\n private _handleClickExpando() {\n this._handleUserInitiatedToggle();\n }\n\n /\n Handles `slotchange` event on the non-named `<slot>`.\n /\n private _handleSlotChange({ target }) {\n const { _hasIcon: hasIcon } = this;\n forEach(target.assignedNodes(), (item) => {\n if (item.nodeType === Node.ELEMENT_NODE) {\n item.toggleAttribute(\n (this.constructor as typeof CDSSideNavMenu).attribItemHasIcon,\n hasIcon\n );\n }\n });\n }\n\n /\n Handles `slotchange` event on the `<slot>` for the title icon.\n /\n private _handleSlotChangeTitleIcon({ target }) {\n const constructor = this.constructor as typeof CDSSideNavMenu;\n const hasIcon = target.assignedNodes().length > 0;\n this._hasIcon = hasIcon;\n this._titleIconContainerNode?.toggleAttribute('hidden', !hasIcon);\n forEach(this.querySelectorAll(constructor.selectorItem), (item) => {\n item.toggleAttribute(constructor.attribItemHasIcon, hasIcon);\n });\n }\n\n /\n `true` if the menu has active menu item.\n /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /\n `true` if the menu should be open.\n /\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /\n Specify if this is a large variation of the side nav menu\n /\n @property({ type: Boolean, reflect: true })\n large = false;\n\n /\n `true` if the menu should be forced collapsed upon side nav's expanded state.\n /\n @property({ type: Boolean, reflect: true, attribute: 'force-collapsed' })\n forceCollapsed = false;\n\n /\n The title text.\n /\n @property()\n title = '';\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n super.connectedCallback();\n }\n\n updated(changedProperties) {\n if (changedProperties.has('expanded')) {\n const { selectorItem } = this.constructor as typeof CDSSideNavMenu;\n const { expanded } = this;\n forEach(this.querySelectorAll(selectorItem), (elem) => {\n (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n });\n }\n }\n\n render() {\n const {\n expanded,\n forceCollapsed,\n title,\n _handleClickExpando: handleClickExpando,\n _handleSlotChange: handleSlotChange,\n _handleSlotChangeTitleIcon: handleSlotChangeTitleIcon,\n } = this;\n return html`\n <button\n type=\"button\"\n part=\"expando\"\n aria-haspopup=\"true\"\n aria-expanded=\"${String(Boolean(expanded && !forceCollapsed))}\"\n class=\"${prefix}--side-nav__submenu\"\n @click=${handleClickExpando}>\n <div\n id=\"title-icon-container\"\n part=\"title-icon-container\"\n hidden\n class=\"${prefix}--side-nav__icon\">\n <slot\n name=\"title-icon\"\n @slotchange=${handleSlotChangeTitleIcon}></slot>\n </div>\n <span part=\"title\" class=\"${prefix}--side-nav__submenu-title\"\n >${title}</span\n >\n <div\n part=\"expando-icon-container\"\n class=\"${prefix}--side-nav__icon ${prefix}--side-nav__icon--small ${prefix}--side-nav__submenu-chevron\">\n ${ChevronDown20({ part: 'expando-icon' })}\n </div>\n </button>\n <ul part=\"menu-body\" class=\"${prefix}--side-nav__menu\">\n <slot @slotchange=${handleSlotChange}></slot>\n </ul>\n `;\n }\n\n /\n The attribute name of the menu items, that is set if this menu has an icon.\n /\n static attribItemHasIcon = 'parent-has-icon';\n\n /\n A selector that will return the menu items.\n /\n static get selectorItem() {\n return `${prefix}-side-nav-menu-item`;\n }\n\n /\n The name of the custom event fired before this side nav menu is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling this side nav menu.\n /\n static get eventBeforeToggle() {\n return `${prefix}-side-nav-menu-beingtoggled`;\n }\n\n /\n The name of the custom event fired after this side nav menu is toggled upon a user gesture.\n */\n static get eventToggle() {\n return `${prefix}-side-nav-menu-toggled`;\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 CDSSideNavMenu;\n"]}

package/es/components/ui-shell/side-nav-menu.js CHANGED Viewed

@@ -44,15 +44,15 @@ import styles from "././side-nav.css.js";
      * @csspart title-icon-container The title icon container.
      * @csspart menu-body The menu body.
      */
-let BXSideNavMenu = _decorate([customElement(`${prefix}-side-nav-menu`)], function (_initialize, _FocusMixin) {
-  class BXSideNavMenu extends _FocusMixin {
+let CDSSideNavMenu = _decorate([customElement(`${prefix}-side-nav-menu`)], function (_initialize, _FocusMixin) {
+  class CDSSideNavMenu extends _FocusMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXSideNavMenu,
+    F: CDSSideNavMenu,
     d: [{
       kind: "field",
       key: "_hasIcon",
@@ -171,6 +171,16 @@ let BXSideNavMenu = _decorate([customElement(`${prefix}-side-nav-menu`)], functi
       value() {
         return false;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "large",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -196,6 +206,9 @@ let BXSideNavMenu = _decorate([customElement(`${prefix}-side-nav-menu`)], functi
       /**
        * `true` if the menu should be open.
        */
+      /**
+       * Specify if this is a large variation of the side nav menu
+       */
       /**
        * `true` if the menu should be forced collapsed upon side nav's expanded state.
        */
@@ -206,7 +219,7 @@ let BXSideNavMenu = _decorate([customElement(`${prefix}-side-nav-menu`)], functi
         if (!this.hasAttribute('role')) {
           this.setAttribute('role', 'listitem');
         }
-        _get(_getPrototypeOf(BXSideNavMenu.prototype), "connectedCallback", this).call(this);
+        _get(_getPrototypeOf(CDSSideNavMenu.prototype), "connectedCallback", this).call(this);
       }
     }, {
       kind: "method",
@@ -333,5 +346,5 @@ let BXSideNavMenu = _decorate([customElement(`${prefix}-side-nav-menu`)], functi
     }]
   };
 }, FocusMixin(LitElement));
-export default BXSideNavMenu;
+export default CDSSideNavMenu;
 //# sourceMappingURL=side-nav-menu.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"side-nav-menu.js","names":["LitElement","html","property","customElement","query","ChevronDown20","prefix","forEach","FocusMixin","styles","BXSideNavMenu","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","decorators","_handleUserInitiatedToggle","expanded","eventBeforeToggle","eventToggle","init","bubbles","cancelable","composed","detail","dispatchEvent","CustomEvent","_handleClickExpando","_handleSlotChange","target","_hasIcon","hasIcon","assignedNodes","item","nodeType","Node","ELEMENT_NODE","toggleAttribute","attribItemHasIcon","_handleSlotChangeTitleIcon","_this$_titleIconConta","length","_titleIconContainerNode","querySelectorAll","selectorItem","type","Boolean","reflect","attribute","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","updated","changedProperties","has","elem","tabIndex","render","forceCollapsed","title","handleClickExpando","handleSlotChange","handleSlotChangeTitleIcon","_t","_","String","part","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/side-nav-menu.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, query } from 'lit/decorators.js';\nimport ChevronDown20 from '@carbon/icons/lib/chevron--down/20';\nimport { prefix } from '../../globals/settings';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './side-nav.scss';\n\n/\n Side nav menu.\n \n @element cds-side-nav-menu\n * @slot title-icon - The icon.\n * @csspart expando The expando.\n * @csspart expando-icon-container The expando icon container.\n * @csspart expando-icon The expando icon.\n * @csspart title The title.\n * @csspart title-icon-container The title icon container.\n * @csspart menu-body The menu body.\n /\n@customElement(`${prefix}-side-nav-menu`)\nclass BXSideNavMenu extends FocusMixin(LitElement) {\n /\n `true` if this menu has an icon.\n /\n private _hasIcon = false;\n\n /\n The container for the title icon.\n /\n @query('#title-icon-container')\n private _titleIconContainerNode!: HTMLDivElement;\n\n /\n Handles user-initiated toggle request of this side nav menu.\n \n @param expanded The new expanded state.\n /\n private _handleUserInitiatedToggle(expanded = !this.expanded) {\n const { eventBeforeToggle, eventToggle } = this\n .constructor as typeof BXSideNavMenu;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n expanded,\n },\n };\n if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {\n this.expanded = expanded;\n this.dispatchEvent(new CustomEvent(eventToggle, init));\n }\n }\n\n /\n Handler for the `click` event on the expando button.\n /\n private _handleClickExpando() {\n this._handleUserInitiatedToggle();\n }\n\n /\n Handles `slotchange` event on the non-named `<slot>`.\n /\n private _handleSlotChange({ target }) {\n const { _hasIcon: hasIcon } = this;\n forEach(target.assignedNodes(), (item) => {\n if (item.nodeType === Node.ELEMENT_NODE) {\n item.toggleAttribute(\n (this.constructor as typeof BXSideNavMenu).attribItemHasIcon,\n hasIcon\n );\n }\n });\n }\n\n /\n Handles `slotchange` event on the `<slot>` for the title icon.\n /\n private _handleSlotChangeTitleIcon({ target }) {\n const constructor = this.constructor as typeof BXSideNavMenu;\n const hasIcon = target.assignedNodes().length > 0;\n this._hasIcon = hasIcon;\n this._titleIconContainerNode?.toggleAttribute('hidden', !hasIcon);\n forEach(this.querySelectorAll(constructor.selectorItem), (item) => {\n item.toggleAttribute(constructor.attribItemHasIcon, hasIcon);\n });\n }\n\n /\n `true` if the menu has active menu item.\n /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /\n `true` if the menu should be open.\n /\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /\n `true` if the menu should be forced collapsed upon side nav's expanded state.\n /\n @property({ type: Boolean, reflect: true, attribute: 'force-collapsed' })\n forceCollapsed = false;\n\n /\n The title text.\n /\n @property()\n title = '';\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n super.connectedCallback();\n }\n\n updated(changedProperties) {\n if (changedProperties.has('expanded')) {\n const { selectorItem } = this.constructor as typeof BXSideNavMenu;\n const { expanded } = this;\n forEach(this.querySelectorAll(selectorItem), (elem) => {\n (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n });\n }\n }\n\n render() {\n const {\n expanded,\n forceCollapsed,\n title,\n _handleClickExpando: handleClickExpando,\n _handleSlotChange: handleSlotChange,\n _handleSlotChangeTitleIcon: handleSlotChangeTitleIcon,\n } = this;\n return html`\n <button\n type=\"button\"\n part=\"expando\"\n aria-haspopup=\"true\"\n aria-expanded=\"${String(Boolean(expanded && !forceCollapsed))}\"\n class=\"${prefix}--side-nav__submenu\"\n @click=${handleClickExpando}>\n <div\n id=\"title-icon-container\"\n part=\"title-icon-container\"\n hidden\n class=\"${prefix}--side-nav__icon\">\n <slot\n name=\"title-icon\"\n @slotchange=${handleSlotChangeTitleIcon}></slot>\n </div>\n <span part=\"title\" class=\"${prefix}--side-nav__submenu-title\"\n >${title}</span\n >\n <div\n part=\"expando-icon-container\"\n class=\"${prefix}--side-nav__icon ${prefix}--side-nav__icon--small ${prefix}--side-nav__submenu-chevron\">\n ${ChevronDown20({ part: 'expando-icon' })}\n </div>\n </button>\n <ul part=\"menu-body\" class=\"${prefix}--side-nav__menu\">\n <slot @slotchange=${handleSlotChange}></slot>\n </ul>\n `;\n }\n\n /\n The attribute name of the menu items, that is set if this menu has an icon.\n /\n static attribItemHasIcon = 'parent-has-icon';\n\n /\n A selector that will return the menu items.\n /\n static get selectorItem() {\n return `${prefix}-side-nav-menu-item`;\n }\n\n /\n The name of the custom event fired before this side nav menu is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling this side nav menu.\n /\n static get eventBeforeToggle() {\n return `${prefix}-side-nav-menu-beingtoggled`;\n }\n\n /\n The name of the custom event fired after this side nav menu is toggled upon a user gesture.\n */\n static get eventToggle() {\n return `${prefix}-side-nav-menu-toggled`;\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 BXSideNavMenu;\n"],"mappings":"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"}
1	+ {"version":3,"file":"side-nav-menu.js","names":["LitElement","html","property","customElement","query","ChevronDown20","prefix","forEach","FocusMixin","styles","CDSSideNavMenu","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","decorators","_handleUserInitiatedToggle","expanded","eventBeforeToggle","eventToggle","init","bubbles","cancelable","composed","detail","dispatchEvent","CustomEvent","_handleClickExpando","_handleSlotChange","target","_hasIcon","hasIcon","assignedNodes","item","nodeType","Node","ELEMENT_NODE","toggleAttribute","attribItemHasIcon","_handleSlotChangeTitleIcon","_this$_titleIconConta","length","_titleIconContainerNode","querySelectorAll","selectorItem","type","Boolean","reflect","attribute","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","updated","changedProperties","has","elem","tabIndex","render","forceCollapsed","title","handleClickExpando","handleSlotChange","handleSlotChangeTitleIcon","_t","_","String","part","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/side-nav-menu.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, query } from 'lit/decorators.js';\nimport ChevronDown20 from '@carbon/icons/lib/chevron--down/20';\nimport { prefix } from '../../globals/settings';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './side-nav.scss';\n\n/\n Side nav menu.\n \n @element cds-side-nav-menu\n * @slot title-icon - The icon.\n * @csspart expando The expando.\n * @csspart expando-icon-container The expando icon container.\n * @csspart expando-icon The expando icon.\n * @csspart title The title.\n * @csspart title-icon-container The title icon container.\n * @csspart menu-body The menu body.\n /\n@customElement(`${prefix}-side-nav-menu`)\nclass CDSSideNavMenu extends FocusMixin(LitElement) {\n /\n `true` if this menu has an icon.\n /\n private _hasIcon = false;\n\n /\n The container for the title icon.\n /\n @query('#title-icon-container')\n private _titleIconContainerNode!: HTMLDivElement;\n\n /\n Handles user-initiated toggle request of this side nav menu.\n \n @param expanded The new expanded state.\n /\n private _handleUserInitiatedToggle(expanded = !this.expanded) {\n const { eventBeforeToggle, eventToggle } = this\n .constructor as typeof CDSSideNavMenu;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n expanded,\n },\n };\n if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {\n this.expanded = expanded;\n this.dispatchEvent(new CustomEvent(eventToggle, init));\n }\n }\n\n /\n Handler for the `click` event on the expando button.\n /\n private _handleClickExpando() {\n this._handleUserInitiatedToggle();\n }\n\n /\n Handles `slotchange` event on the non-named `<slot>`.\n /\n private _handleSlotChange({ target }) {\n const { _hasIcon: hasIcon } = this;\n forEach(target.assignedNodes(), (item) => {\n if (item.nodeType === Node.ELEMENT_NODE) {\n item.toggleAttribute(\n (this.constructor as typeof CDSSideNavMenu).attribItemHasIcon,\n hasIcon\n );\n }\n });\n }\n\n /\n Handles `slotchange` event on the `<slot>` for the title icon.\n /\n private _handleSlotChangeTitleIcon({ target }) {\n const constructor = this.constructor as typeof CDSSideNavMenu;\n const hasIcon = target.assignedNodes().length > 0;\n this._hasIcon = hasIcon;\n this._titleIconContainerNode?.toggleAttribute('hidden', !hasIcon);\n forEach(this.querySelectorAll(constructor.selectorItem), (item) => {\n item.toggleAttribute(constructor.attribItemHasIcon, hasIcon);\n });\n }\n\n /\n `true` if the menu has active menu item.\n /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /\n `true` if the menu should be open.\n /\n @property({ type: Boolean, reflect: true })\n expanded = false;\n\n /\n Specify if this is a large variation of the side nav menu\n /\n @property({ type: Boolean, reflect: true })\n large = false;\n\n /\n `true` if the menu should be forced collapsed upon side nav's expanded state.\n /\n @property({ type: Boolean, reflect: true, attribute: 'force-collapsed' })\n forceCollapsed = false;\n\n /\n The title text.\n /\n @property()\n title = '';\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n super.connectedCallback();\n }\n\n updated(changedProperties) {\n if (changedProperties.has('expanded')) {\n const { selectorItem } = this.constructor as typeof CDSSideNavMenu;\n const { expanded } = this;\n forEach(this.querySelectorAll(selectorItem), (elem) => {\n (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n });\n }\n }\n\n render() {\n const {\n expanded,\n forceCollapsed,\n title,\n _handleClickExpando: handleClickExpando,\n _handleSlotChange: handleSlotChange,\n _handleSlotChangeTitleIcon: handleSlotChangeTitleIcon,\n } = this;\n return html`\n <button\n type=\"button\"\n part=\"expando\"\n aria-haspopup=\"true\"\n aria-expanded=\"${String(Boolean(expanded && !forceCollapsed))}\"\n class=\"${prefix}--side-nav__submenu\"\n @click=${handleClickExpando}>\n <div\n id=\"title-icon-container\"\n part=\"title-icon-container\"\n hidden\n class=\"${prefix}--side-nav__icon\">\n <slot\n name=\"title-icon\"\n @slotchange=${handleSlotChangeTitleIcon}></slot>\n </div>\n <span part=\"title\" class=\"${prefix}--side-nav__submenu-title\"\n >${title}</span\n >\n <div\n part=\"expando-icon-container\"\n class=\"${prefix}--side-nav__icon ${prefix}--side-nav__icon--small ${prefix}--side-nav__submenu-chevron\">\n ${ChevronDown20({ part: 'expando-icon' })}\n </div>\n </button>\n <ul part=\"menu-body\" class=\"${prefix}--side-nav__menu\">\n <slot @slotchange=${handleSlotChange}></slot>\n </ul>\n `;\n }\n\n /\n The attribute name of the menu items, that is set if this menu has an icon.\n /\n static attribItemHasIcon = 'parent-has-icon';\n\n /\n A selector that will return the menu items.\n /\n static get selectorItem() {\n return `${prefix}-side-nav-menu-item`;\n }\n\n /\n The name of the custom event fired before this side nav menu is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling this side nav menu.\n /\n static get eventBeforeToggle() {\n return `${prefix}-side-nav-menu-beingtoggled`;\n }\n\n /\n The name of the custom event fired after this side nav menu is toggled upon a user gesture.\n */\n static get eventToggle() {\n return `${prefix}-side-nav-menu-toggled`;\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 CDSSideNavMenu;\n"],"mappings":"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"}

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

@@ -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;left: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--rail:not(.cds--side-nav--fixed):hover:host(cds-side-nav),.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;left: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[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),:hover:host(cds-side-nav) .cds--side-nav__items,:hover:host(cds-side-nav) :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 :not(.cds--side-nav__item--active):host(cds-side-nav-link)>.cds--side-nav__submenu:hover,.cds--side-nav__item:not(.cds--side-nav__item--active):hover :not(.cds--side-nav__item--active):host(cds-side-nav-menu)>.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,:not(.cds--side-nav__item--active):host(cds-side-nav-link)>.cds--side-nav__link:hover,:not(.cds--side-nav__item--active):host(cds-side-nav-menu)>.cds--side-nav__link:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-link) .cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__submenu:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-link) :not(.cds--side-nav__item--active):host(cds-side-nav-link)>.cds--side-nav__submenu:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-link) :not(.cds--side-nav__item--active):host(cds-side-nav-menu)>.cds--side-nav__submenu:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-menu) .cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__submenu:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-menu) :not(.cds--side-nav__item--active):host(cds-side-nav-link)>.cds--side-nav__submenu:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-menu) :not(.cds--side-nav__item--active):host(cds-side-nav-menu)>.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,:not(.cds--side-nav__item--active):host(cds-side-nav-link) .cds--side-nav__menu-item>.cds--side-nav__link:hover>span,:not(.cds--side-nav__item--active):host(cds-side-nav-link) :host(cds-side-nav-menu-item)>.cds--side-nav__link:hover>span,:not(.cds--side-nav__item--active):host(cds-side-nav-link)>.cds--side-nav__link:hover>span,:not(.cds--side-nav__item--active):host(cds-side-nav-menu) .cds--side-nav__menu-item>.cds--side-nav__link:hover>span,:not(.cds--side-nav__item--active):host(cds-side-nav-menu) :host(cds-side-nav-menu-item)>.cds--side-nav__link:hover>span,:not(.cds--side-nav__item--active):host(cds-side-nav-menu)>.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:left}.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;left: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-left:2rem;font-weight:400}.cds--side-nav__item--icon:host(cds-side-nav-link) a.cds--side-nav__link,.cds--side-nav__item--icon:host(cds-side-nav-menu) a.cds--side-nav__link,.cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link,:host(cds-side-nav-menu):host(cds-side-nav-menu[has-icon]) a.cds--side-nav__link{padding-left: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;left: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-right: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-left: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 :not(.cds--side-nav__item--icon):host(cds-side-nav-link) .cds--side-nav__menu a.cds--side-nav__link,.cds--side-nav--fixed :not(.cds--side-nav__item--icon):host(cds-side-nav-menu) .cds--side-nav__menu a.cds--side-nav__link{padding-left: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;left: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-left: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;left: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-left:1rem;font-weight:400}:host(cds-side-nav-menu-item[parent-has-icon]) a.cds--side-nav__link{padding-left: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;left: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;left: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 :not(.cds--side-nav__item--active):host(cds-side-nav-link)>.cds--side-nav__submenu:hover,.cds--side-nav__item:not(.cds--side-nav__item--active):hover :not(.cds--side-nav__item--active):host(cds-side-nav-menu)>.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,:not(.cds--side-nav__item--active):host(cds-side-nav-link)>.cds--side-nav__link:hover,:not(.cds--side-nav__item--active):host(cds-side-nav-menu)>.cds--side-nav__link:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-link) .cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__submenu:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-link) :not(.cds--side-nav__item--active):host(cds-side-nav-link)>.cds--side-nav__submenu:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-link) :not(.cds--side-nav__item--active):host(cds-side-nav-menu)>.cds--side-nav__submenu:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-menu) .cds--side-nav__item:not(.cds--side-nav__item--active)>.cds--side-nav__submenu:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-menu) :not(.cds--side-nav__item--active):host(cds-side-nav-link)>.cds--side-nav__submenu:hover,:not(.cds--side-nav__item--active):hover:host(cds-side-nav-menu) :not(.cds--side-nav__item--active):host(cds-side-nav-menu)>.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,:not(.cds--side-nav__item--active):host(cds-side-nav-link) .cds--side-nav__menu-item>.cds--side-nav__link:hover>span,:not(.cds--side-nav__item--active):host(cds-side-nav-link) :host(cds-side-nav-menu-item)>.cds--side-nav__link:hover>span,:not(.cds--side-nav__item--active):host(cds-side-nav-link)>.cds--side-nav__link:hover>span,:not(.cds--side-nav__item--active):host(cds-side-nav-menu) .cds--side-nav__menu-item>.cds--side-nav__link:hover>span,:not(.cds--side-nav__item--active):host(cds-side-nav-menu) :host(cds-side-nav-menu-item)>.cds--side-nav__link:hover>span,:not(.cds--side-nav__item--active):host(cds-side-nav-menu)>.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:left}.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;left: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-left:2rem;font-weight:400}.cds--side-nav__item--icon:host(cds-side-nav-link) a.cds--side-nav__link,.cds--side-nav__item--icon:host(cds-side-nav-menu) a.cds--side-nav__link,.cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link,:host(cds-side-nav-menu):host(cds-side-nav-menu[has-icon]) a.cds--side-nav__link{padding-left: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;left: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-right: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-left: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 :not(.cds--side-nav__item--icon):host(cds-side-nav-link) .cds--side-nav__menu a.cds--side-nav__link,.cds--side-nav--fixed :not(.cds--side-nav__item--icon):host(cds-side-nav-menu) .cds--side-nav__menu a.cds--side-nav__link{padding-left: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,[has-divider]:host(cds-header-side-nav-items)::after{position:absolute;bottom:-1rem;left: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-left: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;left: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-left:2rem;font-weight:400}:host(cds-side-nav-menu-item[parent-has-icon]) a.cds--side-nav__link{padding-left: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/side-nav.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ import { LitElement } from 'lit';
 import Handle from '../../globals/internal/handle';
 import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';
 export { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };
-declare const BXSideNav_base: {
+declare const CDSSideNav_base: {
     new (...args: any[]): {
         _handles: Set<Handle>;
         connectedCallback(): void;
@@ -331,7 +331,7 @@ declare const BXSideNav_base: {
  *
  * @element cds-side-nav
  */
-declare class BXSideNav extends BXSideNav_base {
+declare class CDSSideNav extends CDSSideNav_base {
     /**
      * `true` if this side nav is hovered.
      */
@@ -360,14 +360,6 @@ declare class BXSideNav extends BXSideNav_base {
      * Force child side nav menus collapsed upon the hover/expanded state of this side nav.
      */
     private _updatedSideNavMenuForceCollapsedState;
-    /**
-     * Handles `mouseover` event handler.
-     */
-    private _handleMouseover;
-    /**
-     * Handles `mouseout` event handler.
-     */
-    private _handleMouseout;
     /**
      * Collapse mode of the side nav.
      */
@@ -377,18 +369,48 @@ declare class BXSideNav extends BXSideNav_base {
      */
     expanded: boolean;
     /**
-     * Usage mode of the side nav.
+     * If `true` will style the side nav to sit below the header
      */
-    usageMode: SIDE_NAV_USAGE_MODE;
+    isNotChildOfHeader: boolean;
+    /**
+     * Specify if the side-nav will be persistent above the lg breakpoint
+     */
+    isNotPersistent: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     shouldUpdate(changedProperties: any): boolean;
     updated(changedProperties: any): void;
+    /**
+     * Handles `blur` event handler on this element.
+     *
+     * @param event The event.
+     */
+    private _handleFocusOut;
+    /**
+     * Handles `focus` event handler on this element.
+     *
+     * @param event The event.
+     */
+    private _handleFocusIn;
+    /**
+     * Handles the `mouseover` event for the side nav in rail mode.
+     *
+     */
+    private _handleNavMouseOver;
+    /**
+     * Handles the `mouseout` event for the side nav in rail mode.
+     *
+     */
+    private _handleNavMouseOut;
     render(): import("lit-html").TemplateResult<1>;
     /**
      * A selector that will return the toggle buttons.
      */
     static get selectorButtonToggle(): string;
+    /**
+     * A selector that will return the header name + global action elements.
+     */
+    static get selectorHeaderItems(): string;
     /**
      * A selector that will return side nav focusable items.
      */
@@ -403,6 +425,6 @@ declare class BXSideNav extends BXSideNav_base {
     static get eventButtonToggle(): string;
     static styles: any;
 }
-export default BXSideNav;
+export default CDSSideNav;
 //# sourceMappingURL=side-nav.d.ts.map

package/es/components/ui-shell/side-nav.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ui-shell/side-nav.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAKrE,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEvD;;;;GAIG;AACH,cACM,SAAU,SAAQ,cAA6B;IACnD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,YAAY,CAAuB;IAE3C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,KAAK,2BAA2B,GAEtC;IAED;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;OAEG;IAGH,OAAO,CAAC,mBAAmB,CAazB;IAEF;;OAEG;IACH,OAAO,CAAC,sCAAsC;IAY9C;;OAEG;IAGH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IAGH,OAAO,CAAC,eAAe;IAKvB;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,sBAA+B;IAExC,iBAAiB;IAOjB,oBAAoB;IAKpB,YAAY,CAAC,iBAAiB,KAAA;IAa9B,OAAO,CAAC,iBAAiB,KAAA;IAkDzB,MAAM;IAIN;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC","file":"side-nav.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 { 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"]}
1	+ {"version":3,"sources":["components/ui-shell/side-nav.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAKrE,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEvD;;;;GAIG;AACH,cACM,UAAW,SAAQ,eAA6B;IACpD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,YAAY,CAAuB;IAE3C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IACH,OAAO,KAAK,2BAA2B,GAEtC;IAED;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;OAEG;IAGH,OAAO,CAAC,mBAAmB,CAazB;IAEF;;OAEG;IACH,OAAO,CAAC,sCAAsC;IAY9C;;OAEG;IAEH,YAAY,yBAAqC;IAEjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAKH,kBAAkB,UAAS;IAE3B;;OAEG;IAEH,eAAe,UAAS;IAExB,iBAAiB;IAOjB,oBAAoB;IAKpB,YAAY,CAAC,iBAAiB,KAAA;IAa9B,OAAO,CAAC,iBAAiB,KAAA;IAgDzB;;;;OAIG;IAGH,OAAO,CAAC,eAAe;IAMvB;;;;OAIG;IAGH,OAAO,CAAC,cAAc;IAItB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAS3B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAS1B,MAAM;IA8BN;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,UAAU,CAAC","file":"side-nav.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 { 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"]}