@fabric-msft/copilot-web 7.0.0

package/esm/components/contextual-menu/contextual-menu.definition.js

@@ -0,0 +1,21 @@
+import { ContextualMenu } from './contextual-menu.js';
+import { styles } from './contextual-menu.styles.js';
+import { template } from './contextual-menu.template.js';
+import { DesignSystem } from '../design-system.js';
+
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fabric-contextual-menu>
+ */
+const definition = ContextualMenu.compose({
+  name: `${DesignSystem.prefix}-contextual-menu`,
+  template,
+  styles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
+
+export { definition };

package/esm/components/contextual-menu/contextual-menu.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextual-menu.definition.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu/contextual-menu.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IAC/C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,kBAAkB;IAC9C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/contextual-menu/contextual-menu.js

@@ -0,0 +1,134 @@
+import { __decorate } from 'tslib';
+import { attr, observable, FASTElement } from '@microsoft/fast-element';
+import { ContextualMenuList } from '../contextual-menu-list/contextual-menu-list.js';
+
+/**
+ * ContextualMenu
+ * @summary A contextual menu container that can be toggled open/closed and manages a collection of menu lists. Provides keyboard navigation support and event handling for menu interactions.
+ *
+ * @example
+ * ```html
+ * <fabric-contextual-menu open>
+ *   <fabric-contextual-menu-list>
+ *     <fabric-contextual-menu-item>Menu Item 1</fabric-contextual-menu-item>
+ *     <fabric-contextual-menu-item>Menu Item 2</fabric-contextual-menu-item>
+ *   </fabric-contextual-menu-list>
+ * </fabric-contextual-menu>
+ * ```
+ *
+ * @attr {boolean} open - Controls the visibility of the menu. When true, the menu is visible
+ *
+ * @prop {boolean} open - Controls whether the menu is visible
+ * @prop {ContextualMenuList[]} menulists - The collection of `ContextualMenuList` elements within this menu. Used to manage and filter menu lists.
+ *
+ * @slot - Default slot for menu content
+ *
+ * @csspart menu - The menu container
+ *
+ * @method show - Shows the menu
+ * @method hide - Hides the menu
+ * @method toggle - Toggles the menu's open state
+ * @method handleKeydown - Handles keyboard events for the menu
+ * @method openChanged - Handles changes to the open state and dispatches a toggle event
+ * @method menulistsChanged - Handles changes to the menulists property, filtering the list to include only valid ContextualMenuList items
+ *
+ * @fires toggle - Fires when the menu's open state changes
+ * @fires close - Fires when the menu is closed, includes the reason for closing
+ *
+ * @extends FASTElement
+ * @tagname fabric-contextual-menu
+ * @public
+ */
+class ContextualMenu extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * Controls whether the menu is visible
+     * @public
+     * @defaultValue false
+     */
+    this.open = false;
+    /**
+     * The collection of `ContextualMenuList` elements within this menu.
+     * Used to manage and filter menu lists.
+     * @public
+     * @defaultValue []
+     */
+    this.menulists = [];
+    /**
+     * Handles keyboard events for the menu
+     * @param e - Keyboard event
+     * @private
+     */
+    this.handleKeydown = e => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        e.preventDefault();
+        this.hide();
+        this.dispatchEvent(new CustomEvent("close", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            reason: "escape"
+          }
+        }));
+      } else {
+        return true;
+      }
+    };
+  }
+  /**
+   * Handles changes to the open state and dispatches a toggle event
+   * @param oldValue - Previous open state
+   * @param newValue - New open state
+   * @internal
+   */
+  openChanged(oldValue, newValue) {
+    if (newValue !== oldValue) {
+      this.dispatchEvent(new CustomEvent("toggle", {
+        detail: {
+          open: newValue
+        },
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+  /**
+   * Handles changes to the `menulists` property, filtering the list to include only valid `ContextualMenuList` items.
+   * This ensures that only proper menulist elements are included in the menu's collection.
+   *
+   * @param oldValue - The previous value of the `menulists` property
+   * @param newValue - The new value of the `menulists` property
+   * @internal
+   */
+  menulistsChanged(_oldValue, newValue) {
+    const filteredList = newValue.filter(item => item instanceof ContextualMenuList);
+    if (filteredList.length !== this.menulists.length || !filteredList.every((item, index) => item === this.menulists[index])) {
+      this.menulists = filteredList;
+    }
+  }
+  show() {
+    this.open = true;
+  }
+  /**
+   * Hides/closes the menu
+   * @public
+   */
+  hide() {
+    this.open = false;
+  }
+  /**
+   * Toggles the menu's open state
+   * @public
+   */
+  toggle() {
+    this.open = !this.open;
+  }
+}
+__decorate([attr({
+  mode: "boolean"
+})], ContextualMenu.prototype, "open", void 0);
+__decorate([observable], ContextualMenu.prototype, "menulists", void 0);
+
+export { ContextualMenu };

package/esm/components/contextual-menu/contextual-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextual-menu.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu/contextual-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAA/C;;QACE;;;;WAIG;QAEH,SAAI,GAAY,KAAK,CAAC;QAEtB;;;;;WAKG;QAEI,cAAS,GAAyB,EAAE,CAAC;QA4C5C;;;;WAIG;QACI,kBAAa,GAAG,CAAC,CAAgB,EAAkB,EAAE;YAC1D,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,EAAE,CAAC;gBACZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE;oBACvB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;iBAC7B,CAAC,CACH,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,OAAO,IAAI,CAAC;YACd,CAAC;QACH,CAAC,CAAC;IAqBJ,CAAC;IAnFC;;;;;OAKG;IACI,WAAW,CAAC,QAAiB,EAAE,QAAiB;QACrD,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;gBAC1B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAED;;;;;;;OAOG;IACI,gBAAgB,CACrB,SAA+B,EAC/B,QAA8B;QAE9B,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAClC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,YAAY,kBAAkB,CAC7C,CAAC;QAEF,IACE,YAAY,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM;YAC7C,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EACpE,CAAC;YACD,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;QAChC,CAAC;IACH,CAAC;IAwBM,IAAI;QACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED;;;OAGG;IACI,IAAI;QACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED;;;OAGG;IACI,MAAM;QACX,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;CACF;AA9FC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACJ;AASf;IADN,UAAU;iDACiC"}

package/esm/components/contextual-menu/contextual-menu.options.js

@@ -0,0 +1,9 @@
+/**
+ * ContextualMenu event names
+ * @public
+ */
+const ContextualMenuEventNames = {
+  close: "close"
+};
+
+export { ContextualMenuEventNames };

package/esm/components/contextual-menu/contextual-menu.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextual-menu.options.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu/contextual-menu.options.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,KAAK,EAAE,OAAO;CACN,CAAC"}

package/esm/components/contextual-menu/contextual-menu.styles.js

@@ -0,0 +1,10 @@
+import { shadow4, borderRadiusMedium } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+
+const styles = css`
+  ${display("none")}
+
+  :host([open]){box-shadow:${shadow4};display:block}:host{border-radius:var(--menu-border-radius,${borderRadiusMedium})}`;
+
+export { styles };

package/esm/components/contextual-menu/contextual-menu.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextual-menu.styles.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu/contextual-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;kBAGD,OAAO;;;;;+CAKsB,kBAAkB;;CAEhE,CAAC"}

package/esm/components/contextual-menu/contextual-menu.template.js

@@ -0,0 +1,12 @@
+import { slotted, html } from '@microsoft/fast-element';
+
+/**
+ * The template for the {@link @fabric-msft/copilot-web#(ContextualMenu:class)} component.
+ * @public
+ */
+function contextualMenuTemplate() {
+  return html`<template ?open="${x => x.open}" @keydown="${(x, c) => x.handleKeydown(c.event)}" aria-label="${x => x.ariaLabel}" aria-expanded="${x => x.open ? "true" : "false"}"><slot name="start"></slot><slot ${slotted("menulists")}></slot><slot name="end"></slot></template>`;
+}
+const template = contextualMenuTemplate();
+
+export { contextualMenuTemplate, template };

package/esm/components/contextual-menu/contextual-menu.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextual-menu.template.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu/contextual-menu.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAIxD;;;GAGG;AACH,MAAM,UAAU,sBAAsB;IAGpC,OAAO,IAAI,CAAG;;eAED,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;kBACV,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAsB,CAAC;oBACjD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;uBACf,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;;;cAG3C,OAAO,CAAC,WAAW,CAAC;;;GAG/B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GACnB,sBAAsB,EAAE,CAAC"}

package/esm/components/contextual-menu/define.js

@@ -0,0 +1,4 @@
+import { DesignSystem } from "../design-system.js";
+import { definition as ContextualMenuDefinition } from "./contextual-menu.definition.js";
+ContextualMenuDefinition.define(DesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/esm/components/contextual-menu/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AACzF,wBAAwB,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/contextual-menu/index.js

@@ -0,0 +1,6 @@
+export { ContextualMenu } from "./contextual-menu.js";
+export { ContextualMenuEventNames } from "./contextual-menu.options.js";
+export { definition as ContextualMenuDefinition } from "./contextual-menu.definition.js";
+export { styles as ContextualMenuStyles } from "./contextual-menu.styles.js";
+export { template as ContextualMenuTemplate } from "./contextual-menu.template.js";
+//# sourceMappingURL=index.js.map

package/esm/components/contextual-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AACzF,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/esm/components/contextual-menu-item/contextual-menu-item.definition.js

@@ -0,0 +1,22 @@
+import { ContextualMenuItem } from './contextual-menu-item.js';
+import { styles } from './contextual-menu-item.styles.js';
+import { template } from './contextual-menu-item.template.js';
+import { DesignSystem } from '../design-system.js';
+
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fabric-contextual-menu-item>
+ */
+const definition = ContextualMenuItem.compose({
+  name: `${DesignSystem.prefix}-contextual-menu-item`,
+  template,
+  styles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
+definition.define(DesignSystem.registry);
+
+export { definition };

package/esm/components/contextual-menu-item/contextual-menu-item.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextual-menu-item.definition.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu-item/contextual-menu-item.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,OAAO,CAAC;IACnD,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,uBAAuB;IACnD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC;AAEH,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/contextual-menu-item/contextual-menu-item.js

@@ -0,0 +1,212 @@
+import { __decorate } from 'tslib';
+import { observable, attr, FASTElement } from '@microsoft/fast-element';
+import { keyEscape, keySpace, keyEnter } from '@microsoft/fast-web-utilities';
+import { ContextualMenuItemEventNames } from './contextual-menu-item.options.js';
+
+/**
+ * ContextualMenuItem
+ * @summary A selectable option component used to emit prompt events in the ContextualMenuList component. Provides keyboard navigation, filtering support, and accessibility features for menu interactions.
+ *
+ * @example
+ * ```html
+ * <fabric-contextual-menu-list>
+ *   <fabric-contextual-menu-item prompt="Option 1">
+ *     <span slot="start">Start Content</span>
+ *     Option 1
+ *     <span slot="end">End Content</span>
+ *   </fabric-contextual-menu-item>
+ * </fabric-contextual-menu-list>
+ * ```
+ *
+ * @attr {boolean} disabled - Whether the option is disabled
+ * @attr {boolean} hidden - Whether the option is hidden from view
+ * @attr {string} prompt - The value associated with the option
+ *
+ * @prop {string} mainText - The main text content used for filtering and search functionality
+ * @prop {Node[]} slottedPrompt - The nodes from the default slot that contain the option's content
+ * @prop {string} prompt - The value representing the prompt's content
+ * @prop {boolean} disabled - Controls disabled state of the option
+ * @prop {boolean} hidden - Controls visibility of the option
+ *
+ * @slot - Default slot for option content
+ * @slot start - Content to display before the main content
+ * @slot end - Content to display after the main content
+ * @slot icon - Icon content for the option
+ * @slot subtitle - Subtitle content for the option
+ *
+ * @csspart content - Styles the main content container
+ * @csspart start - Styles the start content container
+ * @csspart end - Styles the end content container
+ * @csspart icon - Styles the icon container
+ * @csspart subtitle - Styles the subtitle container
+ * @csspart header - Styles the header container
+ *
+ * @method handleKeyDown - Handles keyboard events for selection and dismissal
+ * @method handleClick - Handles click events on the component
+ * @method show - Shows the option by setting hidden to false
+ * @method hide - Hides the option by setting hidden to true
+ * @method slottedPromptChanged - Handles changes to the default slot content
+ * @method updateTextContent - Updates the mainText property by extracting and normalizing text content from slotted nodes
+ * @method emitDismiss - Emits a custom dismiss event
+ * @method emitSelectEvent - Emits a custom select event with the current prompt value
+ *
+ * @fires select - Fires when the option is selected. Event bubbles and is composed
+ * @fires dismiss - Fires when the option is dismissed. Event bubbles and is composed
+ *
+ * @extends FASTElement
+ * @tagname fabric-contextual-menu-item
+ * @public
+ */
+class ContextualMenuItem extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * The main text content used for filtering and search functionality.
+     * This is derived from the slotted content and converted to lowercase for consistent matching.
+     * @type {string}
+     * @observable
+     */
+    this.mainText = "";
+    /**
+     * The value representing the prompt's content. If not explicitly set,
+     * it will be automatically derived from the slotted content when the component connects.
+     * This value is emitted in the select event when the option is selected.
+     * @type {string}
+     * @public
+     */
+    this.prompt = "";
+    /**
+     * Controls disabled state of the option.
+     * @type {boolean}
+     * @attr
+     * @public
+     */
+    this.disabled = false;
+    /**
+     * Controls visibility of the option.
+     * @type {boolean}
+     * @attr
+     * @public
+     */
+    this.hidden = false;
+    /**
+     * Emits a custom "select" event with the current prompt value.
+     * @fires select - Contains the prompt value in the detail, bubbles and is composed
+     * @internal
+     */
+    this.emitSelectEvent = () => {
+      this.dispatchEvent(new CustomEvent(ContextualMenuItemEventNames.select, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          prompt: this.prompt
+        }
+      }));
+    };
+  }
+  /**
+   * Handles changes to the default slot content.
+   * Updates the mainText for filtering and optionally sets the prompt value if not explicitly defined.
+   * This method is called automatically when the slotted content changes.
+   *
+   * @param prev - Previous slotted nodes
+   * @param next - New slotted nodes
+   * @internal
+   */
+  slottedPromptChanged(_prev, next) {
+    var _a;
+    if (!this.slottedPrompt) {
+      this.slottedPrompt = [];
+      return;
+    }
+    this.updateTextContent();
+    if (this.$fastController.isConnected && !this.prompt) {
+      const textContent = (_a = next === null || next === void 0 ? void 0 : next.map(node => node.textContent).join("")) !== null && _a !== void 0 ? _a : "";
+      this.prompt = textContent.trim();
+    }
+  }
+  /**
+   * Updates the mainText property by extracting and normalizing text content from slotted nodes.
+   * The mainText is used for filtering in search functionality and is always lowercase for consistent matching.
+   * @internal
+   */
+  updateTextContent() {
+    const nodes = this.slottedPrompt || [];
+    this.mainText = nodes.filter(node => node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE).map(node => {
+      var _a;
+      return ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || "";
+    }).join(" ").toLowerCase();
+  }
+  /**
+   * Handles keyboard events.
+   * Supports Enter, Space for selection and Escape for dismissal.
+   *
+   * @param {KeyboardEvent} e - The keyboard event
+   * @returns {void | boolean} Returns true if the event was handled, void otherwise
+   * @public
+   */
+  handleKeyDown(e) {
+    if (e.defaultPrevented || this.disabled) {
+      return;
+    }
+    switch (e.key) {
+      case keyEnter:
+      case keySpace:
+        e.preventDefault();
+        this.emitSelectEvent();
+        break;
+      case keyEscape:
+        this.emitDismiss();
+        break;
+    }
+    return true;
+  }
+  /**
+   * Handles click events on the component.
+   * Emits prompt if not disabled.
+   * @public
+   */
+  handleClick() {
+    if (this.disabled) {
+      return;
+    } else {
+      this.emitSelectEvent();
+    }
+  }
+  /**
+   * Emits a custom "dismiss" event.
+   * @fires dismiss - Contains no detail, but bubbles and is composed
+   * @internal
+   */
+  emitDismiss() {
+    this.dispatchEvent(new CustomEvent(ContextualMenuItemEventNames.dismiss, {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /**
+   * Shows the option by setting hidden to false.
+   * @public
+   */
+  show() {
+    this.hidden = false;
+  }
+  /**
+   * Hides the option by setting hidden to true.
+   * @public
+   */
+  hide() {
+    this.hidden = true;
+  }
+}
+__decorate([observable], ContextualMenuItem.prototype, "mainText", void 0);
+__decorate([observable], ContextualMenuItem.prototype, "slottedPrompt", void 0);
+__decorate([attr], ContextualMenuItem.prototype, "prompt", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], ContextualMenuItem.prototype, "disabled", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], ContextualMenuItem.prototype, "hidden", void 0);
+
+export { ContextualMenuItem };

package/esm/components/contextual-menu-item/contextual-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextual-menu-item.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu-item/contextual-menu-item.ts"],"names":[],"mappings":"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"}

package/esm/components/contextual-menu-item/contextual-menu-item.options.js

@@ -0,0 +1,14 @@
+/**
+ * Contextual Option roles.
+ * @public
+ */
+/**
+ * @public
+ * ContextualMenuItem event names
+ */
+const ContextualMenuItemEventNames = {
+  dismiss: "dismiss",
+  select: "select"
+};
+
+export { ContextualMenuItemEventNames };

package/esm/components/contextual-menu-item/contextual-menu-item.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextual-menu-item.options.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu-item/contextual-menu-item.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC"}

package/esm/components/contextual-menu-item/contextual-menu-item.styles.js

@@ -0,0 +1,15 @@
+import { css } from '@microsoft/fast-element';
+import { colorNeutralForeground2, spacingVerticalSNudge, spacingHorizontalMNudge, spacingHorizontalXS, colorNeutralBackground1, typographyBody1StrongStyles, borderRadiusMedium, colorNeutralBackgroundDisabled, colorNeutralForegroundDisabled, typographyCaption2StrongStyles, colorNeutralBackground1Hover, colorNeutralForeground2Hover, colorNeutralBackground1Selected, colorNeutralForeground2Pressed, colorCompoundBrandForeground1Pressed, spacingHorizontalM, colorNeutralForeground3, fontWeightRegular, fontSizeBase200, lineHeightBase200, fontFamilyBase, display, forcedColorsStylesheetBehavior } from '@fluentui/web-components';
+import { disabledState } from '@fabric-msft/fabric-web';
+
+/** MenuItem styles
+ * @public
+ */
+const styles = css`
+  ${display("flex")}
+
+  :host{align-items:center;color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;overflow:visible;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};gap:${spacingHorizontalXS};background:${colorNeutralBackground1};${typographyBody1StrongStyles};border-radius:var(--menu-item-border-radius,${borderRadiusMedium})}:host([disabled]),:host([disabled]):hover{background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host::part(subtitle){${typographyCaption2StrongStyles}}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot="start"]){color:${colorCompoundBrandForeground1Pressed}}.content{white-space:nowrap;flex-grow:1;display:flex;gap:${spacingHorizontalM}}.header{display:flex;flex-direction:column;align-items:flex-start}::slotted([slot="end"]){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200}
+      ${fontFamilyBase};white-space:nowrap;}::slotted([slot="start"]){display:inline-flex}::slotted([slot="icon"]){display:flex}::slotted([slot="end"]){justify-self:end}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host(${disabledState}),:host(${disabledState}) ::slotted([slot="start"]),:host(${disabledState}) ::slotted([slot="end"]){color:GrayText}`));
+
+export { styles };

package/esm/components/contextual-menu-item/contextual-menu-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextual-menu-item.styles.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu-item/contextual-menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,oCAAoC,EACpC,uBAAuB,EACvB,4BAA4B,EAC5B,+BAA+B,EAC/B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,OAAO,EACP,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,8BAA8B,EAC9B,kBAAkB,EAClB,mBAAmB,EACnB,2BAA2B,EAC3B,8BAA8B,EAC9B,kBAAkB,EAClB,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;aAIN,uBAAuB;;;;;eAKrB,qBAAqB,IAAI,uBAAuB;WACpD,mBAAmB;kBACZ,uBAAuB;MACnC,2BAA2B;oDACmB,kBAAkB;;;;;wBAK9C,8BAA8B;aACzC,8BAA8B;;;;;MAKrC,8BAA8B;;;;wBAIZ,4BAA4B;aACvC,4BAA4B;;;;wBAIjB,+BAA+B;aAC1C,8BAA8B;;;;aAI9B,oCAAoC;;;;;;;WAOtC,kBAAkB;;;;;;;;;;aAUhB,uBAAuB;YACxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB;QAC/D,cAAc;;;;;;;;;;;;;;;CAerB,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;YACxB,aAAa;YACb,aAAa;YACb,aAAa;;;GAGtB,CAAC,CACH,CAAC"}

package/esm/components/contextual-menu-item/contextual-menu-item.template.js

@@ -0,0 +1,38 @@
+import { slotted, html } from '@microsoft/fast-element';
+import './contextual-menu-item.js';
+import { whitespaceFilter } from '@fabric-msft/fabric-web';
+
+/**
+ * Creates a template for the ContextualMenuItem component.
+ *
+ * @remarks
+ * This template provides the structure for a menu item with support for:
+ * - Start and end content slots
+ * - Icon slot
+ * - Main content with subtitle
+ * - Prompt functionality through click and keyboard interactions
+ * - Accessibility attributes for menu item behavior
+ *
+ * @param options - Configuration options for start/end slots
+ * @returns An ElementViewTemplate configured for the ContextualMenuItem
+ *
+ * @example
+ * ```ts
+ * const template = contextualMenuItem();
+ * ```
+ *
+ * @public
+ */
+function contextualMenuItem() {
+  return html`<template @click="${x => x.handleClick()}" @keydown="${(x, c) => x.handleKeyDown(c.event)}" role="menuitem" ?disabled="${x => x.disabled}" ?hidden="${x => x.hidden}" aria-disabled="${x => x.disabled ? "true" : "false"}" aria-hidden="${x => x.hidden ? "true" : "false"}" aria-label="${x => x.ariaLabel}" prompt="${x => x.prompt}"><slot name="start"></slot><div part="content" class="content"><div class="icon" part="icon"><slot name="icon"></slot></div><div class="header" part="header"><slot ${slotted({
+    property: "slottedPrompt",
+    filter: whitespaceFilter
+  })}></slot><div class="subtitle" part="subtitle"><slot name="subtitle"></slot></div></div></div><slot name="end"></slot></template>`;
+}
+/**
+ * The default template for the ContextualMenuItem component.
+ * @public
+ */
+const template = contextualMenuItem();
+
+export { contextualMenuItem, template };

package/esm/components/contextual-menu-item/contextual-menu-item.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextual-menu-item.template.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu-item/contextual-menu-item.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAA2B,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,kBAAkB;IAGhC,OAAO,IAAI,CAAG;;gBAEA,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;kBACpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAsB,CAAC;;mBAElD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;iBACnB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM;uBACT,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;qBACxC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;oBACrC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;gBACtB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM;;;;;;;;;cASjB,OAAO,CAAC;QACR,QAAQ,EAAE,eAAe;QACzB,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;;;;;;GASX,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GACnB,kBAAkB,EAAE,CAAC"}

package/esm/components/contextual-menu-item/define.js

@@ -0,0 +1,4 @@
+import { DesignSystem } from "../design-system.js";
+import { definition as ContextualMenuItemDefinition } from "./contextual-menu-item.definition.js";
+ContextualMenuItemDefinition.define(DesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/esm/components/contextual-menu-item/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu-item/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,IAAI,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AAClG,4BAA4B,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/contextual-menu-item/index.js

@@ -0,0 +1,6 @@
+export { ContextualMenuItem } from "./contextual-menu-item.js";
+export { ContextualMenuItemRoles, ContextualMenuItemEventNames } from "./contextual-menu-item.options.js";
+export { definition as ContextualMenuItemDefinition } from "./contextual-menu-item.definition.js";
+export { styles as ContextualMenuItemStyles } from "./contextual-menu-item.styles.js";
+export { template as ContextualMenuItemTemplate } from "./contextual-menu-item.template.js";
+//# sourceMappingURL=index.js.map

package/esm/components/contextual-menu-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EACL,uBAAuB,EACvB,4BAA4B,EAC7B,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAE,UAAU,IAAI,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AAClG,OAAO,EAAE,MAAM,IAAI,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,QAAQ,IAAI,0BAA0B,EAAE,MAAM,oCAAoC,CAAC"}

package/esm/components/contextual-menu-list/contextual-menu-list.definition.js

@@ -0,0 +1,21 @@
+import { ContextualMenuList } from './contextual-menu-list.js';
+import { styles } from './contextual-menu-list.styles.js';
+import { template } from './contextual-menu-list.template.js';
+import { DesignSystem } from '../design-system.js';
+
+/**
+ * @public
+ * @remarks
+ * HTML Element: <fabric-contextual-menu-list>
+ */
+const definition = ContextualMenuList.compose({
+  name: `${DesignSystem.prefix}-contextual-menu-list`,
+  template,
+  styles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
+definition.define(DesignSystem.registry);
+
+export { definition };

package/esm/components/contextual-menu-list/contextual-menu-list.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextual-menu-list.definition.js","sourceRoot":"","sources":["../../../../src/components/contextual-menu-list/contextual-menu-list.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,OAAO,CAAC;IACnD,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,uBAAuB;IACnD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC;AAEH,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}