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

@carbon/web-components 2.52.0-rc.0 → 2.53.0-rc.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 (1787) hide show

package/es/components/menu/menu-item-group.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 menu_item_default from "./menu-item.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/components/menu/menu-item-group.ts
 /**
 * Copyright IBM Corp. 2024
@@ -38,9 +37,9 @@ let CDSmenuItemGroup = class CDSmenuItemGroup extends LitElement {
 	}
 };
 __decorate([property({ type: String })], CDSmenuItemGroup.prototype, "label", void 0);
-CDSmenuItemGroup = __decorate([carbonElement(`${prefix}-menu-item-group`)], CDSmenuItemGroup);
+CDSmenuItemGroup = __decorate([carbonElement(`cds-menu-item-group`)], CDSmenuItemGroup);
 var menu_item_group_default = CDSmenuItemGroup;
 //#endregion
 export { menu_item_group_default as default };
 //# sourceMappingURL=menu-item-group.js.map

package/es/components/menu/menu-item-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item-group.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item-group.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 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 { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n/\n Menu Item.\n \n @element cds-menu-item-group\n /\n@customElement(`${prefix}-menu-item-group`)\nclass CDSmenuItemGroup extends LitElement {\n /\n Label for the menu item.\n */\n @property({ type: String })\n label;\n\n render() {\n const { label } = this;\n return html`\n <ul role=\"group\" aria-label=\"${label}\">\n <slot></slot>\n </ul>\n `;\n }\n static styles = styles;\n}\nexport default CDSmenuItemGroup;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAiBA,~~6BACM~~,yBAAyB,WAAW;CAOxC,SAAS;EACP,MAAM,EAAE,UAAU;AAClB,SAAO,IAAI;qCACsB,MAAM;;;;;;gBAKzBA;;;YAXf,SAAS,EAAE,MAAM,QAAQ,CAAC;+BAL5BC,cAAc,~~GAAG~~,~~OAAO~~,~~kBAAkB~~;AAkB3C,~~8BAAe~~"}
1	+ {"version":3,"file":"menu-item-group.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item-group.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 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 { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n/\n Menu Item.\n \n @element cds-menu-item-group\n /\n@customElement(`${prefix}-menu-item-group`)\nclass CDSmenuItemGroup extends LitElement {\n /\n Label for the menu item.\n */\n @property({ type: String })\n label;\n\n render() {\n const { label } = this;\n return html`\n <ul role=\"group\" aria-label=\"${label}\">\n <slot></slot>\n </ul>\n `;\n }\n static styles = styles;\n}\nexport default CDSmenuItemGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,mBAAA,MACM,yBAAyB,WAAW;CAOxC,SAAS;EACP,MAAM,EAAE,UAAU;AAClB,SAAO,IAAI;qCACsB,MAAM;;;;;;gBAKzBA;;;YAXf,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,iBAAA,WAAA,SAAA,KAAA,EAAA;+BAL5BC,cAAc,sBAA4B,CAAA,EAAA,iBAAA;AAkB3C,IAAA,0BAAe"}

package/es/components/menu/menu-item-radio-group.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 { MenuContext } from "./menu-context.js";
 import menu_item_default from "./menu-item.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { consume } from "@lit/context";
 //#region src/components/menu/menu-item-radio-group.ts
 /**
 * Copyright IBM Corp. 2024
@@ -35,7 +34,7 @@ let CDSmenuItemRadioGroup = class CDSmenuItemRadioGroup extends LitElement {
 	* The name of the custom event fired when the selection state changes.
 	*/
 	static get eventOnChange() {
-		return `${prefix}-item-changed`;
+		return `cds-item-changed`;
 	}
 	firstUpdated() {
 		this.context.updateFromChild({ hasSelectableItems: true });
@@ -51,7 +50,7 @@ let CDSmenuItemRadioGroup = class CDSmenuItemRadioGroup extends LitElement {
 		});
 	}
 	updated(_changedProperties) {
-		if (_changedProperties.has("selectedItem")) this.querySelectorAll(`${prefix}-menu-item`).forEach((item) => {
+		if (_changedProperties.has("selectedItem")) this.querySelectorAll(`cds-menu-item`).forEach((item) => {
 			if (item === this.selectedItem) item.setAttribute("aria-checked", "true");
 			else item.setAttribute("aria-checked", "false");
 		});
@@ -76,9 +75,9 @@ __decorate([property({
 	attribute: true
 })], CDSmenuItemRadioGroup.prototype, "selectedItem", void 0);
 __decorate([property()], CDSmenuItemRadioGroup.prototype, "itemToString", void 0);
-CDSmenuItemRadioGroup = __decorate([carbonElement(`${prefix}-menu-item-radio-group`)], CDSmenuItemRadioGroup);
+CDSmenuItemRadioGroup = __decorate([carbonElement(`cds-menu-item-radio-group`)], CDSmenuItemRadioGroup);
 var menu_item_radio_group_default = CDSmenuItemRadioGroup;
 //#endregion
 export { menu_item_radio_group_default as default };
 //# sourceMappingURL=menu-item-radio-group.js.map

package/es/components/menu/menu-item-radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item-radio-group.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item-radio-group.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 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 { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\n\n/\n Menu Item.\n \n @element cds-menu-item-radio-group\n /\n@customElement(`${prefix}-menu-item-radio-group`)\nclass CDSmenuItemRadioGroup extends LitElement {\n @consume({ context: MenuContext })\n context;\n\n /\n Label for the menu item radio group.\n /\n @property({ type: String })\n label;\n /\n List of items in the radio group.\n /\n @property({ type: Array })\n items = [];\n\n /\n Selected item in the radio group.\n /\n @property({ type: String, attribute: true })\n selectedItem;\n\n /\n List of items in the radio group.\n /\n @property()\n itemToString?: (item: Array<string \| number>) => string;\n /\n The name of the custom event fired when the selection state changes.\n */\n static get eventOnChange() {\n return `${prefix}-item-changed`;\n }\n\n firstUpdated(): void {\n this.context.updateFromChild({ hasSelectableItems: true });\n\n this.addEventListener(`click`, (e) => {\n this.selectedItem = e.target;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy: e.target,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSmenuItemRadioGroup).eventOnChange,\n init\n )\n )\n ) {\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSmenuItemRadioGroup).eventOnChange,\n init\n )\n );\n }\n });\n }\n\n protected updated(_changedProperties): void {\n if (_changedProperties.has('selectedItem')) {\n this.querySelectorAll(`${prefix}-menu-item`).forEach((item) => {\n if (item === this.selectedItem) {\n item.setAttribute('aria-checked', 'true');\n } else {\n item.setAttribute('aria-checked', 'false');\n }\n });\n }\n }\n\n render() {\n const { label } = this;\n return html`\n <ul role=\"group\" aria-label=\"${label}\">\n <slot></slot>\n </ul>\n `;\n }\n static styles = styles;\n}\nexport default CDSmenuItemRadioGroup;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAoBA,~~kCACM~~,8BAA8B,WAAW;;;eAarC,EAAE;;;;;CAgBV,WAAW,gBAAgB;AACzB,SAAO~~,GAAG,OAAO~~;;~~CAGnB~~,eAAqB;AACnB,OAAK,QAAQ,gBAAgB,EAAE,oBAAoB,MAAM,CAAC;AAE1D,OAAK,iBAAiB,UAAU,MAAM;AACpC,QAAK,eAAe,EAAE;GACtB,MAAM,OAAO;IACX,SAAS;IACT,YAAY;IACZ,UAAU;IACV,QAAQ,EACN,aAAa,EAAE,QAChB;IACF;AACD,OACE,KAAK,cACH,IAAI,YACD,KAAK,YAA6C,eACnD,KACD,CACF,CAED,MAAK,cACH,IAAI,YACD,KAAK,YAA6C,eACnD,KACD,CACF;IAEH;;CAGJ,~~AAAU~~,~~QAAQ,~~oBAA0B;AAC1C,MAAI,mBAAmB,IAAI,eAAe,CACxC,MAAK,iBAAiB,~~GAAG~~,~~OAAO,YAAY,~~CAAC,SAAS,SAAS;AAC7D,OAAI,SAAS,KAAK,aAChB,MAAK,aAAa,gBAAgB,OAAO;OAEzC,MAAK,aAAa,gBAAgB,QAAQ;IAE5C;;CAIN,SAAS;EACP,MAAM,EAAE,UAAU;AAClB,SAAO,IAAI;qCACsB,MAAM;;;;;;gBAKzBA;;;YAnFf,QAAQ,EAAE,SAAS,aAAa,CAAC;YAMjC,SAAS,EAAE,MAAM,QAAQ,CAAC;YAK1B,SAAS,EAAE,MAAM,OAAO,CAAC;YAMzB,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAM,CAAC;YAM3C,UAAU;oCAzBZC,cAAc,~~GAAG~~,~~OAAO~~,~~wBAAwB~~;AAuFjD,~~oCAAe~~"}
1	+ {"version":3,"file":"menu-item-radio-group.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item-radio-group.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 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 { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\n\n/\n Menu Item.\n \n @element cds-menu-item-radio-group\n /\n@customElement(`${prefix}-menu-item-radio-group`)\nclass CDSmenuItemRadioGroup extends LitElement {\n @consume({ context: MenuContext })\n context;\n\n /\n Label for the menu item radio group.\n /\n @property({ type: String })\n label;\n /\n List of items in the radio group.\n /\n @property({ type: Array })\n items = [];\n\n /\n Selected item in the radio group.\n /\n @property({ type: String, attribute: true })\n selectedItem;\n\n /\n List of items in the radio group.\n /\n @property()\n itemToString?: (item: Array<string \| number>) => string;\n /\n The name of the custom event fired when the selection state changes.\n */\n static get eventOnChange() {\n return `${prefix}-item-changed`;\n }\n\n firstUpdated(): void {\n this.context.updateFromChild({ hasSelectableItems: true });\n\n this.addEventListener(`click`, (e) => {\n this.selectedItem = e.target;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy: e.target,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSmenuItemRadioGroup).eventOnChange,\n init\n )\n )\n ) {\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSmenuItemRadioGroup).eventOnChange,\n init\n )\n );\n }\n });\n }\n\n protected updated(_changedProperties): void {\n if (_changedProperties.has('selectedItem')) {\n this.querySelectorAll(`${prefix}-menu-item`).forEach((item) => {\n if (item === this.selectedItem) {\n item.setAttribute('aria-checked', 'true');\n } else {\n item.setAttribute('aria-checked', 'false');\n }\n });\n }\n }\n\n render() {\n const { label } = this;\n return html`\n <ul role=\"group\" aria-label=\"${label}\">\n <slot></slot>\n </ul>\n `;\n }\n static styles = styles;\n}\nexport default CDSmenuItemRadioGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAA,wBAAA,MACM,8BAA8B,WAAW;;;eAarC,EAAE;;;;;CAgBV,WAAW,gBAAgB;AACzB,SAAO;;CAGT,eAAqB;AACnB,OAAK,QAAQ,gBAAgB,EAAE,oBAAoB,MAAM,CAAC;AAE1D,OAAK,iBAAiB,UAAU,MAAM;AACpC,QAAK,eAAe,EAAE;GACtB,MAAM,OAAO;IACX,SAAS;IACT,YAAY;IACZ,UAAU;IACV,QAAQ,EACN,aAAa,EAAE,QAChB;IACF;AACD,OACE,KAAK,cACH,IAAI,YACD,KAAK,YAA6C,eACnD,KACD,CACF,CAED,MAAK,cACH,IAAI,YACD,KAAK,YAA6C,eACnD,KACD,CACF;IAEH;;CAGJ,QAAkB,oBAA0B;AAC1C,MAAI,mBAAmB,IAAI,eAAe,CACxC,MAAK,iBAAiB,gBAAsB,CAAC,SAAS,SAAS;AAC7D,OAAI,SAAS,KAAK,aAChB,MAAK,aAAa,gBAAgB,OAAO;OAEzC,MAAK,aAAa,gBAAgB,QAAQ;IAE5C;;CAIN,SAAS;EACP,MAAM,EAAE,UAAU;AAClB,SAAO,IAAI;qCACsB,MAAM;;;;;;gBAKzBA;;;YAnFf,QAAQ,EAAE,SAAS,aAAa,CAAC,CAAA,EAAA,sBAAA,WAAA,WAAA,KAAA,EAAA;YAMjC,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,sBAAA,WAAA,SAAA,KAAA,EAAA;YAK1B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,EAAA,sBAAA,WAAA,SAAA,KAAA,EAAA;YAMzB,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAM,CAAC,CAAA,EAAA,sBAAA,WAAA,gBAAA,KAAA,EAAA;YAM3C,UAAU,CAAA,EAAA,sBAAA,WAAA,gBAAA,KAAA,EAAA;oCAzBZC,cAAc,4BAAkC,CAAA,EAAA,sBAAA;AAuFjD,IAAA,gCAAe"}

package/es/components/menu/menu-item-selectable.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 { MenuContext } from "./menu-context.js";
 import menu_item_default from "./menu-item.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { consume } from "@lit/context";
 //#region src/components/menu/menu-item-selectable.ts
 /**
 * Copyright IBM Corp. 2019, 2026
@@ -48,7 +47,7 @@ let CDSmenuItemSelectable = class CDSmenuItemSelectable extends LitElement {
 	* The name of the custom event fired when the selection state changes.
 	*/
 	static get eventOnChange() {
-		return `${prefix}-item-changed`;
+		return `cds-item-changed`;
 	}
 	static {
 		this.shadowRootOptions = {
@@ -61,7 +60,7 @@ let CDSmenuItemSelectable = class CDSmenuItemSelectable extends LitElement {
 		this.addEventListener("keydown", this._handleKeydown);
 	}
 	firstUpdated() {
-		const menuItemSelectable = this.shadowRoot?.querySelector(`${prefix}-menu-item`);
+		const menuItemSelectable = this.shadowRoot?.querySelector(`cds-menu-item`);
 		if (menuItemSelectable) menuItemSelectable.addEventListener("keydown", this._handleKeydown);
 		this.context.updateFromChild({ hasSelectableItems: true });
 	}
@@ -70,7 +69,7 @@ let CDSmenuItemSelectable = class CDSmenuItemSelectable extends LitElement {
 		return html`
       <cds-menu-item
         label="${label}"
-        class="${prefix}--menu-item-selectable--selected"
+        class="${"cds"}--menu-item-selectable--selected"
         role="menuitemcheckbox"
         shortcut=${this.shortcut}
         aria-checked="${selected}"
@@ -88,9 +87,9 @@ __decorate([property({ type: String })], CDSmenuItemSelectable.prototype, "label
 __decorate([property({ type: Boolean })], CDSmenuItemSelectable.prototype, "selected", void 0);
 __decorate([property()], CDSmenuItemSelectable.prototype, "renderIcon", void 0);
 __decorate([property()], CDSmenuItemSelectable.prototype, "shortcut", void 0);
-CDSmenuItemSelectable = __decorate([carbonElement(`${prefix}-menu-item-selectable`)], CDSmenuItemSelectable);
+CDSmenuItemSelectable = __decorate([carbonElement(`cds-menu-item-selectable`)], CDSmenuItemSelectable);
 var menu_item_selectable_default = CDSmenuItemSelectable;
 //#endregion
 export { menu_item_selectable_default as default };
 //# sourceMappingURL=menu-item-selectable.js.map

package/es/components/menu/menu-item-selectable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item-selectable.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item-selectable.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 } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\n/\n Menu Item Selectable.\n \n @element cds-menu-item-selectable\n /\n@customElement(`${prefix}-menu-item-selectable`)\nclass CDSmenuItemSelectable extends LitElement {\n @consume({ context: MenuContext })\n context;\n /\n Label for the menu item selectable.\n /\n @property({ type: String })\n label;\n /\n Whether the menu item is selected or not.\n /\n @property({ type: Boolean })\n selected = false;\n\n /\n The name of the custom event fired when the selection state changes.\n /\n static get eventOnChange() {\n return `${prefix}-item-changed`;\n }\n\n /\n Automatically forwards focus to the first focusable element inside the shadow root (helps with focus styles when wrapped in menu-item-group)\n /\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /\n Sets the menu item's icon.\n */\n @property()\n renderIcon?: () => void;\n\n @property()\n shortcut;\n\n _handleClick = (e) => {\n this.selected = !this.selected;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy: e.target,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSmenuItemSelectable).eventOnChange,\n init\n )\n )\n ) {\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSmenuItemSelectable).eventOnChange,\n init\n )\n );\n }\n };\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n firstUpdated() {\n const menuItemSelectable = this.shadowRoot?.querySelector(\n `${prefix}-menu-item`\n ) as HTMLElement \| null;\n if (menuItemSelectable) {\n menuItemSelectable.addEventListener('keydown', this._handleKeydown);\n }\n\n this.context.updateFromChild({ hasSelectableItems: true });\n }\n\n _handleKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n this._handleClick(e);\n }\n };\n\n render() {\n const { label, selected, _handleClick: handleClick } = this;\n\n return html`\n <cds-menu-item\n label=\"${label}\"\n class=\"${prefix}--menu-item-selectable--selected\"\n role=\"menuitemcheckbox\"\n shortcut=${this.shortcut}\n aria-checked=\"${selected}\"\n @click=\"${handleClick}\">\n <slot slot=\"render-icon\" name=\"render-icon\"></slot>\n </cds-menu-item>\n `;\n }\n static styles = styles;\n}\nexport default CDSmenuItemSelectable;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAmBA,~~kCACM~~,8BAA8B,WAAW;;;kBAYlC;uBA0BK,MAAM;AACpB,QAAK,WAAW,CAAC,KAAK;GACtB,MAAM,OAAO;IACX,SAAS;IACT,YAAY;IACZ,UAAU;IACV,QAAQ,EACN,aAAa,EAAE,QAChB;IACF;AACD,OACE,KAAK,cACH,IAAI,YACD,KAAK,YAA6C,eACnD,KACD,CACF,CAED,MAAK,cACH,IAAI,YACD,KAAK,YAA6C,eACnD,KACD,CACF;;yBAoBa,MAAqB;AACrC,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,MAAK,aAAa,EAAE;;;;;;CAlExB,WAAW,gBAAgB;AACzB,SAAO~~,GAAG,OAAO~~;;;~~2BAMQ~~;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;CAsCD,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,OAAK,iBAAiB,WAAW,KAAK,eAAe;;CAGvD,eAAe;EACb,MAAM,qBAAqB,KAAK,YAAY,cAC1C,~~GAAG,OAAO,YACX~~;AACD,MAAI,mBACF,oBAAmB,iBAAiB,WAAW,KAAK,eAAe;AAGrE,OAAK,QAAQ,gBAAgB,EAAE,oBAAoB,MAAM,CAAC;;CAS5D,SAAS;EACP,MAAM,EAAE,OAAO,UAAU,cAAc,gBAAgB;AAEvD,SAAO,IAAI;;iBAEE,MAAM;~~iBACN,OAAO~~;;mBAEL,KAAK,SAAS;wBACT,SAAS;kBACf,YAAY;;;;;;gBAKZA;;;YArGf,QAAQ,EAAE,SAAS,aAAa,CAAC;YAKjC,SAAS,EAAE,MAAM,QAAQ,CAAC;YAK1B,SAAS,EAAE,MAAM,SAAS,CAAC;YAqB3B,UAAU;YAGV,UAAU;oCApCZC,cAAc,~~GAAG~~,~~OAAO~~,~~uBAAuB~~;AAyGhD,~~mCAAe~~"}
1	+ {"version":3,"file":"menu-item-selectable.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item-selectable.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 } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\n/\n Menu Item Selectable.\n \n @element cds-menu-item-selectable\n /\n@customElement(`${prefix}-menu-item-selectable`)\nclass CDSmenuItemSelectable extends LitElement {\n @consume({ context: MenuContext })\n context;\n /\n Label for the menu item selectable.\n /\n @property({ type: String })\n label;\n /\n Whether the menu item is selected or not.\n /\n @property({ type: Boolean })\n selected = false;\n\n /\n The name of the custom event fired when the selection state changes.\n /\n static get eventOnChange() {\n return `${prefix}-item-changed`;\n }\n\n /\n Automatically forwards focus to the first focusable element inside the shadow root (helps with focus styles when wrapped in menu-item-group)\n /\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /\n Sets the menu item's icon.\n */\n @property()\n renderIcon?: () => void;\n\n @property()\n shortcut;\n\n _handleClick = (e) => {\n this.selected = !this.selected;\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy: e.target,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSmenuItemSelectable).eventOnChange,\n init\n )\n )\n ) {\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSmenuItemSelectable).eventOnChange,\n init\n )\n );\n }\n };\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n firstUpdated() {\n const menuItemSelectable = this.shadowRoot?.querySelector(\n `${prefix}-menu-item`\n ) as HTMLElement \| null;\n if (menuItemSelectable) {\n menuItemSelectable.addEventListener('keydown', this._handleKeydown);\n }\n\n this.context.updateFromChild({ hasSelectableItems: true });\n }\n\n _handleKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n this._handleClick(e);\n }\n };\n\n render() {\n const { label, selected, _handleClick: handleClick } = this;\n\n return html`\n <cds-menu-item\n label=\"${label}\"\n class=\"${prefix}--menu-item-selectable--selected\"\n role=\"menuitemcheckbox\"\n shortcut=${this.shortcut}\n aria-checked=\"${selected}\"\n @click=\"${handleClick}\">\n <slot slot=\"render-icon\" name=\"render-icon\"></slot>\n </cds-menu-item>\n `;\n }\n static styles = styles;\n}\nexport default CDSmenuItemSelectable;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAA,wBAAA,MACM,8BAA8B,WAAW;;;kBAYlC;uBA0BK,MAAM;AACpB,QAAK,WAAW,CAAC,KAAK;GACtB,MAAM,OAAO;IACX,SAAS;IACT,YAAY;IACZ,UAAU;IACV,QAAQ,EACN,aAAa,EAAE,QAChB;IACF;AACD,OACE,KAAK,cACH,IAAI,YACD,KAAK,YAA6C,eACnD,KACD,CACF,CAED,MAAK,cACH,IAAI,YACD,KAAK,YAA6C,eACnD,KACD,CACF;;yBAoBa,MAAqB;AACrC,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,MAAK,aAAa,EAAE;;;;;;CAlExB,WAAW,gBAAgB;AACzB,SAAO;;;2BAMkB;GACzB,GAAG,WAAW;GACd,gBAAgB;GACjB;;CAsCD,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,OAAK,iBAAiB,WAAW,KAAK,eAAe;;CAGvD,eAAe;EACb,MAAM,qBAAqB,KAAK,YAAY,cAC1C,gBACD;AACD,MAAI,mBACF,oBAAmB,iBAAiB,WAAW,KAAK,eAAe;AAGrE,OAAK,QAAQ,gBAAgB,EAAE,oBAAoB,MAAM,CAAC;;CAS5D,SAAS;EACP,MAAM,EAAE,OAAO,UAAU,cAAc,gBAAgB;AAEvD,SAAO,IAAI;;iBAEE,MAAM;uBACC;;mBAEL,KAAK,SAAS;wBACT,SAAS;kBACf,YAAY;;;;;;gBAKZA;;;YArGf,QAAQ,EAAE,SAAS,aAAa,CAAC,CAAA,EAAA,sBAAA,WAAA,WAAA,KAAA,EAAA;YAKjC,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,sBAAA,WAAA,SAAA,KAAA,EAAA;YAK1B,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,sBAAA,WAAA,YAAA,KAAA,EAAA;YAqB3B,UAAU,CAAA,EAAA,sBAAA,WAAA,cAAA,KAAA,EAAA;YAGV,UAAU,CAAA,EAAA,sBAAA,WAAA,YAAA,KAAA,EAAA;oCApCZC,cAAc,2BAAiC,CAAA,EAAA,sBAAA;AAyGhD,IAAA,+BAAe"}

package/es/components/menu/menu-item.js CHANGED Viewed

@@ -5,9 +5,9 @@
  * 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 iconLoader from "../../globals/internal/icon-loader.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
@@ -20,7 +20,6 @@ import Checkmark16 from "@carbon/icons/es/checkmark/16.js";
 import CaretLeft16 from "@carbon/icons/es/caret--left/16.js";
 import CaretRight16 from "@carbon/icons/es/caret--right/16.js";
 import { consume } from "@lit/context";
 //#region src/components/menu/menu-item.ts
 /**
 * Copyright IBM Corp. 2019, 2026
@@ -28,7 +27,7 @@ import { consume } from "@lit/context";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const MENU_CLOSE_ROOT_EVENT = `${prefix}-menu-close-root-request`;
+const MENU_CLOSE_ROOT_EVENT = `cds-menu-close-root-request`;
 /**
 * Menu Item.
 *
@@ -41,7 +40,7 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
 		this._parentMenu = null;
 		this.dangerDescription = "danger";
 		this.submenuOpen = false;
-		this.kind = MENU_ITEM_KIND.DEFAULT;
+		this.kind = "default";
 		this.boundaries = {
 			x: -1,
 			y: -1
@@ -94,11 +93,12 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
 					const item = (this.shadowRoot?.querySelector("slot[name=\"submenu\"]"))?.assignedElements?.()?.[0];
 					if (item) switch (item.tagName) {
 						case "CDS-MENU-ITEM-RADIO-GROUP":
-							this.submenuEntry = item.querySelector(`${prefix}-menu-item`);
+							this.submenuEntry = item.querySelector(`cds-menu-item`);
 							break;
 						case "CDS-MENU-ITEM-GROUP": {
 							const slotElements = item.shadowRoot?.querySelector("slot")?.assignedElements();
-							this.submenuEntry = slotElements?.length && slotElements[0];
+							const firstElement = slotElements?.length && slotElements[0];
+							this.submenuEntry = firstElement;
 							break;
 						}
 						case "CDS-MENU-ITEM":
@@ -117,7 +117,7 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
 				y: -1
 			};
 			this.submenuOpen = false;
-			(this.shadowRoot?.querySelector(`.${prefix}--menu-item`))?.focus();
+			(this.shadowRoot?.querySelector(`.cds--menu-item`))?.focus();
 		};
 		this._handleKeyDown = (e) => {
 			if (this.hasSubmenu && [
@@ -155,7 +155,7 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
 		}
 		if (this.hasSubmenu) this.setAttribute("aria-haspopup", this.hasSubmenu + "");
 		else this.removeAttribute("aria-haspopup");
-		if (this.closest(`${prefix}-menu-item-radio-group`)) {
+		if (this.closest(`cds-menu-item-radio-group`)) {
 			this.setAttribute("role", "menuitemradio");
 			this.setAttribute("aria-checked", this.ariaChecked + "");
 		} else if (!this.getAttribute("role")) this.setAttribute("role", "menuitem");
@@ -165,9 +165,9 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
 		this.dispatchIconDetect();
 		this.isRtl = document.dir === "rtl";
 		this._registerSubMenuItems();
-		this._parentMenu = this.closest(`${prefix}-menu`);
+		this._parentMenu = this.closest(`cds-menu`);
 		this._updateAttributes();
-		this.addEventListener(`${prefix}-menu-closed`, () => {
+		this.addEventListener(`cds-menu-closed`, () => {
 			this.focus();
 			this._closeSubmenu();
 		});
@@ -187,7 +187,7 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
 	updated() {
 		if (this.hasSubmenu) this.setAttribute("aria-expanded", this.hasSubmenu + "");
 		else this.removeAttribute("aria-expanded");
-		if (this.kind === MENU_ITEM_KIND.DANGER) this.classList.toggle(`${prefix}--menu-item--danger`);
+		if (this.kind === "danger") this.classList.toggle(`cds--menu-item--danger`);
 	}
 	handleClick(event) {
 		this._handleClick(event);
@@ -203,28 +203,28 @@ let CDSmenuItem = class CDSmenuItem extends HostListenerMixin(HostListenerMixin(
 	}
 	render() {
 		const { label, shortcut, submenuOpen, boundaries, isRtl, kind, dangerDescription } = this;
-		const isDanger = kind === MENU_ITEM_KIND.DANGER && !this.hasSubmenu;
-		const menuClassName = this.context?.hasSelectableItems ? `${prefix}--menu--with-selectable-items` : "";
+		const isDanger = kind === "danger" && !this.hasSubmenu;
+		const menuClassName = this.context?.hasSelectableItems ? `cds--menu--with-selectable-items` : "";
 		return html`
-      <div class="${prefix}--menu-item__selection-icon">
+      <div class="${"cds"}--menu-item__selection-icon">
         ${this.ariaChecked === "true" ? iconLoader(Checkmark16) : void 0}
       </div>
-      <div class="${prefix}--menu-item__icon">
+      <div class="${"cds"}--menu-item__icon">
         <slot name="render-icon"></slot>
       </div>
-      <div class="${prefix}--menu-item__label">${label}</div>
-      ${isDanger ? html`<span id="danger-description" class="${prefix}--visually-hidden"
+      <div class="${"cds"}--menu-item__label">${label}</div>
+      ${isDanger ? html`<span id="danger-description" class="${"cds"}--visually-hidden"
             >${dangerDescription}</span
           >` : html``}
-      ${shortcut && !this.hasSubmenu ? html` <div class="${prefix}--menu-item__shortcut">${shortcut}</div> ` : html``}
+      ${shortcut && !this.hasSubmenu ? html` <div class="${"cds"}--menu-item__shortcut">${shortcut}</div> ` : html``}
       ${this.hasSubmenu ? html`
-            <div class="${prefix}--menu-item__shortcut">
+            <div class="${"cds"}--menu-item__shortcut">
               ${isRtl ? iconLoader(CaretLeft16) : iconLoader(CaretRight16)}
             </div>
             <cds-menu
               className=${menuClassName}
-              size=${this.parentElement?.getAttribute("size") ?? MENU_SIZE.LARGE}
+              size=${this.parentElement?.getAttribute("size") ?? "lg"}
               ?isChild="${this.hasSubmenu}"
               label="${label}"
               .open="${submenuOpen}"
@@ -258,9 +258,9 @@ __decorate([HostListener("click", { capture: true })], CDSmenuItem.prototype, "h
 __decorate([HostListener("mouseenter")], CDSmenuItem.prototype, "handleMouseEnter", null);
 __decorate([HostListener("mouseleave")], CDSmenuItem.prototype, "handleMouseLeave", null);
 __decorate([HostListener("keydown")], CDSmenuItem.prototype, "handleKeyDown", null);
-CDSmenuItem = __decorate([carbonElement(`${prefix}-menu-item`)], CDSmenuItem);
+CDSmenuItem = __decorate([carbonElement(`cds-menu-item`)], CDSmenuItem);
 var menu_item_default = CDSmenuItem;
 //#endregion
 export { MENU_CLOSE_ROOT_EVENT, MENU_ITEM_KIND, MENU_SIZE, menu_item_default as default };
 //# sourceMappingURL=menu-item.js.map

package/es/components/menu/menu-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item.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, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MENU_ITEM_KIND, MENU_SIZE } from './defs';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CDSMenu from './menu';\n\nexport { MENU_ITEM_KIND, MENU_SIZE };\nexport const MENU_CLOSE_ROOT_EVENT = `${prefix}-menu-close-root-request`;\n\n/\n Menu Item.\n \n @element cds-menu-item\n /\n@customElement(`${prefix}-menu-item`)\nclass CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {\n @consume({ context: MenuContext })\n context;\n\n readonly hoverIntentDelay = 150; // in ms\n hoverIntentTimeout;\n\n /\n The parent cds-menu element\n /\n private _parentMenu: CDSMenu \| null = null;\n\n /\n MutationObserver that observes the parent cds-menu element\n /\n private _parentMenuObserver?: MutationObserver;\n\n /\n Label for the menu item.\n /\n @property({ type: String })\n label;\n /\n Shortcut for the menu item.\n /\n @property({ type: String })\n shortcut;\n /\n Disabled property for the menu item.\n /\n @property({ type: Boolean })\n disabled;\n\n /\n Specify the message read by screen readers for the danger menu item variant\n /\n @property({ type: String, attribute: 'danger-description' })\n dangerDescription = 'danger';\n\n /\n Whether the menu submen for an item is open or not.\n /\n @property({ type: Boolean })\n submenuOpen = false;\n\n @property()\n kind = MENU_ITEM_KIND.DEFAULT;\n /\n Menu boundaries.\n /\n @property()\n boundaries: {\n x: number \| [number, number];\n y: number \| [number, number];\n } = { x: -1, y: -1 };\n\n @property({ attribute: 'aria-checked' })\n ariaChecked: string \| null = this.getAttribute('selected') ?? 'false';\n\n /\n Entrypoint.\n /\n @state()\n submenuEntry;\n /\n Checks if document direction is rtl.\n /\n @state()\n isRtl = false;\n /\n Checks if document direction is rtl.\n */\n @state()\n hasSubmenu = false;\n\n async dispatchIconDetect() {\n const hasRenderIcon = !!this.querySelector('[slot=\"render-icon\"]');\n if (hasRenderIcon) {\n await undefined; // this is used to replace setTimeout with 0 time out, which is much fater.\n this.dispatchEvent(\n new CustomEvent('icon-detect', {\n bubbles: true, // Allows event to bubble up the DOM\n composed: true, // Allows event to cross shadow DOM boundary\n })\n );\n }\n }\n\n private _updateAttributes() {\n if (this.disabled && !this.hasSubmenu) {\n this.setAttribute('aria-disabled', this.disabled);\n this.setAttribute('tabindex', '-1');\n } else if (this._parentMenu && !(this._parentMenu as CDSMenu).open) {\n this.removeAttribute('aria-disabled');\n this.setAttribute('tabindex', '-1');\n } else {\n this.removeAttribute('aria-disabled');\n this.setAttribute('tabindex', '0');\n }\n if (this.hasSubmenu) {\n this.setAttribute('aria-haspopup', this.hasSubmenu + '');\n } else {\n this.removeAttribute('aria-haspopup');\n }\n if (this.closest(`${prefix}-menu-item-radio-group`)) {\n this.setAttribute('role', 'menuitemradio');\n this.setAttribute('aria-checked', this.ariaChecked + '');\n } else if (!this.getAttribute('role')) {\n this.setAttribute('role', 'menuitem');\n }\n }\n\n firstUpdated() {\n this.hasSubmenu = !!this.querySelector('[slot=\"submenu\"]');\n\n this.dispatchIconDetect();\n this.isRtl = document.dir === 'rtl';\n this._registerSubMenuItems();\n this._parentMenu = this.closest(`${prefix}-menu`);\n\n this._updateAttributes();\n\n this.addEventListener(`${prefix}-menu-closed`, () => {\n this.focus();\n this._closeSubmenu();\n });\n\n if (this._parentMenu) {\n this._parentMenuObserver = new MutationObserver(() => {\n this._updateAttributes();\n });\n\n this._parentMenuObserver.observe(this._parentMenu, {\n attributes: true,\n attributeFilter: ['open'],\n });\n }\n }\n\n disconnectedCallback() {\n this._parentMenuObserver?.disconnect();\n }\n\n updated(): void {\n if (this.hasSubmenu) {\n this.setAttribute('aria-expanded', this.hasSubmenu + '');\n } else {\n this.removeAttribute('aria-expanded');\n }\n if (this.kind === MENU_ITEM_KIND.DANGER)\n this.classList.toggle(`${prefix}--menu-item--danger`);\n }\n\n @HostListener('click', { capture: true })\n handleClick(event: MouseEvent) {\n this._handleClick(event);\n }\n\n @HostListener('mouseenter')\n handleMouseEnter() {\n if (this.hasSubmenu) {\n this._handleMouseEnter();\n }\n }\n\n @HostListener('mouseleave')\n handleMouseLeave() {\n if (this.hasSubmenu) {\n this._handleMouseLeave();\n }\n }\n\n @HostListener('keydown')\n handleKeyDown(event: KeyboardEvent) {\n this._handleKeyDown(event);\n }\n\n render() {\n const {\n label,\n shortcut,\n submenuOpen,\n boundaries,\n isRtl,\n kind,\n dangerDescription,\n } = this;\n\n const isDanger = kind === MENU_ITEM_KIND.DANGER && !this.hasSubmenu;\n\n const menuClassName = this.context?.hasSelectableItems\n ? `${prefix}--menu--with-selectable-items`\n : '';\n\n return html`\n <div class=\"${prefix}--menu-item__selection-icon\">\n ${this.ariaChecked === 'true' ? iconLoader(Checkmark16) : undefined}\n </div>\n\n <div class=\"${prefix}--menu-item__icon\">\n <slot name=\"render-icon\"></slot>\n </div>\n <div class=\"${prefix}--menu-item__label\">${label}</div>\n ${isDanger\n ? html`<span id=\"danger-description\" class=\"${prefix}--visually-hidden\"\n >${dangerDescription}</span\n >`\n : html``}\n ${shortcut && !this.hasSubmenu\n ? html` <div class=\"${prefix}--menu-item__shortcut\">${shortcut}</div> `\n : html``}\n ${this.hasSubmenu\n ? html`\n <div class=\"${prefix}--menu-item__shortcut\">\n ${isRtl ? iconLoader(CaretLeft16) : iconLoader(CaretRight16)}\n </div>\n <cds-menu\n className=${menuClassName}\n size=${this.parentElement?.getAttribute('size') ??\n MENU_SIZE.LARGE}\n ?isChild=\"${this.hasSubmenu}\"\n label=\"${label}\"\n .open=\"${submenuOpen}\"\n .x=\"${boundaries.x}\"\n .y=\"${boundaries.y}\">\n <slot name=\"submenu\"></slot>\n </cds-menu>\n `\n : html``}\n `;\n }\n\n _handleClick = (e: MouseEvent \| KeyboardEvent): void => {\n if (this.hasSubmenu) {\n this._openSubmenu();\n return;\n }\n\n if (e.type === 'keydown') {\n this.click();\n return;\n }\n\n this.dispatchEvent(\n new CustomEvent(MENU_CLOSE_ROOT_EVENT, {\n bubbles: true,\n composed: true,\n detail: {\n triggerEvent: e,\n },\n })\n );\n };\n _handleMouseEnter = () => {\n this.hoverIntentTimeout = setTimeout(() => {\n this._openSubmenu();\n }, this.hoverIntentDelay);\n };\n _handleMouseLeave = () => {\n if (this.hoverIntentTimeout) {\n clearTimeout(this.hoverIntentTimeout);\n this._closeSubmenu();\n this.focus();\n }\n };\n _openSubmenu = () => {\n const { x, y, width, height } = this.getBoundingClientRect();\n if (this.isRtl) {\n this.boundaries = {\n x: [-x, x - width],\n y: [y, y + height],\n };\n } else {\n this.boundaries = {\n x: [x, x + width],\n y: [y, y + height],\n };\n }\n this.submenuOpen = true;\n };\n _registerSubMenuItems = () => {\n const observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'childList') {\n const submenuSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"submenu\"]'\n ) as HTMLSlotElement;\n\n const item = submenuSlot?.assignedElements?.()?.[0];\n if (item) {\n switch (item.tagName) {\n case 'CDS-MENU-ITEM-RADIO-GROUP':\n this.submenuEntry = item.querySelector(`${prefix}-menu-item`);\n break;\n case 'CDS-MENU-ITEM-GROUP': {\n const slotElements = item.shadowRoot\n ?.querySelector('slot')\n ?.assignedElements();\n const firstElement = slotElements?.length && slotElements[0];\n this.submenuEntry = firstElement;\n break;\n }\n case 'CDS-MENU-ITEM':\n this.submenuEntry = item;\n break;\n }\n }\n }\n }\n });\n observer.observe(this.shadowRoot as Node, {\n childList: true,\n subtree: true,\n });\n };\n _closeSubmenu = () => {\n this.boundaries = {\n x: -1,\n y: -1,\n };\n this.submenuOpen = false;\n (\n this.shadowRoot?.querySelector(`.${prefix}--menu-item`) as HTMLLIElement\n )?.focus();\n };\n _handleKeyDown = (e: KeyboardEvent) => {\n if (this.hasSubmenu && ['ArrowRight', 'Enter', ' '].includes(e.key)) {\n this._openSubmenu();\n setTimeout(() => {\n this.submenuEntry.focus();\n });\n e.stopPropagation();\n } else if (e.key === 'Enter' \|\| e.key === ' ') {\n this._handleClick(e);\n }\n };\n\n static styles = styles;\n}\nexport default CDSmenuItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,wBAAwB,GAAG,OAAO;;;;;;AAO/C,wBACM,oBAAoB,kBAAkB,kBAAkB,WAAW,CAAC,CAAC;;;0BAI7C;qBAMU;2BA2BlB;qBAMN;cAGP,eAAe;oBAQlB;GAAE,GAAG;GAAI,GAAG;GAAI;qBAGS,KAAK,aAAa,WAAW,IAAI;eAWtD;oBAKK;uBA+JG,MAAwC;AACtD,OAAI,KAAK,YAAY;AACnB,SAAK,cAAc;AACnB;;AAGF,OAAI,EAAE,SAAS,WAAW;AACxB,SAAK,OAAO;AACZ;;AAGF,QAAK,cACH,IAAI,YAAY,uBAAuB;IACrC,SAAS;IACT,UAAU;IACV,QAAQ,EACN,cAAc,GACf;IACF,CAAC,CACH;;iCAEuB;AACxB,QAAK,qBAAqB,iBAAiB;AACzC,SAAK,cAAc;MAClB,KAAK,iBAAiB;;iCAED;AACxB,OAAI,KAAK,oBAAoB;AAC3B,iBAAa,KAAK,mBAAmB;AACrC,SAAK,eAAe;AACpB,SAAK,OAAO;;;4BAGK;GACnB,MAAM,EAAE,GAAG,GAAG,OAAO,WAAW,KAAK,uBAAuB;AAC5D,OAAI,KAAK,MACP,MAAK,aAAa;IAChB,GAAG,CAAC,CAAC,GAAG,IAAI,MAAM;IAClB,GAAG,CAAC,GAAG,IAAI,OAAO;IACnB;OAED,MAAK,aAAa;IAChB,GAAG,CAAC,GAAG,IAAI,MAAM;IACjB,GAAG,CAAC,GAAG,IAAI,OAAO;IACnB;AAEH,QAAK,cAAc;;qCAES;AA8B5B,GA7BiB,IAAI,kBAAkB,kBAAkB;AACvD,SAAK,MAAM,YAAY,cACrB,KAAI,SAAS,SAAS,aAAa;KAKjC,MAAM,QAJc,KAAK,YAAY,cACnC,yBACD,GAEyB,oBAAoB,GAAG;AACjD,SAAI,KACF,SAAQ,KAAK,SAAb;MACE,KAAK;AACH,YAAK,eAAe,KAAK,cAAc,GAAG,OAAO,YAAY;AAC7D;MACF,KAAK,uBAAuB;OAC1B,MAAM,eAAe,KAAK,YACtB,cAAc,OAAO,EACrB,kBAAkB;AAEtB,YAAK,eADgB,cAAc,UAAU,aAAa;AAE1D;;MAEF,KAAK;AACH,YAAK,eAAe;AACpB;;;KAKV,CACO,QAAQ,KAAK,YAAoB;IACxC,WAAW;IACX,SAAS;IACV,CAAC;;6BAEkB;AACpB,QAAK,aAAa;IAChB,GAAG;IACH,GAAG;IACJ;AACD,QAAK,cAAc;AACnB,IACE,KAAK,YAAY,cAAc,IAAI,OAAO,aAAa,GACtD,OAAO;;yBAEM,MAAqB;AACrC,OAAI,KAAK,cAAc;IAAC;IAAc;IAAS;IAAI,CAAC,SAAS,EAAE,IAAI,EAAE;AACnE,SAAK,cAAc;AACnB,qBAAiB;AACf,UAAK,aAAa,OAAO;MACzB;AACF,MAAE,iBAAiB;cACV,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACxC,MAAK,aAAa,EAAE;;;CAlQxB,MAAM,qBAAqB;AAEzB,MADsB,CAAC,CAAC,KAAK,cAAc,yBAAuB,EAC/C;AACjB,SAAM;AACN,QAAK,cACH,IAAI,YAAY,eAAe;IAC7B,SAAS;IACT,UAAU;IACX,CAAC,CACH;;;CAIL,AAAQ,oBAAoB;AAC1B,MAAI,KAAK,YAAY,CAAC,KAAK,YAAY;AACrC,QAAK,aAAa,iBAAiB,KAAK,SAAS;AACjD,QAAK,aAAa,YAAY,KAAK;aAC1B,KAAK,eAAe,CAAE,KAAK,YAAwB,MAAM;AAClE,QAAK,gBAAgB,gBAAgB;AACrC,QAAK,aAAa,YAAY,KAAK;SAC9B;AACL,QAAK,gBAAgB,gBAAgB;AACrC,QAAK,aAAa,YAAY,IAAI;;AAEpC,MAAI,KAAK,WACP,MAAK,aAAa,iBAAiB,KAAK,aAAa,GAAG;MAExD,MAAK,gBAAgB,gBAAgB;AAEvC,MAAI,KAAK,QAAQ,GAAG,OAAO,wBAAwB,EAAE;AACnD,QAAK,aAAa,QAAQ,gBAAgB;AAC1C,QAAK,aAAa,gBAAgB,KAAK,cAAc,GAAG;aAC/C,CAAC,KAAK,aAAa,OAAO,CACnC,MAAK,aAAa,QAAQ,WAAW;;CAIzC,eAAe;AACb,OAAK,aAAa,CAAC,CAAC,KAAK,cAAc,qBAAmB;AAE1D,OAAK,oBAAoB;AACzB,OAAK,QAAQ,SAAS,QAAQ;AAC9B,OAAK,uBAAuB;AAC5B,OAAK,cAAc,KAAK,QAAQ,GAAG,OAAO,OAAO;AAEjD,OAAK,mBAAmB;AAExB,OAAK,iBAAiB,GAAG,OAAO,qBAAqB;AACnD,QAAK,OAAO;AACZ,QAAK,eAAe;IACpB;AAEF,MAAI,KAAK,aAAa;AACpB,QAAK,sBAAsB,IAAI,uBAAuB;AACpD,SAAK,mBAAmB;KACxB;AAEF,QAAK,oBAAoB,QAAQ,KAAK,aAAa;IACjD,YAAY;IACZ,iBAAiB,CAAC,OAAO;IAC1B,CAAC;;;CAIN,uBAAuB;AACrB,OAAK,qBAAqB,YAAY;;CAGxC,UAAgB;AACd,MAAI,KAAK,WACP,MAAK,aAAa,iBAAiB,KAAK,aAAa,GAAG;MAExD,MAAK,gBAAgB,gBAAgB;AAEvC,MAAI,KAAK,SAAS,eAAe,OAC/B,MAAK,UAAU,OAAO,GAAG,OAAO,qBAAqB;;CAGzD,AACA,YAAY,OAAmB;AAC7B,OAAK,aAAa,MAAM;;CAG1B,AACA,mBAAmB;AACjB,MAAI,KAAK,WACP,MAAK,mBAAmB;;CAI5B,AACA,mBAAmB;AACjB,MAAI,KAAK,WACP,MAAK,mBAAmB;;CAI5B,AACA,cAAc,OAAsB;AAClC,OAAK,eAAe,MAAM;;CAG5B,SAAS;EACP,MAAM,EACJ,OACA,UACA,aACA,YACA,OACA,MACA,sBACE;EAEJ,MAAM,WAAW,SAAS,eAAe,UAAU,CAAC,KAAK;EAEzD,MAAM,gBAAgB,KAAK,SAAS,qBAChC,GAAG,OAAO,iCACV;AAEJ,SAAO,IAAI;oBACK,OAAO;UACjB,KAAK,gBAAgB,SAAS,WAAW,YAAY,GAAG,OAAU;;;oBAGxD,OAAO;;;oBAGP,OAAO,sBAAsB,MAAM;QAC/C,WACE,IAAI,wCAAwC,OAAO;eAC9C,kBAAkB;eAEvB,IAAI,GAAG;QACT,YAAY,CAAC,KAAK,aAChB,IAAI,gBAAgB,OAAO,yBAAyB,SAAS,WAC7D,IAAI,GAAG;QACT,KAAK,aACH,IAAI;0BACY,OAAO;gBACjB,QAAQ,WAAW,YAAY,GAAG,WAAW,aAAa,CAAC;;;0BAGjD,cAAc;qBACnB,KAAK,eAAe,aAAa,OAAO,IAC/C,UAAU,MAAM;0BACJ,KAAK,WAAW;uBACnB,MAAM;uBACN,YAAY;oBACf,WAAW,EAAE;oBACb,WAAW,EAAE;;;cAIvB,IAAI,GAAG;;;;gBA6GCA;;;YAhVf,QAAQ,EAAE,SAAS,aAAa,CAAC;YAmBjC,SAAS,EAAE,MAAM,QAAQ,CAAC;YAK1B,SAAS,EAAE,MAAM,QAAQ,CAAC;YAK1B,SAAS,EAAE,MAAM,SAAS,CAAC;YAM3B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAsB,CAAC;YAM3D,SAAS,EAAE,MAAM,SAAS,CAAC;YAG3B,UAAU;YAKV,UAAU;YAMV,SAAS,EAAE,WAAW,gBAAgB,CAAC;YAMvC,OAAO;YAKP,OAAO;YAKP,OAAO;YAiFP,aAAa,SAAS,EAAE,SAAS,MAAM,CAAC;YAKxC,aAAa,aAAa;YAO1B,aAAa,aAAa;YAO1B,aAAa,UAAU;0BA7KzBC,cAAc,GAAG,OAAO,YAAY;AAoVrC,wBAAe"}
1	+ {"version":3,"file":"menu-item.js","names":["styles","customElement"],"sources":["../../../src/components/menu/menu-item.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, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './menu-item.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { consume } from '@lit/context';\nimport { MenuContext } from './menu-context';\nimport Checkmark16 from '@carbon/icons/es/checkmark/16.js';\nimport CaretLeft16 from '@carbon/icons/es/caret--left/16.js';\nimport CaretRight16 from '@carbon/icons/es/caret--right/16.js';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { MENU_ITEM_KIND, MENU_SIZE } from './defs';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport CDSMenu from './menu';\n\nexport { MENU_ITEM_KIND, MENU_SIZE };\nexport const MENU_CLOSE_ROOT_EVENT = `${prefix}-menu-close-root-request`;\n\n/\n Menu Item.\n \n @element cds-menu-item\n /\n@customElement(`${prefix}-menu-item`)\nclass CDSmenuItem extends HostListenerMixin(HostListenerMixin(LitElement)) {\n @consume({ context: MenuContext })\n context;\n\n readonly hoverIntentDelay = 150; // in ms\n hoverIntentTimeout;\n\n /\n The parent cds-menu element\n /\n private _parentMenu: CDSMenu \| null = null;\n\n /\n MutationObserver that observes the parent cds-menu element\n /\n private _parentMenuObserver?: MutationObserver;\n\n /\n Label for the menu item.\n /\n @property({ type: String })\n label;\n /\n Shortcut for the menu item.\n /\n @property({ type: String })\n shortcut;\n /\n Disabled property for the menu item.\n /\n @property({ type: Boolean })\n disabled;\n\n /\n Specify the message read by screen readers for the danger menu item variant\n /\n @property({ type: String, attribute: 'danger-description' })\n dangerDescription = 'danger';\n\n /\n Whether the menu submen for an item is open or not.\n /\n @property({ type: Boolean })\n submenuOpen = false;\n\n @property()\n kind = MENU_ITEM_KIND.DEFAULT;\n /\n Menu boundaries.\n /\n @property()\n boundaries: {\n x: number \| [number, number];\n y: number \| [number, number];\n } = { x: -1, y: -1 };\n\n @property({ attribute: 'aria-checked' })\n ariaChecked: string \| null = this.getAttribute('selected') ?? 'false';\n\n /\n Entrypoint.\n /\n @state()\n submenuEntry;\n /\n Checks if document direction is rtl.\n /\n @state()\n isRtl = false;\n /\n Checks if document direction is rtl.\n */\n @state()\n hasSubmenu = false;\n\n async dispatchIconDetect() {\n const hasRenderIcon = !!this.querySelector('[slot=\"render-icon\"]');\n if (hasRenderIcon) {\n await undefined; // this is used to replace setTimeout with 0 time out, which is much fater.\n this.dispatchEvent(\n new CustomEvent('icon-detect', {\n bubbles: true, // Allows event to bubble up the DOM\n composed: true, // Allows event to cross shadow DOM boundary\n })\n );\n }\n }\n\n private _updateAttributes() {\n if (this.disabled && !this.hasSubmenu) {\n this.setAttribute('aria-disabled', this.disabled);\n this.setAttribute('tabindex', '-1');\n } else if (this._parentMenu && !(this._parentMenu as CDSMenu).open) {\n this.removeAttribute('aria-disabled');\n this.setAttribute('tabindex', '-1');\n } else {\n this.removeAttribute('aria-disabled');\n this.setAttribute('tabindex', '0');\n }\n if (this.hasSubmenu) {\n this.setAttribute('aria-haspopup', this.hasSubmenu + '');\n } else {\n this.removeAttribute('aria-haspopup');\n }\n if (this.closest(`${prefix}-menu-item-radio-group`)) {\n this.setAttribute('role', 'menuitemradio');\n this.setAttribute('aria-checked', this.ariaChecked + '');\n } else if (!this.getAttribute('role')) {\n this.setAttribute('role', 'menuitem');\n }\n }\n\n firstUpdated() {\n this.hasSubmenu = !!this.querySelector('[slot=\"submenu\"]');\n\n this.dispatchIconDetect();\n this.isRtl = document.dir === 'rtl';\n this._registerSubMenuItems();\n this._parentMenu = this.closest(`${prefix}-menu`);\n\n this._updateAttributes();\n\n this.addEventListener(`${prefix}-menu-closed`, () => {\n this.focus();\n this._closeSubmenu();\n });\n\n if (this._parentMenu) {\n this._parentMenuObserver = new MutationObserver(() => {\n this._updateAttributes();\n });\n\n this._parentMenuObserver.observe(this._parentMenu, {\n attributes: true,\n attributeFilter: ['open'],\n });\n }\n }\n\n disconnectedCallback() {\n this._parentMenuObserver?.disconnect();\n }\n\n updated(): void {\n if (this.hasSubmenu) {\n this.setAttribute('aria-expanded', this.hasSubmenu + '');\n } else {\n this.removeAttribute('aria-expanded');\n }\n if (this.kind === MENU_ITEM_KIND.DANGER)\n this.classList.toggle(`${prefix}--menu-item--danger`);\n }\n\n @HostListener('click', { capture: true })\n handleClick(event: MouseEvent) {\n this._handleClick(event);\n }\n\n @HostListener('mouseenter')\n handleMouseEnter() {\n if (this.hasSubmenu) {\n this._handleMouseEnter();\n }\n }\n\n @HostListener('mouseleave')\n handleMouseLeave() {\n if (this.hasSubmenu) {\n this._handleMouseLeave();\n }\n }\n\n @HostListener('keydown')\n handleKeyDown(event: KeyboardEvent) {\n this._handleKeyDown(event);\n }\n\n render() {\n const {\n label,\n shortcut,\n submenuOpen,\n boundaries,\n isRtl,\n kind,\n dangerDescription,\n } = this;\n\n const isDanger = kind === MENU_ITEM_KIND.DANGER && !this.hasSubmenu;\n\n const menuClassName = this.context?.hasSelectableItems\n ? `${prefix}--menu--with-selectable-items`\n : '';\n\n return html`\n <div class=\"${prefix}--menu-item__selection-icon\">\n ${this.ariaChecked === 'true' ? iconLoader(Checkmark16) : undefined}\n </div>\n\n <div class=\"${prefix}--menu-item__icon\">\n <slot name=\"render-icon\"></slot>\n </div>\n <div class=\"${prefix}--menu-item__label\">${label}</div>\n ${isDanger\n ? html`<span id=\"danger-description\" class=\"${prefix}--visually-hidden\"\n >${dangerDescription}</span\n >`\n : html``}\n ${shortcut && !this.hasSubmenu\n ? html` <div class=\"${prefix}--menu-item__shortcut\">${shortcut}</div> `\n : html``}\n ${this.hasSubmenu\n ? html`\n <div class=\"${prefix}--menu-item__shortcut\">\n ${isRtl ? iconLoader(CaretLeft16) : iconLoader(CaretRight16)}\n </div>\n <cds-menu\n className=${menuClassName}\n size=${this.parentElement?.getAttribute('size') ??\n MENU_SIZE.LARGE}\n ?isChild=\"${this.hasSubmenu}\"\n label=\"${label}\"\n .open=\"${submenuOpen}\"\n .x=\"${boundaries.x}\"\n .y=\"${boundaries.y}\">\n <slot name=\"submenu\"></slot>\n </cds-menu>\n `\n : html``}\n `;\n }\n\n _handleClick = (e: MouseEvent \| KeyboardEvent): void => {\n if (this.hasSubmenu) {\n this._openSubmenu();\n return;\n }\n\n if (e.type === 'keydown') {\n this.click();\n return;\n }\n\n this.dispatchEvent(\n new CustomEvent(MENU_CLOSE_ROOT_EVENT, {\n bubbles: true,\n composed: true,\n detail: {\n triggerEvent: e,\n },\n })\n );\n };\n _handleMouseEnter = () => {\n this.hoverIntentTimeout = setTimeout(() => {\n this._openSubmenu();\n }, this.hoverIntentDelay);\n };\n _handleMouseLeave = () => {\n if (this.hoverIntentTimeout) {\n clearTimeout(this.hoverIntentTimeout);\n this._closeSubmenu();\n this.focus();\n }\n };\n _openSubmenu = () => {\n const { x, y, width, height } = this.getBoundingClientRect();\n if (this.isRtl) {\n this.boundaries = {\n x: [-x, x - width],\n y: [y, y + height],\n };\n } else {\n this.boundaries = {\n x: [x, x + width],\n y: [y, y + height],\n };\n }\n this.submenuOpen = true;\n };\n _registerSubMenuItems = () => {\n const observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'childList') {\n const submenuSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"submenu\"]'\n ) as HTMLSlotElement;\n\n const item = submenuSlot?.assignedElements?.()?.[0];\n if (item) {\n switch (item.tagName) {\n case 'CDS-MENU-ITEM-RADIO-GROUP':\n this.submenuEntry = item.querySelector(`${prefix}-menu-item`);\n break;\n case 'CDS-MENU-ITEM-GROUP': {\n const slotElements = item.shadowRoot\n ?.querySelector('slot')\n ?.assignedElements();\n const firstElement = slotElements?.length && slotElements[0];\n this.submenuEntry = firstElement;\n break;\n }\n case 'CDS-MENU-ITEM':\n this.submenuEntry = item;\n break;\n }\n }\n }\n }\n });\n observer.observe(this.shadowRoot as Node, {\n childList: true,\n subtree: true,\n });\n };\n _closeSubmenu = () => {\n this.boundaries = {\n x: -1,\n y: -1,\n };\n this.submenuOpen = false;\n (\n this.shadowRoot?.querySelector(`.${prefix}--menu-item`) as HTMLLIElement\n )?.focus();\n };\n _handleKeyDown = (e: KeyboardEvent) => {\n if (this.hasSubmenu && ['ArrowRight', 'Enter', ' '].includes(e.key)) {\n this._openSubmenu();\n setTimeout(() => {\n this.submenuEntry.focus();\n });\n e.stopPropagation();\n } else if (e.key === 'Enter' \|\| e.key === ' ') {\n this._handleClick(e);\n }\n };\n\n static styles = styles;\n}\nexport default CDSmenuItem;\n"],"mappings":"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"}

package/es/components/menu/menu-item.scss.js CHANGED Viewed

@@ -6,10 +6,9 @@
  */
 import { css } from "lit";
 //#region src/components/menu/menu-item.scss?lit
 var menu_item_default = css(["@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--assistive-text,.cds--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.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--menu{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--menu *,.cds--menu :after,.cds--menu :before{box-sizing:inherit}.cds--menu{background-color:var(--cds-layer);box-shadow:0 2px 6px var(--cds-shadow,rgba(0,0,0,.3));max-inline-size:18rem;min-inline-size:10rem;opacity:0;overflow-y:auto;padding:.25rem 0;position:fixed;visibility:hidden;z-index:9000}.cds--menu--border{outline:1px solid var(--cds-border-subtle)}.cds--menu--background-token__background{background-color:var(--cds-background,#fff)}.cds--menu--with-icons{min-inline-size:12rem}.cds--menu--open{visibility:visible}.cds--menu--open:focus{outline:1px solid var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds--menu--open:focus{outline-style:dotted}}.cds--menu:not(.cds--menu--open) .cds--menu--open{visibility:hidden}.cds--menu--shown{opacity:1;overflow:visible}.cds--menu-item{align-items:center;block-size:2rem;color:var(--cds-text-secondary,#525252);-moz-column-gap:.5rem;column-gap:.5rem;cursor:pointer;display:grid;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);grid-template-columns:1fr max-content;letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);line-height:var(--cds-body-short-01-line-height,1.28572);padding-inline:1rem;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}.cds--menu-item:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--menu-item:focus{outline-style:dotted}}.cds--menu-item:hover{background-color:var(--cds-layer-hover);color:var(--cds-text-primary,#161616)}.cds--menu--xs .cds--menu-item{block-size:1.5rem}.cds--menu--sm .cds--menu-item{block-size:2rem}.cds--menu--md .cds--menu-item{block-size:2.5rem}.cds--menu--lg .cds--menu-item{block-size:3rem}.cds--menu-item-group>ul,.cds--menu-item-radio-group>ul{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--menu-item-group>ul *,.cds--menu-item-group>ul :after,.cds--menu-item-group>ul :before,.cds--menu-item-radio-group>ul *,.cds--menu-item-radio-group>ul :after,.cds--menu-item-radio-group>ul :before{box-sizing:inherit}.cds--menu--with-icons>.cds--menu-item,.cds--menu--with-icons>.cds--menu-item-group>ul>.cds--menu-item,.cds--menu--with-icons>.cds--menu-item-radio-group>ul>.cds--menu-item,.cds--menu--with-selectable-items>.cds--menu-item,.cds--menu--with-selectable-items>.cds--menu-item-group>ul>.cds--menu-item,.cds--menu--with-selectable-items>.cds--menu-item-radio-group>ul>.cds--menu-item{grid-template-columns:1rem 1fr max-content}.cds--menu--with-icons>.cds--menu-item-group>ul>.cds--menu-item>.cds--menu-item__icon,.cds--menu--with-icons>.cds--menu-item-radio-group>ul>.cds--menu-item>.cds--menu-item__icon,.cds--menu--with-icons>.cds--menu-item>.cds--menu-item__icon,.cds--menu--with-selectable-items>.cds--menu-item-group>ul>.cds--menu-item>.cds--menu-item__selection-icon,.cds--menu--with-selectable-items>.cds--menu-item-radio-group>ul>.cds--menu-item>.cds--menu-item__selection-icon,.cds--menu--with-selectable-items>.cds--menu-item>.cds--menu-item__selection-icon{display:flex}.cds--menu--with-icons.cds--menu--with-selectable-items>.cds--menu-item,.cds--menu--with-icons.cds--menu--with-selectable-items>.cds--menu-item-group>ul>.cds--menu-item,.cds--menu--with-icons.cds--menu--with-selectable-items>.cds--menu-item-radio-group>ul>.cds--menu-item{grid-template-columns:1rem 1rem 1fr max-content}.cds--menu-item--disabled{color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed}.cds--menu-item--disabled.cds--menu-item--danger:hover,.cds--menu-item--disabled:hover{background-color:var(--cds-layer);color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--menu-item--danger:focus,.cds--menu-item--danger:hover{background-color:var(--cds-button-danger-primary,#da1e28);color:var(--cds-text-on-color,#fff)}.cds--menu-item-divider,:host(cds-menu-item-divider){background-color:var(--cds-border-subtle);block-size:.0625rem;display:block;inline-size:100%;margin-block:.25rem}:host(cds-menu-item){align-items:center;block-size:2rem;color:var(--cds-text-secondary,#525252);-moz-column-gap:.5rem;column-gap:.5rem;cursor:pointer;display:grid;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);grid-template-columns:1fr max-content;letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);line-height:var(--cds-body-short-01-line-height,1.28572);padding-inline:1rem;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}:host(cds-menu-item) svg{color:var(--cds-icon-secondary,#525252)}:host(cds-menu-item:focus){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-menu-item:focus){outline-style:dotted}}:host(cds-menu-item:hover){background-color:var(--cds-layer-hover);color:var(--cds-text-primary,#161616)}:host(cds-menu-item:hover) svg{color:var(--cds-icon-primary,#161616)}:host(cds-menu-item-group)>ul,:host(cds-menu-item-radio-group)>ul{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}:host(cds-menu-item-group)>ul *,:host(cds-menu-item-group)>ul :after,:host(cds-menu-item-group)>ul :before,:host(cds-menu-item-radio-group)>ul *,:host(cds-menu-item-radio-group)>ul :after,:host(cds-menu-item-radio-group)>ul :before{box-sizing:inherit}.cds--menu-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cds--menu-item__shortcut{display:flex}.cds--menu-item__icon{display:var(--child-icon-property,none)}:host([aria-disabled=true]) *{color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed}:host([aria-disabled=true].cds--menu-item--danger:hover),:host([aria-disabled=true]:hover){background-color:var(--cds-layer);color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}:host(.cds--menu-item--danger:focus),:host(.cds--menu-item--danger:hover){background-color:var(--cds-button-danger-primary,#da1e28);color:var(--cds-text-on-color,#fff)}.cds--menu-item__icon,.cds--menu-item__selection-icon{display:none}:host(cds-menu-item){block-size:var(--block-size-value);grid-template-columns:var(--grid-template)}:host(cds-menu-item) .cds--menu-item__icon{display:var(--display-icon-item)}.cds--menu-item__selection-icon{display:var(--display-selection-icon)}span[slot=render-icon]{display:flex}"]);
 //#endregion
 export { menu_item_default as default };
 //# sourceMappingURL=menu-item.scss.js.map

package/es/components/menu/menu.js CHANGED Viewed

@@ -5,20 +5,19 @@
  * 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 HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import menu_default$1 from "./menu.scss.js";
 import { MenuContext, menuDefaultState } from "./menu-context.js";
-import { MENU_BACKGROUND_TOKEN, MENU_SIZE } from "./defs.js";
+import { MENU_SIZE } from "./defs.js";
 import { MENU_CLOSE_ROOT_EVENT } from "./menu-item.js";
 import { LitElement, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { consume, provide } from "@lit/context";
 //#region src/components/menu/menu.ts
 /**
 * Copyright IBM Corp. 2024, 2026
@@ -47,8 +46,8 @@ let CDSMenu = class CDSMenu extends HostListenerMixin(LitElement) {
 		this.direction = "ltr";
 		this.open = true;
 		this.position = [-1, -1];
-		this.size = MENU_SIZE.SMALL;
-		this.backgroundToken = MENU_BACKGROUND_TOKEN.LAYER;
+		this.size = "sm";
+		this.backgroundToken = "layer";
 		this.border = false;
 		this.x = 0;
 		this.y = 0;
@@ -94,7 +93,7 @@ let CDSMenu = class CDSMenu extends HostListenerMixin(LitElement) {
 		};
 		this._fitValue = (range, axis) => {
 			const { isRoot } = this.context;
-			const { width, height } = (this.shadowRoot?.querySelector(`.${prefix}--menu`) ?? this).getBoundingClientRect();
+			const { width, height } = (this.shadowRoot?.querySelector(`.cds--menu`) ?? this).getBoundingClientRect();
 			const alignment = isRoot ? "vertical" : "horizontal";
 			const axes = {
 				x: {
@@ -209,7 +208,7 @@ let CDSMenu = class CDSMenu extends HostListenerMixin(LitElement) {
 				let activeItem;
 				switch (item.tagName) {
 					case "CDS-MENU-ITEM-RADIO-GROUP": {
-						const slotElements = item.querySelectorAll(`${prefix}-menu-item`);
+						const slotElements = item.querySelectorAll(`cds-menu-item`);
 						if (slotElements?.length) for (const entry of slotElements.entries()) {
 							activeItem = {
 								item: entry[1],
@@ -230,7 +229,7 @@ let CDSMenu = class CDSMenu extends HostListenerMixin(LitElement) {
 						break;
 					case "CDS-MENU-ITEM-SELECTABLE":
 						activeItem = {
-							item: item.shadowRoot?.querySelector(`${prefix}-menu-item`),
+							item: item.shadowRoot?.querySelector(`cds-menu-item`),
 							parent: item
 						};
 						this.activeitems = [...this.activeitems, activeItem];
@@ -250,13 +249,13 @@ let CDSMenu = class CDSMenu extends HostListenerMixin(LitElement) {
 	* The name of the custom event fired when the the Menu should be closed.
 	*/
 	static get eventOnClose() {
-		return `${prefix}-menu-closed`;
+		return `cds-menu-closed`;
 	}
 	/**
 	* The name of the custom event fired when the the Menu should be opened.
 	*/
 	static get eventOnOpen() {
-		return `${prefix}-menu-opened`;
+		return `cds-menu-opened`;
 	}
 	updated(changedProperties) {
 		if (changedProperties.has("open")) if (this.open) this._handleOpen();
@@ -265,7 +264,7 @@ let CDSMenu = class CDSMenu extends HostListenerMixin(LitElement) {
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener("icon-detect", () => {
-			this.shadowRoot?.querySelector(".cds--menu")?.classList.add(`${prefix}--menu--with-icons`);
+			this.shadowRoot?.querySelector(".cds--menu")?.classList.add(`cds--menu--with-icons`);
 		});
 		this.addEventListener(MENU_CLOSE_ROOT_EVENT, this._handleRootCloseRequest);
 	}
@@ -290,14 +289,14 @@ let CDSMenu = class CDSMenu extends HostListenerMixin(LitElement) {
 		return html`
       <ul
         class="${classMap({
-			[`${prefix}--menu`]: true,
-			[`${prefix}--menu--${this.size}`]: this.size,
-			[`${prefix}--menu--box-shadow-top`]: menuAlignment && menuAlignment.slice(0, 3) === "top",
-			[`${prefix}--menu--open`]: open,
-			[`${prefix}--menu--shown`]: position[0] >= 0 && position[1] >= 0,
-			[`${prefix}--menu--with-selectable-items`]: this.context.hasSelectableItems,
-			[`${prefix}--menu--border`]: this.border,
-			[`${prefix}--menu--background-token__background`]: this.backgroundToken === MENU_BACKGROUND_TOKEN.BACKGROUND
+			[`cds--menu`]: true,
+			[`cds--menu--${this.size}`]: this.size,
+			[`cds--menu--box-shadow-top`]: menuAlignment && menuAlignment.slice(0, 3) === "top",
+			[`cds--menu--open`]: open,
+			[`cds--menu--shown`]: position[0] >= 0 && position[1] >= 0,
+			[`cds--menu--with-selectable-items`]: this.context.hasSelectableItems,
+			[`cds--menu--border`]: this.border,
+			[`cds--menu--background-token__background`]: this.backgroundToken === "background"
 		})}"
         aria-label="${label}"
         tabindex="-1"
@@ -337,9 +336,9 @@ __decorate([property({ type: String })], CDSMenu.prototype, "menuAlignment", voi
 __decorate([property()], CDSMenu.prototype, "x", void 0);
 __decorate([property()], CDSMenu.prototype, "y", void 0);
 __decorate([HostListener("focusout")], CDSMenu.prototype, "_handleBlur", void 0);
-CDSMenu = __decorate([carbonElement(`${prefix}-menu`)], CDSMenu);
+CDSMenu = __decorate([carbonElement(`cds-menu`)], CDSMenu);
 var menu_default = CDSMenu;
 //#endregion
 export { MENU_SIZE, menu_default as default };
 //# sourceMappingURL=menu.js.map