@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

package/dist/dts/components/listbox/listbox.d.ts

@@ -1,7 +1,9 @@
 import { Listbox as FluentListbox } from "@fluentui/web-components";
+import type { DropdownOption } from "../option/index.js";
 /**
  * Listbox
  * @summary A Listbox Custom HTML Element that allows for single or multiple selection from a list of options.
+ * Extends the Fluent Listbox to support option groups ({@link @fabric-msft/fabric-web#OptionGroup}).
  *
  * @example
  * ```html
@@ -12,6 +14,19 @@ import { Listbox as FluentListbox } from "@fluentui/web-components";
  * </fabric-listbox>
  * ```
  *
+ * @example
+ * ```html
+ * <fabric-listbox>
+ *   <fabric-option-group label="Fruits">
+ *     <fabric-option value="apple">Apple</fabric-option>
+ *     <fabric-option value="banana">Banana</fabric-option>
+ *   </fabric-option-group>
+ *   <fabric-option-group label="Vegetables">
+ *     <fabric-option value="carrot">Carrot</fabric-option>
+ *   </fabric-option-group>
+ * </fabric-listbox>
+ * ```
+ *
  * @attr {string} id - Sets the listbox ID to a unique value if one is not provided.
  * @attr {boolean | undefined} multiple - Indicates whether the listbox allows multiple selection.
  *
@@ -19,7 +34,7 @@ import { Listbox as FluentListbox } from "@fluentui/web-components";
  * @prop {Array<HTMLElement>} selectedOptions - The collection of child options that are selected.
  * @prop {number} selectedIndex - The index of the currently selected option.
  *
- * @slot - The default slot for the options.
+ * @slot - The default slot for the options and option groups.
  *
  * @method multipleChanged - Updates the multiple selection state of the listbox and its options. Parameters: prev (boolean | undefined), next (boolean | undefined).
  * @method clickHandler - Sets the `selected` state on a target option when clicked. Parameters: e (PointerEvent).
@@ -32,5 +47,73 @@ import { Listbox as FluentListbox } from "@fluentui/web-components";
  * @public
  */
 export declare class Listbox extends FluentListbox {
+    /**
+     * Checks if an option belongs to a disabled option group.
+     *
+     * @param option - The option to check.
+     * @returns true if the option is inside a disabled option group.
+     * @internal
+     */
+    private isOptionInDisabledGroup;
+    /**
+     * Sets the `selected` state on a target option when clicked.
+     * Overrides the base implementation to prevent selection of options in disabled groups.
+     *
+     * @param e - The pointer event
+     * @override
+     * @public
+     */
+    clickHandler(e: PointerEvent): boolean | void;
+    /**
+     * Selects an option by index.
+     * Overrides the base implementation to prevent selection of options in disabled groups.
+     *
+     * @param index - The index of the option to select.
+     * @override
+     * @public
+     */
+    selectOption(index?: number): void;
+    /**
+     * Handles the slotchange event for the listbox.
+     * Overrides the base implementation to support option groups.
+     * Extracts options from both direct option elements and option group children,
+     * flattening them into a single options array while propagating group disabled states.
+     *
+     * @param e - The slot change event.
+     * @override
+     * @internal
+     */
+    slotchangeHandler(e: Event): void;
+    /**
+     * Handles changes to the options collection.
+     * Overrides the base implementation to apply group-aware ARIA positioning.
+     *
+     * @param prev - The previous options collection.
+     * @param next - The new options collection.
+     * @override
+     * @internal
+     */
+    optionsChanged(prev: DropdownOption[] | undefined, next: DropdownOption[] | undefined): void;
+    /**
+     * Build a list of groups and options
+     * @param options
+     * @param groups
+     */
+    private setOptionGroups;
+    /**
+     * Applies group-scoped ARIA positioning attributes to options.
+     * Options within the same group share aria-setsize scoped to that group.
+     *
+     * @param options - The flattened options collection.
+     * @internal
+     */
+    private applyGroupScopedAria;
+    /**
+     * Updates the multiple selection state of the listbox and its options.
+     *
+     * @param prev - the previous multiple value
+     * @param next - the current multiple value
+     */
+    multipleChanged(prev: boolean | undefined, next: boolean | undefined): void;
 }
 //# sourceMappingURL=listbox.d.ts.map

package/dist/dts/components/listbox/listbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/listbox/listbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAAa,OAAQ,SAAQ,aAAa;CAAG"}
+{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/listbox/listbox.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAOzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC;;;;;;OAMG;IACH,OAAO,CAAC,uBAAuB;IAM/B;;;;;;;OAOG;IACa,YAAY,CAAC,CAAC,EAAE,YAAY,GAAG,OAAO,GAAG,IAAI;IAc7D;;;;;;;OAOG;IACa,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI;IASlD;;;;;;;;;OASG;IACa,iBAAiB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IA0BjD;;;;;;;;OAQG;IACa,cAAc,CAC5B,IAAI,EAAE,cAAc,EAAE,GAAG,SAAS,EAClC,IAAI,EAAE,cAAc,EAAE,GAAG,SAAS,GACjC,IAAI;IAUP;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAevB;;;;;;OAMG;IACH,OAAO,CAAC,oBAAoB;IAyB5B;;;;;OAKG;IACa,eAAe,CAC7B,IAAI,EAAE,OAAO,GAAG,SAAS,EACzB,IAAI,EAAE,OAAO,GAAG,SAAS;CAU5B"}

package/dist/dts/components/loading-button/index.d.ts

@@ -1,5 +1,3 @@
-export { LoadingButton } from "./loading-button";
-export { definition as LoadingButtonDefinition } from "./loading-button.definition";
-export { template as LoadingButtonTemplate } from "./loading-button.template";
-export { styles as LoadingButtonStyles } from "./loading-button.styles";
+export { LoadingButton } from "./loading-button.js";
+export { definition as LoadingButtonDefinition } from "./loading-button.definition.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/components/loading-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/loading-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAE,QAAQ,IAAI,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/loading-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/dts/components/loading-button/loading-button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-button.styles.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/loading-button/loading-button.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM,iDAwBlB,CAAC"}
+{"version":3,"file":"loading-button.styles.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/loading-button/loading-button.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,MAAM,iDA8BlB,CAAC"}

package/dist/dts/components/loading-button/loading-button.template.d.ts

@@ -1,4 +1,4 @@
-import { ElementViewTemplate } from "@microsoft/fast-element";
+import type { ElementViewTemplate } from "@microsoft/fast-element";
 import { LoadingButton } from "./loading-button";
 /**
  * The template for the {@link @fabric-msft/fabric-web#LoadingButton} component.

package/dist/dts/components/loading-button/loading-button.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-button.template.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/loading-button/loading-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAiB,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAkDjD;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,mBAAmB,CAAC,aAAa,CAC/B,CAAC"}
+{"version":3,"file":"loading-button.template.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/loading-button/loading-button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA2CjD;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,mBAAmB,CAAC,aAAa,CAC/B,CAAC"}

package/dist/dts/components/menu/index.d.ts

@@ -1,5 +1,8 @@
-export { Menu } from "./menu";
-export { definition as MenuDefinition } from "./menu.definition";
-export { styles as MenuStyles } from "./menu.styles";
-export { template as MenuTemplate } from "./menu.template";
+export { Menu } from "./menu.js";
+export { definition as MenuDefinition } from "./menu.definition.js";
+export { styles as MenuStyles } from "./menu.styles.js";
+export { template as MenuTemplate } from "./menu.template.js";
+export { MenuPositions, MenuRepositionModes } from "./menu.options.js";
+export type { MenuPosition, MenuRepositionMode } from "./menu.options.js";
+export { MenuPositioning } from "./menu.positioning.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/components/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACvE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/dts/components/menu/menu.d.ts

@@ -1,5 +1,6 @@
 import { FASTElement } from "@microsoft/fast-element";
-import { MenuList } from "../menu-list/menu-list";
+import { MenuList } from "../menu-list/menu-list.js";
+import type { MenuPosition, MenuRepositionMode } from "./menu.options.js";
 /**
  * Menu
  * @summary A Menu component that provides an interactive menu interface with support for various trigger and open behaviors.
@@ -20,14 +21,22 @@ import { MenuList } from "../menu-list/menu-list";
  * @attr {boolean | undefined} open-on-context - Determines if the menu should open on right click.
  * @attr {boolean | undefined} close-on-scroll - Determines if the menu should close on scroll.
  * @attr {boolean | undefined} persist-on-item-click - Determines if the menu open state should persist on click of a menu item.
+ * @attr {boolean | undefined} split - Determines if the menu is in split state (for split button pattern).
+ * @attr {MenuPosition | undefined} menu-position - Determines whether the menu list is above or below the trigger.
+ * @attr {MenuRepositionMode | undefined} reposition-mode - The mode for repositioning the menu. Default is "none".
  *
  * @prop {boolean | undefined} openOnHover - Determines if the menu should open on hover.
  * @prop {boolean | undefined} openOnContext - Determines if the menu should open on right click.
  * @prop {boolean | undefined} closeOnScroll - Determines if the menu should close on scroll.
  * @prop {boolean | undefined} persistOnItemClick - Determines if the menu open state should persist on click of a menu item.
+ * @prop {boolean | undefined} split - Determines if the menu is in split state.
  * @prop {MenuList[]} slottedMenuList - Holds the slotted menu list.
  * @prop {HTMLElement[]} slottedTriggers - Holds the slotted triggers.
+ * @prop {MenuPosition | undefined} menuPosition - Determines whether the menu list is above or below the trigger.
+ * @prop {MenuRepositionMode | undefined} repositionMode - The mode for repositioning the menu.
+ * @prop {HTMLElement | undefined} overflowBoundary - The overflow boundary element reference.
  *
+ * @slot primary-action - Slot for the primary action element (used when split is true).
  * @slot trigger - Slot for the trigger element.
  * @slot - Default slot for the menu list.
  *
@@ -50,6 +59,26 @@ import { MenuList } from "../menu-list/menu-list";
  * @public
  */
 export declare class Menu extends FASTElement {
+    /**
+     * The positioning instance for the menu.
+     * @private
+     */
+    private positioning;
+    /**
+     * The intersection observer for tracking overflow.
+     * @private
+     */
+    private intersectionObserver;
+    /**
+     * The original position before repositioning.
+     * @private
+     */
+    private originalMenuPosition;
+    /**
+     * The array of open positions based on collision detection.
+     * @private
+     */
+    private openPositions;
     /**
      * Determines if the menu should open on hover.
      * @public
@@ -70,6 +99,27 @@ export declare class Menu extends FASTElement {
      * @public
      */
     persistOnItemClick?: boolean;
+    /**
+     * Determines if the menu is in split state (for split button pattern).
+     * @public
+     */
+    split?: boolean;
+    /**
+     * Determines whether the menu list is above or below the trigger.
+     * @public
+     */
+    menuPosition?: MenuPosition;
+    /**
+     * The mode for repositioning the menu when it overflows the boundary.
+     * @public
+     * @default "auto"
+     */
+    repositionMode?: MenuRepositionMode;
+    /**
+     * The overflow boundary element reference.
+     * @public
+     */
+    overflowBoundary?: HTMLElement;
     /**
      * Holds the slotted menu list.
      * @public
@@ -95,6 +145,90 @@ export declare class Menu extends FASTElement {
      * @internal
      */
     private _menuList?;
+    /**
+     * Creates the overflow handler using IntersectionObserver.
+     * Note: When a custom overflowBoundary is set, we use direct rect calculations
+     * instead because popovers render in the top layer and IntersectionObserver
+     * with a custom root won't work correctly.
+     * @private
+     */
+    private createOverflowHandler;
+    /**
+     * Checks overflow against custom boundary using direct rect calculations.
+     * Delegates to MenuPositioning for the actual calculation.
+     * @private
+     */
+    private checkOverflowWithBoundary;
+    /**
+     * Handles overflow collisions with the menu.
+     * @private
+     */
+    private handleOverflow;
+    /**
+     * Applies height constraint to make menu scrollable when space is limited.
+     * @private
+     */
+    private applyHeightConstraint;
+    /**
+     * Clears height constraint from the menu.
+     * @private
+     */
+    private clearHeightConstraint;
+    /**
+     * Repositions the menu based on collisions.
+     * @private
+     */
+    private repositionMenu;
+    /**
+     * Releases positions and restores original if valid.
+     * @private
+     */
+    private releasePositions;
+    /**
+     * Observes the menu for overflow.
+     * @private
+     */
+    private observeMenuOverflow;
+    /**
+     * Updates the menu position on window changes.
+     * @private
+     */
+    private updateMenuPosition;
+    /**
+     * Debounced handler for window changes.
+     * @private
+     */
+    private handleWindowChanges;
+    /**
+     * Adds window event listeners.
+     * @private
+     */
+    private addWindowEventListeners;
+    /**
+     * Removes window event listeners.
+     * @private
+     */
+    private removeWindowEventListeners;
+    /**
+     * Adds overflow boundary event listeners.
+     * @private
+     */
+    private addOverflowBoundaryEventListeners;
+    /**
+     * Adds repositioning handlers.
+     * @private
+     */
+    private addRepositioningHandlers;
+    /**
+     * Creates the positioning manager.
+     * @private
+     */
+    private createPositioningManager;
+    /**
+     * Removes repositioning event listeners.
+     * @private
+     */
+    private removeRepositioningListeners;
     /**
      * Called when the element is connected to the DOM.
      * @public
@@ -110,6 +244,11 @@ export declare class Menu extends FASTElement {
      * @public
      */
     setComponent(): void;
+    /**
+     * Sets the menu position.
+     * @public
+     */
+    setMenuPosition(): void;
     /**
      * Toggles the open state of the menu.
      * @public
@@ -119,7 +258,7 @@ export declare class Menu extends FASTElement {
      * Closes the menu.
      * @public
      */
-    closeMenu: (event?: Event) => void;
+    closeMenu: () => void;
     /**
      * Opens the menu.
      * @public
@@ -158,6 +297,22 @@ export declare class Menu extends FASTElement {
      * @param newValue - The new value of 'persistOnItemClick'.
      */
     persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
+    /**
+     * Called whenever the 'menuPosition' property changes.
+     *
+     * @param oldValue - The previous value of 'menuPosition'.
+     * @param newValue - The new value of 'menuPosition'.
+     * @public
+     */
+    menuPositionChanged(): void;
+    /**
+     * Called whenever the 'repositionMode' property changes.
+     *
+     * @public
+     * @param oldValue - The previous value of 'repositionMode'.
+     * @param newValue - The new value of 'repositionMode'.
+     */
+    repositionModeChanged(oldValue: MenuRepositionMode, newValue: MenuRepositionMode): void;
     /**
      * Called whenever the 'openOnContext' property changes.
      *

package/dist/dts/components/menu/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBAAa,IAAK,SAAQ,WAAW;IACnC;;;OAGG;IAEI,WAAW,CAAC,EAAE,OAAO,CAAS;IAErC;;;OAGG;IAEI,aAAa,CAAC,EAAE,OAAO,CAAS;IAEvC;;;OAGG;IAEI,aAAa,CAAC,EAAE,OAAO,CAAS;IAEvC;;;OAGG;IAEI,kBAAkB,CAAC,EAAE,OAAO,CAAS;IAE5C;;;OAGG;IAEI,eAAe,EAAE,QAAQ,EAAE,CAAM;IAExC;;;OAGG;IAEI,eAAe,EAAE,WAAW,EAAE,CAAM;IAE3C;;;OAGG;IACH,OAAO,CAAC,KAAK,CAAkB;IAE/B;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B;;;OAGG;IACH,OAAO,CAAC,SAAS,CAAC,CAAc;IAEhC;;;OAGG;IACI,iBAAiB;IAKxB;;;OAGG;IACI,oBAAoB;IAK3B;;;OAGG;IACI,YAAY,IAAI,IAAI;IAmB3B;;;OAGG;IACI,UAAU,aAQf;IAEF;;;OAGG;IACI,SAAS,WAAY,KAAK,UAQ/B;IAEF;;;OAGG;IACI,QAAQ,OAAQ,KAAK,UAY1B;IAEF;;;OAGG;IACI,aAAa,IAAI,IAAI;IAO5B;;;OAGG;IACI,YAAY,IAAI,IAAI;IAM3B;;;;;OAKG;IACI,aAAa,MAAO,KAAK,GAAG,WAAW,KAAG,IAAI,CAQnD;IAEF;;;;;;OAMG;IACI,kBAAkB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQrE;;;;;;OAMG;IACI,yBAAyB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQ5E;;;;;;OAMG;IACI,oBAAoB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQvE;;;;;;OAMG;IACI,oBAAoB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQvE;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAkBpB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAkBvB;;;;;OAKG;IACI,kBAAkB,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAmB3D;;;;;OAKG;IACI,qBAAqB,MAAO,aAAa,KAAG,OAAO,GAAG,IAAI,CAc/D;IAEF;;;;OAIG;IACH,OAAO,CAAC,oBAAoB,CAQ1B;CACH"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/menu.ts"],"names":[],"mappings":"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"}

package/dist/dts/components/menu/menu.definition.d.ts

@@ -1,4 +1,4 @@
-import { Menu } from "./menu";
+import { Menu } from "./menu.js";
 /**
  *
  * @public

package/dist/dts/components/menu/menu.definition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.definition.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/menu.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAK9B;;;;;GAKG;AACH,eAAO,MAAM,UAAU,sEAOrB,CAAC"}
+{"version":3,"file":"menu.definition.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/menu.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAKjC;;;;;GAKG;AACH,eAAO,MAAM,UAAU,sEAOrB,CAAC"}

package/dist/dts/components/menu/menu.options.d.ts

@@ -0,0 +1,28 @@
+import type { ValuesOf } from "../../util/typings.js";
+/**
+ * The position variations for the menu component
+ * @public
+ */
+export declare const MenuPositions: {
+    readonly above: "above";
+    readonly below: "below";
+};
+/**
+ * The types for menu positions
+ * @public
+ */
+export type MenuPosition = ValuesOf<typeof MenuPositions>;
+/**
+ * Reposition modes for the menu
+ * @public
+ */
+export declare const MenuRepositionModes: {
+    readonly auto: "auto";
+    readonly none: "none";
+};
+/**
+ * Reposition mode type for the menu
+ * @public
+ */
+export type MenuRepositionMode = ValuesOf<typeof MenuRepositionModes>;
+//# sourceMappingURL=menu.options.d.ts.map

package/dist/dts/components/menu/menu.options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.options.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/menu.options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGtD;;;GAGG;AACH,eAAO,MAAM,aAAa;;;CAGhB,CAAC;AAEX;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE1D;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;CAGtB,CAAC;AAEX;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/dts/components/menu/menu.positioning.d.ts

@@ -0,0 +1,94 @@
+import type { MenuPosition, MenuRepositionMode } from "./menu.options.js";
+import type { CollisionEdge } from "../../util/positioning.js";
+export { CollisionEdges, type CollisionEdge } from "../../util/positioning.js";
+/**
+ * Options for the menu positioning manager
+ * @internal
+ */
+export interface MenuPositioningOptions {
+    menuReference: HTMLElement;
+    anchorReference: HTMLElement;
+    overflowBoundaryReference?: HTMLElement | null;
+    repositionMode?: MenuRepositionMode;
+}
+/**
+ * Positioning manager for menu component
+ * Handles collision detection and repositioning logic
+ * @internal
+ */
+export declare class MenuPositioning {
+    private menuReference;
+    private anchorReference;
+    private overflowBoundaryReference;
+    private rootMargin;
+    private minMenuHeight;
+    private _position;
+    private _repositionMode;
+    set position(value: MenuPosition);
+    get position(): MenuPosition;
+    set repositionMode(value: MenuRepositionMode);
+    get repositionMode(): MenuRepositionMode;
+    constructor(options: MenuPositioningOptions);
+    /**
+     * Gets the boundary bounds for overflow calculations.
+     * Uses custom overflow boundary if set, otherwise uses viewport.
+     * @returns BoundaryBounds object
+     */
+    private getBoundaryBounds;
+    /**
+     * Checks if a position is valid (menu fits within boundary)
+     * @param openPosition - The position to check
+     * @returns Whether the position is valid
+     */
+    checkPosition: (openPosition: MenuPosition) => boolean;
+    /**
+     * Gets the opposite position for flipping
+     * @param collisionEdge - The edge where collision occurred
+     * @returns The opposite position
+     */
+    private oppositePosition;
+    /**
+     * Gets open positions based on collision edge
+     * @param collisionEdge - The edge where collision occurred
+     * @returns Array of valid positions
+     */
+    private getOpenPositionsFromEdge;
+    /**
+     * Gets all currently valid positions
+     * @returns Array of valid positions
+     */
+    getOpenPositions: () => Array<MenuPosition>;
+    /**
+     * Finds valid positions based on intersection collision
+     * @param entry - The intersection observer entry
+     * @returns Array of valid positions
+     */
+    findOpenPositionsFromCollision: (entry: IntersectionObserverEntry) => Array<MenuPosition>;
+    /**
+     * Calculates available space for the menu in a given position
+     * @param position - The position to calculate space for
+     * @returns Available height in pixels
+     */
+    getMenuAvailableSpace: (position: MenuPosition) => number;
+    /**
+     * Determines if menu needs to be constrained with max-height
+     * @returns Object with needsConstraint flag and maxHeight value
+     */
+    calculateConstrainedHeight: () => {
+        needsConstraint: boolean;
+        maxHeight: number | null;
+    };
+    /**
+     * Checks if the menu overflows the boundary and returns the appropriate position.
+     * This uses direct rect calculations, which is needed for custom boundaries
+     * because popovers render in the top layer (outside the DOM hierarchy)
+     * and IntersectionObserver with a custom root won't work correctly.
+     * @returns Object with hasOverflow flag, collisionEdge, and suggested position
+     */
+    checkOverflowWithBoundary: () => {
+        hasOverflow: boolean;
+        collisionEdge: CollisionEdge | undefined;
+        suggestedPosition: MenuPosition | undefined;
+    };
+}
+//# sourceMappingURL=menu.positioning.d.ts.map

package/dist/dts/components/menu/menu.positioning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.positioning.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/menu.positioning.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAU1E,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AAG/E,OAAO,EAAE,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/E;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,aAAa,EAAE,WAAW,CAAC;IAC3B,eAAe,EAAE,WAAW,CAAC;IAC7B,yBAAyB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/C,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED;;;;GAIG;AACH,qBAAa,eAAe;IAC1B,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,yBAAyB,CAAqB;IACtD,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,aAAa,CAAO;IAE5B,OAAO,CAAC,SAAS,CAAqC;IACtD,OAAO,CAAC,eAAe,CAAgD;IAEvE,IAAW,QAAQ,CAAC,KAAK,EAAE,YAAY,EAEtC;IAED,IAAW,QAAQ,IAAI,YAAY,CAElC;IAED,IAAW,cAAc,CAAC,KAAK,EAAE,kBAAkB,EAElD;IAED,IAAW,cAAc,IAAI,kBAAkB,CAE9C;gBAEW,OAAO,EAAE,sBAAsB;IAO3C;;;;OAIG;IACH,OAAO,CAAC,iBAAiB,CAEvB;IAEF;;;;OAIG;IACI,aAAa,GAAI,cAAc,YAAY,KAAG,OAAO,CAgB1D;IAEF;;;;OAIG;IACH,OAAO,CAAC,gBAAgB,CAStB;IAEF;;;;OAIG;IACH,OAAO,CAAC,wBAAwB,CAU9B;IAEF;;;OAGG;IACI,gBAAgB,QAAO,KAAK,CAAC,YAAY,CAAC,CAS/C;IAEF;;;;OAIG;IACI,8BAA8B,GACnC,OAAO,yBAAyB,KAC/B,KAAK,CAAC,YAAY,CAAC,CAGpB;IAEF;;;;OAIG;IACI,qBAAqB,GAAI,UAAU,YAAY,KAAG,MAAM,CAkB7D;IAEF;;;OAGG;IACI,0BAA0B,QAAO;QACtC,eAAe,EAAE,OAAO,CAAC;QACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;KAC1B,CAmCC;IAEF;;;;;;OAMG;IACI,yBAAyB,QAAO;QACrC,WAAW,EAAE,OAAO,CAAC;QACrB,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;QACzC,iBAAiB,EAAE,YAAY,GAAG,SAAS,CAAC;KAC7C,CAsCC;CACH"}

package/dist/dts/components/menu/menu.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.styles.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/menu.styles.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,MAAM,iDAyBlB,CAAC"}
+{"version":3,"file":"menu.styles.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/menu.styles.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,eAAO,MAAM,MAAM,iDA2DlB,CAAC"}

package/dist/dts/components/menu/menu.template.d.ts

@@ -1,5 +1,5 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import type { Menu } from './menu';
+import type { ElementViewTemplate } from "@microsoft/fast-element";
+import type { Menu } from "./menu.js";
 export declare function menuTemplate<T extends Menu>(): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<Menu>;
 //# sourceMappingURL=menu.template.d.ts.map

package/dist/dts/components/menu/menu.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.template.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/menu.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,mBAAmB,EAAiB,MAAM,yBAAyB,CAAC;AACvF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEnC,wBAAgB,YAAY,CAAC,CAAC,SAAS,IAAI,KAAK,mBAAmB,CAAC,CAAC,CAAC,CAarE;AAED,eAAO,MAAM,QAAQ,EAAE,mBAAmB,CAAC,IAAI,CAAkB,CAAC"}
+{"version":3,"file":"menu.template.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu/menu.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEtC,wBAAgB,YAAY,CAAC,CAAC,SAAS,IAAI,KAAK,mBAAmB,CAAC,CAAC,CAAC,CAqBrE;AAED,eAAO,MAAM,QAAQ,EAAE,mBAAmB,CAAC,IAAI,CAAkB,CAAC"}

package/dist/dts/components/menu-button/index.d.ts

@@ -1,5 +1,5 @@
-export { MenuButton } from "./menu-button";
-export { MenuButtonAppearance, MenuButtonShape, MenuButtonSize, MenuButtonStyles, MenuButtonTemplate } from "@fluentui/web-components";
+export { MenuButton } from "./menu-button.js";
+export { MenuButtonAppearances, MenuButtonShapes, MenuButtonSizes, type MenuButtonAppearance, type MenuButtonShape, type MenuButtonSize } from "./menu-button.options.js";
 export type { MenuButtonOptions } from "@fluentui/web-components";
-export { definition as MenuButtonDefinition } from "./menu-button.definition";
+export { definition as MenuButtonDefinition } from "./menu-button.definition.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/components/menu-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EACL,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/dts/components/menu-button/menu-button.d.ts

@@ -12,7 +12,7 @@ import { MenuButton as FluentMenuButton } from "@fluentui/web-components";
  * </fabric-menu-button>
  * ```
  *
- * @attr {MenuButtonAppearance | undefined} appearance - Indicates the styled appearance of the button.
+ * @attr {MenuButtonAppearances | undefined} appearance - Indicates the styled appearance of the button.
  * @attr {MenuButtonShape | undefined} shape - The shape of the button.
  * @attr {MenuButtonSize | undefined} size - The size of the button.
  * @attr {boolean | undefined} icon-only - Indicates that the button should only display as an icon with no text content.
@@ -29,7 +29,7 @@ import { MenuButton as FluentMenuButton } from "@fluentui/web-components";
  * @attr {string | undefined} type - The button type.
  * @attr {string | undefined} value - The value attribute.
  *
- * @prop {MenuButtonAppearance | undefined} appearance - Indicates the styled appearance of the button.
+ * @prop {MenuButtonAppearances | undefined} appearance - Indicates the styled appearance of the button.
  * @prop {MenuButtonShape | undefined} shape - The shape of the button.
  * @prop {MenuButtonSize | undefined} size - The size of the button.
  * @prop {boolean | undefined} iconOnly - Indicates that the button should only display as an icon with no text content.

package/dist/dts/components/menu-button/menu-button.definition.d.ts

@@ -1,10 +1,4 @@
-/**
- * Menu Button definition
- *
- * Uses Fluent UI's MenuButtonTemplate which includes the chevron icon,
- * rather than a custom template, to maintain consistency with Fluent UI.
- */
-import { MenuButton } from "@fluentui/web-components";
+import { MenuButton } from "./menu-button.js";
 /**
  *
  * @public

package/dist/dts/components/menu-button/menu-button.definition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-button.definition.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu-button/menu-button.definition.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EACL,UAAU,EAGX,MAAM,0BAA0B,CAAC;AAGlC;;;;;GAKG;AACH,eAAO,MAAM,UAAU,4EAOrB,CAAC"}
+{"version":3,"file":"menu-button.definition.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/menu-button/menu-button.definition.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C;;;;;GAKG;AACH,eAAO,MAAM,UAAU,4EAOrB,CAAC"}