npm - @carbon/web-components - Versions diffs - 2.52.0 → 2.53.0 - Mend

@carbon/web-components 2.52.0 → 2.53.0

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 (1760) hide show

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

@@ -5,16 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import side_nav_default from "./side-nav.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 //#region src/components/ui-shell/side-nav-menu-item.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -53,12 +52,12 @@ let CDSSideNavMenuItem = class CDSSideNavMenuItem extends FocusMixin(LitElement)
       <a
         part="link"
         class="${classMap({
-			[`${prefix}--side-nav__link`]: true,
-			[`${prefix}--side-nav__link--current`]: active
+			[`cds--side-nav__link`]: true,
+			[`cds--side-nav__link--current`]: active
 		})}"
         href="${href}"
         target="${ifDefined(target)}">
-        <span part="title" class="${prefix}--side-nav__link-text">
+        <span part="title" class="${"cds"}--side-nav__link-text">
           <slot>${title}</slot>
         </span>
       </a>
@@ -68,7 +67,7 @@ let CDSSideNavMenuItem = class CDSSideNavMenuItem extends FocusMixin(LitElement)
 	* A selector that will return the parent menu.
 	*/
 	static get selectorMenu() {
-		return `${prefix}-side-nav-menu`;
+		return `cds-side-nav-menu`;
 	}
 	static {
 		this.shadowRootOptions = {
@@ -87,9 +86,9 @@ __decorate([property({
 __decorate([property()], CDSSideNavMenuItem.prototype, "href", void 0);
 __decorate([property({ reflect: true })], CDSSideNavMenuItem.prototype, "target", void 0);
 __decorate([property()], CDSSideNavMenuItem.prototype, "title", void 0);
-CDSSideNavMenuItem = __decorate([carbonElement(`${prefix}-side-nav-menu-item`)], CDSSideNavMenuItem);
+CDSSideNavMenuItem = __decorate([carbonElement(`cds-side-nav-menu-item`)], CDSSideNavMenuItem);
 var side_nav_menu_item_default = CDSSideNavMenuItem;
 //#endregion
 export { side_nav_menu_item_default as default };
 //# sourceMappingURL=side-nav-menu-item.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"side-nav-menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/side-nav-menu-item.ts"],"sourcesContent":["/*\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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport CDSSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Side nav menu item.\n \n @element cds-side-nav-menu-item\n * @csspart link The link.\n * @csspart title The title.\n /\n@customElement(`${prefix}-side-nav-menu-item`)\nclass CDSSideNavMenuItem extends FocusMixin(LitElement) {\n /\n `true` if the menu item should be active.\n /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /\n Link `href`.\n /\n @property()\n href = '';\n\n /\n Link `target`.\n /\n @property({ reflect: true })\n target!: string;\n\n /\n The title.\n /\n @property()\n title!: string;\n\n shouldUpdate(changedProperties) {\n if (changedProperties.has('active') && this.active) {\n const { selectorMenu } = this.constructor as typeof CDSSideNavMenuItem;\n const parent = this.closest(selectorMenu);\n if (parent) {\n (parent as CDSSideNavMenu).active = true;\n }\n }\n return true;\n }\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'button');\n }\n super.connectedCallback();\n }\n\n render() {\n const { active, href, target, title } = this;\n const classes = classMap({\n [`${prefix}--side-nav__link`]: true,\n [`${prefix}--side-nav__link--current`]: active,\n });\n return html`\n <a\n part=\"link\"\n class=\"${classes}\"\n href=\"${href}\"\n target=\"${ifDefined(target)}\">\n <span part=\"title\" class=\"${prefix}--side-nav__link-text\">\n <slot>${title}</slot>\n </span>\n </a>\n `;\n }\n\n /\n A selector that will return the parent menu.\n */\n static get selectorMenu() {\n return `${prefix}-side-nav-menu`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSSideNavMenuItem;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAwBA~~,+BACM~~,2BAA2B,WAAW,WAAW,CAAC;;;gBAK7C;cAMF;;CAcP,aAAa,mBAAmB;AAC9B,MAAI,kBAAkB,IAAI,SAAS,IAAI,KAAK,QAAQ;GAClD,MAAM,EAAE,iBAAiB,KAAK;GAC9B,MAAM,SAAS,KAAK,QAAQ,aAAa;AACzC,OAAI,~~OACF~~,~~CAAC~~,~~OAA0B,~~SAAS;;AAGxC,SAAO;;CAGT,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,SAAS;AAErC,QAAM,mBAAmB;;CAG3B,SAAS;EACP,MAAM,EAAE,QAAQ,MAAM,QAAQ,UAAU;AAKxC,SAAO,IAAI;;;iBAJK,SAAS;IACtB,~~GAAG,OAAO,oBAAoB~~;IAC9B,~~GAAG,OAAO,6BAA6B~~;GACzC,CAAC,CAImB;gBACT,KAAK;kBACH,UAAU,OAAO,CAAC;~~oCACA,OAAO~~;kBACzB,MAAM;;;;;;;;CAStB,WAAW,eAAe;AACxB,SAAO~~,GAAG,OAAO~~;;;~~2BAGQ~~;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YArEf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,UAAU;YAMV,SAAS,EAAE,SAAS,MAAM,CAAC;YAM3B,UAAU;iCAvBZC,cAAc,~~GAAG~~,~~OAAO~~,~~qBAAqB~~;AA6E9C,~~iCAAe~~"}
1	+ {"version":3,"file":"side-nav-menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/side-nav-menu-item.ts"],"sourcesContent":["/*\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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport CDSSideNavMenu from './side-nav-menu';\nimport styles from './side-nav.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Side nav menu item.\n \n @element cds-side-nav-menu-item\n * @csspart link The link.\n * @csspart title The title.\n /\n@customElement(`${prefix}-side-nav-menu-item`)\nclass CDSSideNavMenuItem extends FocusMixin(LitElement) {\n /\n `true` if the menu item should be active.\n /\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /\n Link `href`.\n /\n @property()\n href = '';\n\n /\n Link `target`.\n /\n @property({ reflect: true })\n target!: string;\n\n /\n The title.\n /\n @property()\n title!: string;\n\n shouldUpdate(changedProperties) {\n if (changedProperties.has('active') && this.active) {\n const { selectorMenu } = this.constructor as typeof CDSSideNavMenuItem;\n const parent = this.closest(selectorMenu);\n if (parent) {\n (parent as CDSSideNavMenu).active = true;\n }\n }\n return true;\n }\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'button');\n }\n super.connectedCallback();\n }\n\n render() {\n const { active, href, target, title } = this;\n const classes = classMap({\n [`${prefix}--side-nav__link`]: true,\n [`${prefix}--side-nav__link--current`]: active,\n });\n return html`\n <a\n part=\"link\"\n class=\"${classes}\"\n href=\"${href}\"\n target=\"${ifDefined(target)}\">\n <span part=\"title\" class=\"${prefix}--side-nav__link-text\">\n <slot>${title}</slot>\n </span>\n </a>\n `;\n }\n\n /\n A selector that will return the parent menu.\n */\n static get selectorMenu() {\n return `${prefix}-side-nav-menu`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSSideNavMenuItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAA,qBAAA,MACM,2BAA2B,WAAW,WAAW,CAAC;;;gBAK7C;cAMF;;CAcP,aAAa,mBAAmB;AAC9B,MAAI,kBAAkB,IAAI,SAAS,IAAI,KAAK,QAAQ;GAClD,MAAM,EAAE,iBAAiB,KAAK;GAC9B,MAAM,SAAS,KAAK,QAAQ,aAAa;AACzC,OAAI,OACD,QAA0B,SAAS;;AAGxC,SAAO;;CAGT,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,SAAS;AAErC,QAAM,mBAAmB;;CAG3B,SAAS;EACP,MAAM,EAAE,QAAQ,MAAM,QAAQ,UAAU;AAKxC,SAAO,IAAI;;;iBAJK,SAAS;IACtB,wBAA8B;IAC9B,iCAAuC;GACzC,CAAC,CAImB;gBACT,KAAK;kBACH,UAAU,OAAO,CAAC;0CACO;kBACzB,MAAM;;;;;;;;CAStB,WAAW,eAAe;AACxB,SAAO;;;2BAGkB;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YArEf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,UAAA,KAAA,EAAA;YAM1C,UAAU,CAAA,EAAA,mBAAA,WAAA,QAAA,KAAA,EAAA;YAMV,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,UAAA,KAAA,EAAA;YAM3B,UAAU,CAAA,EAAA,mBAAA,WAAA,SAAA,KAAA,EAAA;iCAvBZC,cAAc,yBAA+B,CAAA,EAAA,mBAAA;AA6E9C,IAAA,6BAAe"}

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

@@ -5,17 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { forEach } from "../../globals/internal/collection-helpers.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import side_nav_default from "./side-nav.scss.js";
 import { LitElement, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import ChevronDown20 from "@carbon/icons/es/chevron--down/20.js";
 //#region src/components/ui-shell/side-nav-menu.ts
 /**
 * Copyright IBM Corp. 2019, 2026
@@ -117,27 +116,27 @@ let CDSSideNavMenu = class CDSSideNavMenu extends FocusMixin(LitElement) {
         part="expando"
         aria-haspopup="true"
         aria-expanded="${String(expanded && !forceCollapsed)}"
-        class="${prefix}--side-nav__submenu"
+        class="${"cds"}--side-nav__submenu"
         @click=${handleClickExpando}>
         <div
           id="title-icon-container"
           part="title-icon-container"
           hidden
-          class="${prefix}--side-nav__icon">
+          class="${"cds"}--side-nav__icon">
           <slot
             name="title-icon"
             @slotchange=${handleSlotChangeTitleIcon}></slot>
         </div>
-        <span part="title" class="${prefix}--side-nav__submenu-title"
+        <span part="title" class="${"cds"}--side-nav__submenu-title"
           >${title}</span
         >
         <div
           part="expando-icon-container"
-          class="${prefix}--side-nav__icon ${prefix}--side-nav__icon--small ${prefix}--side-nav__submenu-chevron">
+          class="${"cds"}--side-nav__icon ${"cds"}--side-nav__icon--small ${"cds"}--side-nav__submenu-chevron">
           ${iconLoader(ChevronDown20, { part: "expando-icon" })}
         </div>
       </button>
-      <ul part="menu-body" class="${prefix}--side-nav__menu">
+      <ul part="menu-body" class="${"cds"}--side-nav__menu">
         <slot @slotchange=${handleSlotChange}></slot>
       </ul>
     `;
@@ -149,20 +148,20 @@ let CDSSideNavMenu = class CDSSideNavMenu extends FocusMixin(LitElement) {
 	* A selector that will return the menu items.
 	*/
 	static get selectorItem() {
-		return `${prefix}-side-nav-menu-item`;
+		return `cds-side-nav-menu-item`;
 	}
 	/**
 	* The name of the custom event fired before this side nav menu is being toggled upon a user gesture.
 	* Cancellation of this event stops the user-initiated action of toggling this side nav menu.
 	*/
 	static get eventBeforeToggle() {
-		return `${prefix}-side-nav-menu-beingtoggled`;
+		return `cds-side-nav-menu-beingtoggled`;
 	}
 	/**
 	* The name of the custom event fired after this side nav menu is toggled upon a user gesture.
 	*/
 	static get eventToggle() {
-		return `${prefix}-side-nav-menu-toggled`;
+		return `cds-side-nav-menu-toggled`;
 	}
 	static {
 		this.shadowRootOptions = {
@@ -193,9 +192,9 @@ __decorate([property({
 	attribute: "force-collapsed"
 })], CDSSideNavMenu.prototype, "forceCollapsed", void 0);
 __decorate([property()], CDSSideNavMenu.prototype, "title", void 0);
-CDSSideNavMenu = __decorate([carbonElement(`${prefix}-side-nav-menu`)], CDSSideNavMenu);
+CDSSideNavMenu = __decorate([carbonElement(`cds-side-nav-menu`)], CDSSideNavMenu);
 var side_nav_menu_default = CDSSideNavMenu;
 //#endregion
 export { side_nav_menu_default as default };
 //# 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":["styles","customElement"],"sources":["../../../src/components/ui-shell/side-nav-menu.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2026\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, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronDown20 from '@carbon/icons/es/chevron--down/20.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './side-nav.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Side nav menu.\n \n @element cds-side-nav-menu\n * @fires cds-side-nav-menu-beingtoggled\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 * @fires cds-side-nav-menu-toggled\n * The name of the custom event fired after this side nav menu is toggled upon a user gesture.\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(e: Event) {\n const target = e.currentTarget as HTMLButtonElement;\n target.focus();\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(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 ${iconLoader(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;\n}\n\nexport default CDSSideNavMenu;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAkCA,~~2BACM~~,uBAAuB,WAAW,WAAW,CAAC;;;kBAI/B;gBAuEV;kBAME;eAMH;wBAMS;eAMT;;;;;;;CAlFR,~~AAAQ~~,~~2BAA2B,~~WAAW,CAAC,KAAK,UAAU;EAC5D,MAAM,EAAE,mBAAmB,gBAAgB,KACxC;EACH,MAAM,OAAO;GACX,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ,EACN,UACD;GACF;AACD,MAAI,KAAK,cAAc,IAAI,YAAY,mBAAmB,KAAK,CAAC,EAAE;AAChE,QAAK,WAAW;AAChB,QAAK,cAAc,IAAI,YAAY,aAAa,KAAK,CAAC;;;;;;CAO1D,~~AAAQ~~,~~oBAAoB,~~GAAU;~~AAEpC~~,~~EADe~~,~~EAAE,~~cACV,OAAO;AACd,OAAK,4BAA4B;;;;;CAMnC,~~AAAQ~~,~~kBAAkB,~~EAAE,UAAU;EACpC,MAAM,EAAE,UAAU,YAAY;AAC9B,UAAQ,OAAO,eAAe,GAAG,SAAS;AACxC,OAAI,KAAK,aAAa,KAAK,aACzB,MAAK,gBACF,KAAK,YAAsC,mBAC5C,QACD;IAEH;;;;;CAMJ,~~AAAQ~~,~~2BAA2B,~~EAAE,UAAU;EAC7C,MAAM,cAAc,KAAK;EACzB,MAAM,UAAU,OAAO,eAAe,CAAC,SAAS;AAChD,OAAK,WAAW;AAChB,OAAK,yBAAyB,gBAAgB,UAAU,CAAC,QAAQ;AACjE,UAAQ,KAAK,iBAAiB,YAAY,aAAa,GAAG,SAAS;AACjE,QAAK,gBAAgB,YAAY,mBAAmB,QAAQ;IAC5D;;CAiCJ,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,WAAW;AAEvC,QAAM,mBAAmB;;CAG3B,QAAQ,mBAAmB;AACzB,MAAI,kBAAkB,IAAI,WAAW,EAAE;GACrC,MAAM,EAAE,iBAAiB,KAAK;GAC9B,MAAM,EAAE,aAAa;AACrB,WAAQ,KAAK,iBAAiB,aAAa,GAAG,SAAS;~~AACrD~~,~~IAAC~~,~~KAAqB,~~WAAW,WAAW,IAAI;KAChD;;;CAIN,SAAS;EACP,MAAM,EACJ,UACA,gBACA,OACA,qBAAqB,oBACrB,mBAAmB,kBACnB,4BAA4B,8BAC1B;AACJ,SAAO,IAAI;;;;;yBAKU,OAAO,YAAY,CAAC,eAAe,CAAC;~~iBAC5C,OAAO~~;iBACP,mBAAmB;;;;;~~mBAKjB,OAAO~~;;;0BAGA,0BAA0B;;~~oCAEhB,OAAO~~;aAC9B,MAAM;;;;~~mBAIA~~,~~OAAO~~,~~mBAAmB~~,~~OAAO~~,~~0BAA0B,OAAO~~;YACzE,WAAW,eAAe,EAAE,MAAM,gBAAgB,CAAC,CAAC;;;~~oCAG5B,OAAO~~;4BACf,iBAAiB;;;;;2BAQhB;;;;;CAK3B,WAAW,eAAe;AACxB,SAAO~~,GAAG,OAAO~~;;;;;;~~CAOnB~~,WAAW,oBAAoB;AAC7B,SAAO~~,GAAG,OAAO~~;;;;;~~CAMnB~~,WAAW,cAAc;AACvB,SAAO~~,GAAG,OAAO~~;;;~~2BAGQ~~;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YArLf,MAAM,wBAAwB;YAiE9B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAmB,CAAC;YAMxE,UAAU;6BAnGZC,cAAc,~~GAAG~~,~~OAAO~~,~~gBAAgB~~;AAkMzC,~~4BAAe~~"}
1	+ {"version":3,"file":"side-nav-menu.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/side-nav-menu.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2026\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, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport ChevronDown20 from '@carbon/icons/es/chevron--down/20.js';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './side-nav.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Side nav menu.\n \n @element cds-side-nav-menu\n * @fires cds-side-nav-menu-beingtoggled\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 * @fires cds-side-nav-menu-toggled\n * The name of the custom event fired after this side nav menu is toggled upon a user gesture.\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(e: Event) {\n const target = e.currentTarget as HTMLButtonElement;\n target.focus();\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(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 ${iconLoader(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;\n}\n\nexport default CDSSideNavMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAA,iBAAA,MACM,uBAAuB,WAAW,WAAW,CAAC;;;kBAI/B;gBAuEV;kBAME;eAMH;wBAMS;eAMT;;;;;;;CAlFR,2BAAmC,WAAW,CAAC,KAAK,UAAU;EAC5D,MAAM,EAAE,mBAAmB,gBAAgB,KACxC;EACH,MAAM,OAAO;GACX,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ,EACN,UACD;GACF;AACD,MAAI,KAAK,cAAc,IAAI,YAAY,mBAAmB,KAAK,CAAC,EAAE;AAChE,QAAK,WAAW;AAChB,QAAK,cAAc,IAAI,YAAY,aAAa,KAAK,CAAC;;;;;;CAO1D,oBAA4B,GAAU;AACrB,IAAE,cACV,OAAO;AACd,OAAK,4BAA4B;;;;;CAMnC,kBAA0B,EAAE,UAAU;EACpC,MAAM,EAAE,UAAU,YAAY;AAC9B,UAAQ,OAAO,eAAe,GAAG,SAAS;AACxC,OAAI,KAAK,aAAa,KAAK,aACzB,MAAK,gBACF,KAAK,YAAsC,mBAC5C,QACD;IAEH;;;;;CAMJ,2BAAmC,EAAE,UAAU;EAC7C,MAAM,cAAc,KAAK;EACzB,MAAM,UAAU,OAAO,eAAe,CAAC,SAAS;AAChD,OAAK,WAAW;AAChB,OAAK,yBAAyB,gBAAgB,UAAU,CAAC,QAAQ;AACjE,UAAQ,KAAK,iBAAiB,YAAY,aAAa,GAAG,SAAS;AACjE,QAAK,gBAAgB,YAAY,mBAAmB,QAAQ;IAC5D;;CAiCJ,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,WAAW;AAEvC,QAAM,mBAAmB;;CAG3B,QAAQ,mBAAmB;AACzB,MAAI,kBAAkB,IAAI,WAAW,EAAE;GACrC,MAAM,EAAE,iBAAiB,KAAK;GAC9B,MAAM,EAAE,aAAa;AACrB,WAAQ,KAAK,iBAAiB,aAAa,GAAG,SAAS;AACpD,SAAqB,WAAW,WAAW,IAAI;KAChD;;;CAIN,SAAS;EACP,MAAM,EACJ,UACA,gBACA,OACA,qBAAqB,oBACrB,mBAAmB,kBACnB,4BAA4B,8BAC1B;AACJ,SAAO,IAAI;;;;;yBAKU,OAAO,YAAY,CAAC,eAAe,CAAC;uBACrC;iBACP,mBAAmB;;;;;yBAKV;;;0BAGA,0BAA0B;;0CAET;aAC9B,MAAM;;;;yBAIO,mBAAA,MAA0B,0BAAA,MAAiC;YACzE,WAAW,eAAe,EAAE,MAAM,gBAAgB,CAAC,CAAC;;;0CAGrB;4BACf,iBAAiB;;;;;2BAQhB;;;;;CAK3B,WAAW,eAAe;AACxB,SAAO;;;;;;CAOT,WAAW,oBAAoB;AAC7B,SAAO;;;;;CAMT,WAAW,cAAc;AACvB,SAAO;;;2BAGkB;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YArLf,MAAM,wBAAwB,CAAA,EAAA,eAAA,WAAA,2BAAA,KAAA,EAAA;YAiE9B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,UAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAmB,CAAC,CAAA,EAAA,eAAA,WAAA,kBAAA,KAAA,EAAA;YAMxE,UAAU,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;6BAnGZC,cAAc,oBAA0B,CAAA,EAAA,eAAA;AAkMzC,IAAA,wBAAe"}

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

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { forEach } from "../../globals/internal/collection-helpers.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from "./defs.js";
@@ -16,7 +16,6 @@ import side_nav_default$1 from "./side-nav.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/ui-shell/side-nav.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -39,7 +38,7 @@ let CDSSideNav = class CDSSideNav extends HostListenerMixin(LitElement) {
 		this._handleButtonToggle = async (event) => {
 			this.expanded = event.detail.active;
 		};
-		this.collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;
+		this.collapseMode = "responsive";
 		this.expanded = false;
 		this.isNotChildOfHeader = false;
 		this.isNotPersistent = false;
@@ -96,7 +95,7 @@ let CDSSideNav = class CDSSideNav extends HostListenerMixin(LitElement) {
 	*/
 	_handleFocusOut({ relatedTarget }) {
 		const { collapseMode } = this;
-		if (collapseMode !== SIDE_NAV_COLLAPSE_MODE.FIXED) {
+		if (collapseMode !== "fixed") {
 			if (relatedTarget && !this.contains(relatedTarget)) this.expanded = false;
 		}
 	}
@@ -106,7 +105,7 @@ let CDSSideNav = class CDSSideNav extends HostListenerMixin(LitElement) {
 	*/
 	_handleFocusIn() {
 		const { collapseMode } = this;
-		if (collapseMode !== SIDE_NAV_COLLAPSE_MODE.FIXED) this.expanded = true;
+		if (collapseMode !== "fixed") this.expanded = true;
 	}
 	/**
 	* Handles the `mouseover` event for the side nav in rail mode.
@@ -114,7 +113,7 @@ let CDSSideNav = class CDSSideNav extends HostListenerMixin(LitElement) {
 	*/
 	_handleNavMouseOver() {
 		const { collapseMode } = this;
-		if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {
+		if (collapseMode === "rail") {
 			this.expanded = true;
 			this._hovered = true;
 			this._updatedSideNavMenuForceCollapsedState();
@@ -126,7 +125,7 @@ let CDSSideNav = class CDSSideNav extends HostListenerMixin(LitElement) {
 	*/
 	_handleNavMouseOut() {
 		const { collapseMode } = this;
-		if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {
+		if (collapseMode === "rail") {
 			this.expanded = false;
 			this._hovered = false;
 			this._updatedSideNavMenuForceCollapsedState();
@@ -142,19 +141,19 @@ let CDSSideNav = class CDSSideNav extends HostListenerMixin(LitElement) {
 	render() {
 		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
+			[`cds--side-nav__navigation`]: true,
+			[`cds--side-nav`]: true,
+			[`cds--side-nav--expanded`]: expanded,
+			[`cds--side-nav--collapsed`]: !expanded && collapseMode === "fixed",
+			[`cds--side-nav--rail`]: collapseMode === "rail",
+			[`cds--side-nav--ux`]: !isNotChildOfHeader,
+			[`cds--side-nav--hidden`]: isNotPersistent
 		});
 		const overlayClasses = classMap({
-			[`${prefix}--side-nav__overlay`]: true,
-			[`${prefix}--side-nav__overlay-active`]: expanded
+			[`cds--side-nav__overlay`]: true,
+			[`cds--side-nav__overlay-active`]: expanded
 		});
-		return html`${this.collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ? null : html`<div
+		return html`${this.collapseMode === "fixed" ? null : html`<div
             class="${overlayClasses}"
             @click=${this._onOverlayClick}></div>`}
       <div
@@ -168,31 +167,31 @@ let CDSSideNav = class CDSSideNav extends HostListenerMixin(LitElement) {
 	* A selector that will return the toggle buttons.
 	*/
 	static get selectorButtonToggle() {
-		return `${prefix}-header-menu-button`;
+		return `cds-header-menu-button`;
 	}
 	/**
 	* A selector that will return the header name + global action elements.
 	*/
 	static get selectorHeaderItems() {
-		return `${prefix}-header-name, ${prefix}-header-global-action`;
+		return `cds-header-name, cds-header-global-action`;
 	}
 	/**
 	* A selector that will return side nav focusable items.
 	*/
 	static get selectorNavItems() {
-		return `${prefix}-side-nav-menu, ${prefix}-side-nav-menu-item, ${prefix}-side-nav-link`;
+		return `cds-side-nav-menu, cds-side-nav-menu-item, cds-side-nav-link`;
 	}
 	/**
 	* A selector that will return side nav menus.
 	*/
 	static get selectorMenu() {
-		return `${prefix}-side-nav-menu`;
+		return `cds-side-nav-menu`;
 	}
 	/**
 	* The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.
 	*/
 	static get eventButtonToggle() {
-		return `${prefix}-header-menu-button-toggled`;
+		return `cds-header-menu-button-toggled`;
 	}
 	static {
 		this.styles = side_nav_default$1;
@@ -218,9 +217,9 @@ __decorate([property({
 })], CDSSideNav.prototype, "isNotPersistent", void 0);
 __decorate([HostListener("focusout")], CDSSideNav.prototype, "_handleFocusOut", null);
 __decorate([HostListener("focusin")], CDSSideNav.prototype, "_handleFocusIn", null);
-CDSSideNav = __decorate([carbonElement(`${prefix}-side-nav`)], CDSSideNav);
+CDSSideNav = __decorate([carbonElement(`cds-side-nav`)], CDSSideNav);
 var side_nav_default = CDSSideNav;
 //#endregion
 export { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE, side_nav_default as default };
 //# sourceMappingURL=side-nav.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"side-nav.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/side-nav.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2024\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 } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\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?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/\n Side nav.\n \n @element cds-side-nav\n * @fires cds-header-menu-button-toggled\n * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\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 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 // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n protected _handleButtonToggle = async (event: CustomEvent) => {\n this.expanded = event.detail.active;\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 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 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\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 * @param event.relatedTarget The event relatedTarget.\n /\n @HostListener('focusout')\n // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n private _handleFocusOut({ relatedTarget }: FocusEvent) {\n const { collapseMode } = this;\n if (collapseMode !== SIDE_NAV_COLLAPSE_MODE.FIXED) {\n if (relatedTarget && !this.contains(relatedTarget as Node)) {\n this.expanded = false;\n }\n }\n }\n\n /\n Handles `focus` event handler on this element.\n \n /\n @HostListener('focusin')\n // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n private _handleFocusIn() {\n const { collapseMode } = this;\n if (collapseMode !== SIDE_NAV_COLLAPSE_MODE.FIXED) {\n this.expanded = true;\n }\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 /*\n Handles the `click` event for the side nav overlay.\n \n /\n private _onOverlayClick() {\n this.expanded = false;\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\n class=\"${overlayClasses}\"\n @click=${this._onOverlayClick}></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;\n}\n\nexport default CDSSideNav;\n"],"mappings":"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"}
1	+ {"version":3,"file":"side-nav.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/side-nav.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2024\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 } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\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?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };\n\n/\n Side nav.\n \n @element cds-side-nav\n * @fires cds-header-menu-button-toggled\n * The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.\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 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 // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n protected _handleButtonToggle = async (event: CustomEvent) => {\n this.expanded = event.detail.active;\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 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 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\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 * @param event.relatedTarget The event relatedTarget.\n /\n @HostListener('focusout')\n // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n private _handleFocusOut({ relatedTarget }: FocusEvent) {\n const { collapseMode } = this;\n if (collapseMode !== SIDE_NAV_COLLAPSE_MODE.FIXED) {\n if (relatedTarget && !this.contains(relatedTarget as Node)) {\n this.expanded = false;\n }\n }\n }\n\n /\n Handles `focus` event handler on this element.\n \n /\n @HostListener('focusin')\n // @ts-expect-error: The decorator refers to this method but TS thinks this method is not referred to\n private _handleFocusIn() {\n const { collapseMode } = this;\n if (collapseMode !== SIDE_NAV_COLLAPSE_MODE.FIXED) {\n this.expanded = true;\n }\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 /*\n Handles the `click` event for the side nav overlay.\n \n /\n private _onOverlayClick() {\n this.expanded = false;\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\n class=\"${overlayClasses}\"\n @click=${this._onOverlayClick}></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;\n}\n\nexport default CDSSideNav;\n"],"mappings":"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"}

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

@@ -6,10 +6,9 @@
  */
 import { css } from "lit";
 //#region src/components/ui-shell/side-nav.scss?lit
 var side_nav_default = css([".cds--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds--layer-one.cds--layer__with-background,.cds--layer-three.cds--layer__with-background,.cds--layer-two.cds--layer__with-background{background-color:var(--cds-layer-background)}.cds--side-nav{background-color:var(--cds-background,#fff);color:var(--cds-text-secondary,#525252);inline-size:3rem;inset-block:0;inset-inline-start:0;max-inline-size:16rem;overflow:hidden;position:fixed;transition:inline-size .11s cubic-bezier(.2,0,1,.9),transform .11s cubic-bezier(.2,0,1,.9);will-change:inline-size;z-index:8000}.cds--side-nav--ux{inline-size:16rem;inset-block-start:3rem}@media (max-width:65.98rem){.cds--side-nav--ux{inline-size:0}}.cds--side-nav--rail{inline-size:3rem}.cds--side-nav--hidden{inline-size:0}.cds--side-nav--expanded{inline-size:16rem}.cds--side-nav__overlay{background-color:transparent;block-size:0;inline-size:0;inset-block-start:3rem;inset-inline-start:0;opacity:0;position:fixed;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{background-color:var(--cds-overlay,rgba(0,0,0,.6));block-size:100vh;inline-size:100vw;opacity:1;transition:opacity .3s cubic-bezier(.5,0,.1,1),background-color .3s cubic-bezier(.5,0,.1,1);z-index:6000}}.cds--header~.cds--side-nav{block-size:calc(100% - 48px);inset-block-start:3rem}.cds--side-nav--fixed{inline-size:16rem}.cds--side-nav--collapsed{inline-size:16rem;transform:translateX(-16rem)}.cds--side-nav__navigation{display:flex;flex-direction:column}.cds--side-nav__items,:host(cds-side-nav-items){border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--side-nav__items *,.cds--side-nav__items :after,.cds--side-nav__items :before,:host(cds-side-nav-items) *,:host(cds-side-nav-items) :after,:host(cds-side-nav-items) :before{box-sizing:inherit}.cds--side-nav__items,:host(cds-side-nav-items){flex:1 1 0%;overflow:hidden;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){block-size:auto;inline-size:auto;overflow:hidden}.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){block-size:auto;inline-size: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{background-color:var(--cds-background-hover,hsla(0,0%,55%,.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]){block-size:auto}.cds--side-nav__divider,:host(cds-side-nav-divider){background-color:var(--cds-border-subtle);block-size:1px;list-style-type:none;margin:.5rem 1rem}.cds--side-nav__divider hr,:host(cds-side-nav-divider) hr{border:none}.cds--side-nav__submenu{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:inherit;font-size:100%;inline-size:100%;margin:0;padding:0;text-align:start;vertical-align:baseline}.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{align-items:center;block-size:2rem;color:var(--cds-text-secondary,#525252);display:flex;font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-heading-compact-01-line-height,1.28572);outline:2px solid transparent;outline-offset:-2px;padding:0 1rem;transition:color .11s,background-color .11s,outline .11s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--side-nav__submenu:hover{background-color:var(--cds-background-hover,hsla(0,0%,55%,.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-align:start;text-overflow:ellipsis;white-space:nowrap}.cds--side-nav__icon.cds--side-nav__submenu-chevron{display:flex;flex:1;justify-content:flex-end}.cds--side-nav__submenu-chevron>svg{block-size:1rem;inline-size:1rem;transition:transform .11s}.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{block-size: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,hsla(0,0%,55%,.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]{background-color:var(--cds-background-selected,hsla(0,0%,55%,.2));color:var(--cds-text-primary,#161616);position:relative}.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{background-color:var(--cds-border-interactive,#0f62fe);content:\"\";inline-size:3px;inset-block:0;inset-inline-start:0;position:absolute}.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{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--side-nav__menu *,.cds--side-nav__menu :after,.cds--side-nav__menu :before{box-sizing:inherit}.cds--side-nav__menu{display:block;max-block-size:0;visibility:hidden}.cds--side-nav__submenu[aria-expanded=true]+.cds--side-nav__menu{max-block-size:93.75rem;visibility:inherit}.cds--side-nav__menu a.cds--side-nav__link{block-size:2rem;font-weight:400;min-block-size:2rem;padding-inline-start:2rem}.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-inline-start: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,hsla(0,0%,55%,.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{align-items:center;display:flex;font-size:var(--cds-heading-compact-01-font-size,.875rem);font-weight:var(--cds-heading-compact-01-font-weight,600);letter-spacing:var(--cds-heading-compact-01-letter-spacing,.16px);line-height:var(--cds-heading-compact-01-line-height,1.28572);min-block-size:2rem;outline:2px solid transparent;outline-offset:-2px;padding:0 1rem;position:relative;text-decoration:none;transition:color .11s,background-color .11s,outline .11s}.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{block-size:3rem}.cds--side-nav a.cds--header__menu-item .cds--text-truncate-end,a.cds--side-nav__link>.cds--side-nav__link-text{color:var(--cds-text-secondary,#525252);font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.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,hsla(0,0%,55%,.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{background-color:var(--cds-border-interactive,#0f62fe);content:\"\";inline-size:3px;inset-block:0;inset-inline-start:0;position:absolute}.cds--side-nav__icon{align-items:center;display:flex;flex:0 0 1rem;justify-content:center}.cds--side-nav__icon:not(.cds--side-nav__submenu-chevron){margin-inline-end:1.5rem}.cds--side-nav__icon>svg{block-size:1rem;fill:var(--cds-icon-secondary,#525252);inline-size:1rem}.cds--side-nav--expanded .cds--side-nav__icon>svg.cds--side-nav-expand-icon,.cds--side-nav__icon>svg.cds--side-nav-collapse-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-inline-start: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-inline-start: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){border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--side-nav__header-navigation *,.cds--side-nav__header-navigation :after,.cds--side-nav__header-navigation :before,:host(cds-header-side-nav-items) *,:host(cds-header-side-nav-items) :after,:host(cds-header-side-nav-items) :before{box-sizing:inherit}.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){display:block;margin-block-end:2rem;position:relative}}.cds--side-nav__header-divider:after{background:var(--cds-border-subtle);block-size:.0625rem;content:\"\";inline-size:calc(100% - 32px);inset-block-end:-1rem;inset-inline-start:1rem;position:absolute}.cds--side-nav a.cds--header__menu-item{color:var(--cds-text-secondary,#525252);justify-content:space-between;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{background-color:transparent;box-shadow:none;inline-size:100%;inset-block-end:inherit;padding:0;transform:none}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu li{inline-size:100%}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu a.cds--header__menu-item{font-weight:400;padding-inline-start:4.25rem}.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,hsla(0,0%,55%,.12));color:var(--cds-text-primary,#161616)}.cds--side-nav .cds--header__menu-title[aria-expanded=true]+.cds--header__menu a.cds--header__menu-item--current:hover{background-color:var(--cds-layer-selected-hover)}.cds--side-nav .cds--side-nav__header-navigation .cds--header__menu-item--current:after,.cds--side-nav .cds--side-nav__header-navigation a.cds--header__menu-item[aria-current=page]:after,.cds--side-nav :host(cds-header-side-nav-items) .cds--header__menu-item--current:after,.cds--side-nav :host(cds-header-side-nav-items) a.cds--header__menu-item[aria-current=page]:after{block-size:calc(100% + 4px);inline-size:3px}.cds--side-nav .cds--header__menu a.cds--header__menu-item{block-size: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)}:host(cds-side-nav[expanded]) ::slotted(cds-side-nav-items){overflow-y:auto}:host(cds-side-nav-link){block-size:auto;display:block;inline-size:auto;outline:none}: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) .cds--side-nav__submenu[aria-expanded=true]+.cds--side-nav__menu{max-block-size:none}:host(cds-side-nav-menu[active]){color:var(--cds-text-primary,#161616);position:relative}:host(cds-side-nav-menu[active]):before{background-color:var(--cds-border-interactive,#0f62fe);content:\"\";inline-size:.25rem;inset-block:0;inset-inline-start:0;position:absolute}: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){block-size:auto;display:block;inline-size:auto;outline:none}:host(cds-side-nav-menu-item) a.cds--side-nav__link{block-size:2rem;font-weight:400;min-block-size:2rem;padding-inline-start:2rem}:host(cds-side-nav-menu-item[parent-has-icon]) a.cds--side-nav__link{padding-inline-start: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,hsla(0,0%,55%,.12));color:var(--cds-text-primary,#161616)}"]);
 //#endregion
 export { side_nav_default as default };
 //# sourceMappingURL=side-nav.scss.js.map

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

@@ -5,12 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import header_default from "./header.scss.js";
 import { LitElement } from "lit";
 //#region src/components/ui-shell/switcher-divider.ts
 /**
 * Copyright IBM Corp. 2023, 2024
@@ -32,9 +31,9 @@ let CDSSwitcherDivider = class CDSSwitcherDivider extends LitElement {
 		this.styles = header_default;
 	}
 };
-CDSSwitcherDivider = __decorate([carbonElement(`${prefix}-switcher-divider`)], CDSSwitcherDivider);
+CDSSwitcherDivider = __decorate([carbonElement(`cds-switcher-divider`)], CDSSwitcherDivider);
 var switcher_divider_default = CDSSwitcherDivider;
 //#endregion
 export { switcher_divider_default as default };
 //# sourceMappingURL=switcher-divider.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"switcher-divider.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/switcher-divider.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2023, 2024\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 { prefix } from '../../globals/settings';\nimport styles from './header.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\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;\n}\n\nexport default CDSSwitcherDivider;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;~~AAiBA~~,+BACM~~,2BAA2B,WAAW;CAC1C,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,YAAY;AAExC,QAAM,mBAAmB;;;gBAGXA;;;iCATjBC,cAAc,~~GAAG~~,~~OAAO~~,~~mBAAmB~~;AAY5C~~,+BAAe~~"}
1	+ {"version":3,"file":"switcher-divider.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/switcher-divider.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2023, 2024\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 { prefix } from '../../globals/settings';\nimport styles from './header.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\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;\n}\n\nexport default CDSSwitcherDivider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,qBAAA,MACM,2BAA2B,WAAW;CAC1C,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,YAAY;AAExC,QAAM,mBAAmB;;;gBAGXA;;;iCATjBC,cAAc,uBAA6B,CAAA,EAAA,mBAAA;AAY5C,IAAA,2BAAe"}

package/es/components/ui-shell/switcher-item.js CHANGED Viewed

@@ -5,15 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import header_default from "./header.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/ui-shell/switcher-item.ts
 /**
 * Copyright IBM Corp. 2019, 2024
@@ -46,8 +45,8 @@ let CDSSwitcherItem = class CDSSwitcherItem extends FocusMixin(LitElement) {
         aria-labelledby="${ariaLabelledBy}"
         tabindex="${tabIndex}"
         class="${classMap({
-			[`${prefix}--switcher__item-link`]: true,
-			[`${prefix}--switcher__item-link--selected`]: selected
+			[`cds--switcher__item-link`]: true,
+			[`cds--switcher__item-link--selected`]: selected
 		})}"
         href="${href}">
         <slot></slot>
@@ -82,9 +81,9 @@ __decorate([property({
 	reflect: true,
 	attribute: "tab-index"
 })], CDSSwitcherItem.prototype, "tabIndex", void 0);
-CDSSwitcherItem = __decorate([carbonElement(`${prefix}-switcher-item`)], CDSSwitcherItem);
+CDSSwitcherItem = __decorate([carbonElement(`cds-switcher-item`)], CDSSwitcherItem);
 var switcher_item_default = CDSSwitcherItem;
 //#endregion
 export { switcher_item_default as default };
 //# sourceMappingURL=switcher-item.js.map

package/es/components/ui-shell/switcher-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switcher-item.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/switcher-item.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2024\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 } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss?lit';\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;\n}\n\nexport default CDSSwitcherItem;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAoBA,~~4BACM~~,wBAAwB,WAAW,WAAW,CAAC;;;cAiB5C;kBAMI;kBAMA;;CAEX,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,WAAW;AAEvC,QAAM,mBAAmB;;CAG3B,SAAS;EACP,MAAM,EAAE,MAAM,UAAU,WAAW,gBAAgB,aAAa;AAOhE,SAAO,IAAI;;;sBAGO,UAAU;2BACL,eAAe;oBACtB,SAAS;iBAVT,SAAS;IACtB,~~GAAG,OAAO,yBAAyB~~;IACnC,~~GAAG,OAAO,mCAAmC~~;GAC/C,CAAC,CAQmB;gBACT,KAAK;;;;;;2BAMQ;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YA3Df,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC;YAMnD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,CAAC;YAMxD,UAAU;YAMV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;CAAa,CAAC;8BA7BnEC,cAAc,~~GAAG~~,~~OAAO~~,~~gBAAgB~~;AAmEzC,~~4BAAe~~"}
1	+ {"version":3,"file":"switcher-item.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/switcher-item.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2024\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 } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss?lit';\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;\n}\n\nexport default CDSSwitcherItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAA,kBAAA,MACM,wBAAwB,WAAW,WAAW,CAAC;;;cAiB5C;kBAMI;kBAMA;;CAEX,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,WAAW;AAEvC,QAAM,mBAAmB;;CAG3B,SAAS;EACP,MAAM,EAAE,MAAM,UAAU,WAAW,gBAAgB,aAAa;AAOhE,SAAO,IAAI;;;sBAGO,UAAU;2BACL,eAAe;oBACtB,SAAS;iBAVT,SAAS;IACtB,6BAAmC;IACnC,uCAA6C;GAC/C,CAAC,CAQmB;gBACT,KAAK;;;;;;2BAMQ;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBACeA;;;YA3Df,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC,CAAA,EAAA,gBAAA,WAAA,aAAA,KAAA,EAAA;YAMnD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,CAAC,CAAA,EAAA,gBAAA,WAAA,kBAAA,KAAA,EAAA;YAMxD,UAAU,CAAA,EAAA,gBAAA,WAAA,QAAA,KAAA,EAAA;YAMV,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,gBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;CAAa,CAAC,CAAA,EAAA,gBAAA,WAAA,YAAA,KAAA,EAAA;8BA7BnEC,cAAc,oBAA0B,CAAA,EAAA,gBAAA;AAmEzC,IAAA,wBAAe"}

package/es/components/ui-shell/switcher.js CHANGED Viewed

@@ -5,13 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import header_default from "./header.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/components/ui-shell/switcher.ts
 /**
 * Copyright IBM Corp. 2023, 2024
@@ -50,9 +49,9 @@ __decorate([property({
 	type: String,
 	attribute: "aria-labelledby"
 })], CDSSwitcher.prototype, "ariaLabelledBy", void 0);
-CDSSwitcher = __decorate([carbonElement(`${prefix}-switcher`)], CDSSwitcher);
+CDSSwitcher = __decorate([carbonElement(`cds-switcher`)], CDSSwitcher);
 var switcher_default = CDSSwitcher;
 //#endregion
 export { switcher_default as default };
 //# sourceMappingURL=switcher.js.map

package/es/components/ui-shell/switcher.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switcher.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/switcher.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2023, 2024\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 } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport styles from './header.scss?lit';\nimport { prefix } from '../../globals/settings';\n\n/\n Switcher\n \n @element cds-switcher\n /\n@customElement(`${prefix}-switcher`)\nclass CDSSwitcher extends LitElement {\n /\n Required props for accessibility label on the underlying menu\n /\n @property({ type: String, attribute: 'aria-label' })\n ariaLabel;\n\n /\n Prop for accessibility labelled by on the underlying menu\n */\n @property({ type: String, attribute: 'aria-labelledby' })\n ariaLabelledBy;\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'list');\n }\n super.connectedCallback();\n }\n\n render() {\n return html`<slot></slot>`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static styles = styles;\n}\n\nexport default CDSSwitcher;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAkBA,~~wBACM~~,oBAAoB,WAAW;CAanC,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,OAAO;AAEnC,QAAM,mBAAmB;;CAG3B,SAAS;AACP,SAAO,IAAI;;;2BAGc;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBAEeA;;;YAzBf,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC;YAMnD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,CAAC;0BAX1DC,cAAc,~~GAAG~~,~~OAAO~~,~~WAAW~~;AAiCpC,~~uBAAe~~"}
1	+ {"version":3,"file":"switcher.js","names":["styles","customElement"],"sources":["../../../src/components/ui-shell/switcher.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2023, 2024\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 } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport styles from './header.scss?lit';\nimport { prefix } from '../../globals/settings';\n\n/\n Switcher\n \n @element cds-switcher\n /\n@customElement(`${prefix}-switcher`)\nclass CDSSwitcher extends LitElement {\n /\n Required props for accessibility label on the underlying menu\n /\n @property({ type: String, attribute: 'aria-label' })\n ariaLabel;\n\n /\n Prop for accessibility labelled by on the underlying menu\n */\n @property({ type: String, attribute: 'aria-labelledby' })\n ariaLabelledBy;\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'list');\n }\n super.connectedCallback();\n }\n\n render() {\n return html`<slot></slot>`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static styles = styles;\n}\n\nexport default CDSSwitcher;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,cAAA,MACM,oBAAoB,WAAW;CAanC,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,OAAO;AAEnC,QAAM,mBAAmB;;CAG3B,SAAS;AACP,SAAO,IAAI;;;2BAGc;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;;gBAEeA;;;YAzBf,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC,CAAA,EAAA,YAAA,WAAA,aAAA,KAAA,EAAA;YAMnD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,CAAC,CAAA,EAAA,YAAA,WAAA,kBAAA,KAAA,EAAA;0BAX1DC,cAAc,eAAqB,CAAA,EAAA,YAAA;AAiCpC,IAAA,mBAAe"}