@fabric-msft/fabric-web 4.0.0 → 5.0.1

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 import * as _microsoft_fast_element from '@microsoft/fast-element';
 import { FASTElement, ElementViewTemplate, ElementStyles, HTMLDirective, SyntheticViewTemplate, CaptureType, ElementsFilter } from '@microsoft/fast-element';
 import * as _fluentui_web_components from '@fluentui/web-components';
-import { BaseButton, Button as Button$1, AccordionItem as AccordionItem$1, Accordion as Accordion$1, Link as Link$1, Avatar as Avatar$1, Badge as Badge$1, Checkbox as Checkbox$1, CounterBadge as CounterBadge$1, Dialog as Dialog$1, DialogBody as DialogBody$1, Divider as Divider$1, Drawer as Drawer$1, DrawerBody as DrawerBody$1, Dropdown as Dropdown$1, DropdownOption as DropdownOption$1, Listbox as Listbox$1, Field as Field$1, SlottableInput as SlottableInput$1, Image as Image$1, Label as Label$1, AnchorButton as AnchorButton$1, MessageBar as MessageBar$1, MenuButton as MenuButton$1, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, RatingDisplay as RatingDisplay$1, StartEndOptions, StartEnd, Slider as Slider$1, Spinner as Spinner$1, Switch as Switch$1, Tab as Tab$1, Tablist as Tablist$1, TextArea as TextArea$1, Text as Text$1, Tree as Tree$1, TreeItem as TreeItem$1, ToggleButton as ToggleButton$1, Tooltip as Tooltip$1 } from '@fluentui/web-components';
-export { AnchorButtonTemplate, AvatarStyles, AvatarTemplate, BadgeStyles, BadgeTemplate, BaseAccordionItem, BaseAnchor, BaseAvatar, BaseButton, BaseCheckbox, BaseDivider, BaseField, BaseProgressBar, BaseRatingDisplay, BaseSpinner, BaseTablist, BaseTextArea, BaseTextInput, CheckboxOptions, CheckboxStyles, CheckboxTemplate, CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, CounterBadgeStyles, CounterBadgeTemplate, DialogBodyStyles, DialogBodyTemplate, DialogTemplate, ListboxStyles, ListboxTemplate, MenuButtonOptions, MessageBarIntent, MessageBarLayout, MessageBarShape, MessageBarStyles, MessageBarTemplate, SliderConfiguration, SliderOptions, SwitchStyles, SwitchTemplate, TabOptions, TextAlign, TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaAutocomplete, TextAreaResize, TextAreaSize, TextAreaStyles, TextAreaTemplate, TextFont, TextSize, TextStyles, TextTemplate, TextWeight, TreeItemStyles, TreeItemTemplate, TreeStyles, TreeTemplate, isDropdownOption, isListbox } from '@fluentui/web-components';
+import { BaseButton, Button as Button$1, AccordionItem as AccordionItem$1, Accordion as Accordion$1, Link as Link$1, Avatar as Avatar$1, Badge as Badge$1, Checkbox as Checkbox$1, CounterBadge as CounterBadge$1, Dialog as Dialog$1, DialogBody as DialogBody$1, Divider as Divider$1, Drawer as Drawer$1, DrawerBody as DrawerBody$1, Dropdown as Dropdown$1, DropdownOption as DropdownOption$1, Listbox as Listbox$1, Field as Field$1, SlottableInput as SlottableInput$1, Image as Image$1, Label as Label$1, AnchorButton as AnchorButton$1, MessageBar as MessageBar$1, MenuButton as MenuButton$1, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, RatingDisplay as RatingDisplay$1, StartEndOptions, StartEnd, Slider as Slider$1, Spinner as Spinner$1, Switch as Switch$1, Tab as Tab$1, Tablist as Tablist$1, TextArea as TextArea$1, TextAreaAppearance, Text as Text$1, Tree as Tree$1, TreeItem as TreeItem$1, ToggleButton as ToggleButton$1, Tooltip as Tooltip$1 } from '@fluentui/web-components';
+export { AnchorButtonTemplate, AvatarStyles, AvatarTemplate, BadgeStyles, BadgeTemplate, BaseAccordionItem, BaseAnchor, BaseAvatar, BaseButton, BaseCheckbox, BaseDivider, BaseField, BaseProgressBar, BaseRatingDisplay, BaseSpinner, BaseTablist, BaseTextArea, BaseTextInput, CheckboxOptions, CheckboxStyles, CheckboxTemplate, DialogBodyStyles, DialogBodyTemplate, DialogTemplate, ListboxStyles, ListboxTemplate, MenuButtonOptions, MessageBarIntent, MessageBarLayout, MessageBarShape, MessageBarStyles, MessageBarTemplate, SliderConfiguration, SliderOptions, SwitchStyles, SwitchTemplate, TabOptions, TextAreaStyles, TextAreaTemplate, TreeStyles, TreeTemplate, isDropdownOption, isListbox } from '@fluentui/web-components';
 import { ValuesOf as ValuesOf$1 } from '@microsoft/fast-foundation';
-export { Theme, fabricDarkTheme, fabricLightTheme, setTheme, webDarkTheme, webLightTheme } from '@fabric-msft/theme';
+export { Theme, fabricDarkTheme, fabricLightTheme, setTheme, sizeHorizontalL, sizeHorizontalM, sizeHorizontalMNudge, sizeHorizontalNone, sizeHorizontalS, sizeHorizontalSNudge, sizeHorizontalXL, sizeHorizontalXS, sizeHorizontalXXL, sizeHorizontalXXS, sizeHorizontalXXXL, sizeVerticalL, sizeVerticalM, sizeVerticalMNudge, sizeVerticalNone, sizeVerticalS, sizeVerticalSNudge, sizeVerticalXL, sizeVerticalXS, sizeVerticalXXL, sizeVerticalXXS, sizeVerticalXXXL, webDarkTheme, webLightTheme } from '@fabric-msft/theme';
+import { Direction } from '@microsoft/fast-web-utilities';
 
 /**
  * Helper for enumerating a type from a const object
@@ -93,7 +94,7 @@ declare class AccordionMenu extends FASTElement {
      * @param prev - The previous value.
      * @param next - The next value.
      */
-    expandmodeChanged(prev: AccordionMenuExpandMode, next: AccordionMenuExpandMode): void;
+    expandmodeChanged(_prev: AccordionMenuExpandMode, next: AccordionMenuExpandMode): void;
     /**
      * The slotted accordion menu items.
      * @public
@@ -136,9 +137,9 @@ declare class AccordionMenu extends FASTElement {
     private removeItemListeners;
 }
 
-declare const template$c: ElementViewTemplate<AccordionMenu>;
+declare const template$d: ElementViewTemplate<AccordionMenu>;
 
-declare const styles$f: _microsoft_fast_element.ElementStyles;
+declare const styles$g: _microsoft_fast_element.ElementStyles;
 
 /**
  *
@@ -268,7 +269,7 @@ declare class MenuList extends FASTElement {
     /**
      * Method for Observable changes to the hidden attribute of child elements
      */
-    handleChange(source: unknown, propertyName: string): void;
+    handleChange(_source: unknown, propertyName: string): void;
     /**
      * Handle change from child MenuItem element and set radio group behavior
      */
@@ -397,7 +398,7 @@ declare class AccordionMenuPanel extends FASTElement {
      * @param prev - previous value
      * @param next - next value
      */
-    disabledChanged(prev: boolean, next: boolean): void;
+    disabledChanged(_prev: boolean, next: boolean): void;
     /**
      * The item ID
      *
@@ -433,7 +434,7 @@ declare class AccordionMenuPanel extends FASTElement {
      * @param prev - previous value
      * @param next - next value
      */
-    blockChanged(prev: boolean, next: boolean): void;
+    blockChanged(_prev: boolean, next: boolean): void;
     /**
      * Sets expand and collapsed icon position.
      *
@@ -454,9 +455,9 @@ declare class AccordionMenuPanel extends FASTElement {
  * The template for the accordion menu panel component.
  * @public
  */
-declare const template$b: ElementViewTemplate<AccordionMenuPanel>;
+declare const template$c: ElementViewTemplate<AccordionMenuPanel>;
 
-declare const styles$e: _microsoft_fast_element.ElementStyles;
+declare const styles$f: _microsoft_fast_element.ElementStyles;
 
 declare const definition$10: _microsoft_fast_element.FASTElementDefinition<typeof AccordionMenuPanel>;
 
@@ -811,9 +812,9 @@ declare const definition$$: _microsoft_fast_element.FASTElementDefinition<typeof
 /** Card styles
  * @public
  */
-declare const styles$d: _microsoft_fast_element.ElementStyles;
+declare const styles$e: _microsoft_fast_element.ElementStyles;
 
-declare const template$a: ElementViewTemplate<Card>;
+declare const template$b: ElementViewTemplate<Card>;
 
 /**
  * CardFooter
@@ -1195,9 +1196,9 @@ declare class Carousel extends FASTElement {
  */
 declare const definition$X: _microsoft_fast_element.FASTElementDefinition<typeof Carousel>;
 
-declare const styles$c: _microsoft_fast_element.ElementStyles;
+declare const styles$d: _microsoft_fast_element.ElementStyles;
 
-declare const template$9: ElementViewTemplate<Carousel>;
+declare const template$a: ElementViewTemplate<Carousel>;
 
 /** Appearance values for {@link Button}. */
 declare const ButtonAppearances: {
@@ -1481,7 +1482,7 @@ declare class FilterPill extends Button {
      * @param {boolean} prev - The previous value of the iconOnly attribute.
      * @param {boolean} next - The new value of the iconOnly attribute.
      */
-    iconOnlyChanged(prev: boolean, next: boolean): void;
+    iconOnlyChanged(_prev: boolean, next: boolean): void;
     /**
      * Handles changes to the appearance attribute.
      * @param {FilterPillAppearance | undefined} prev - The previous value of the appearance attribute.
@@ -2211,8 +2212,12 @@ declare const MultiViewGroupPositions: {
 type MultiViewGroupPosition = ValuesOf<typeof MultiViewGroupPositions>;
 
 /**
- * Collision edge values for positioning calculations
- * @public
+ * Core types for Angular CDK-inspired positioning engine.
+ * Based on @angular/cdk/overlay positioning strategy.
+ */
+
+/**
+ * Collision edges for boundary detection.
  */
 declare const CollisionEdges: {
     readonly top: "top";
@@ -2220,26 +2225,22 @@ declare const CollisionEdges: {
     readonly bottom: "bottom";
     readonly left: "left";
 };
-/**
- * Collision edge type
- * @public
- */
 type CollisionEdge = ValuesOf<typeof CollisionEdges>;
-/**
- * Reposition modes for positioned elements
- * @public
- */
-declare const RepositionModes: {
-    readonly auto: "auto";
-    readonly flip: "flip";
-    readonly none: "none";
-};
-/**
- * Reposition mode type
- * @public
- */
-type RepositionMode = ValuesOf<typeof RepositionModes>;
 
+declare const PositioningShorthands: {
+    readonly aboveEnd: "above-end";
+    readonly aboveCenter: "above-center";
+    readonly aboveStart: "above-start";
+    readonly endBottom: "end-bottom";
+    readonly endMiddle: "end-middle";
+    readonly endTop: "end-top";
+    readonly belowEnd: "below-end";
+    readonly belowCenter: "below-center";
+    readonly belowStart: "below-start";
+    readonly startBottom: "start-bottom";
+    readonly startTop: "start-top";
+    readonly startMiddle: "start-middle";
+};
 declare const PositioningShorthand: {
     readonly aboveEnd: "above-end";
     readonly aboveCenter: "above-center";
@@ -2254,17 +2255,18 @@ declare const PositioningShorthand: {
     readonly startTop: "start-top";
     readonly startMiddle: "start-middle";
 };
+type PositioningShorthand = ValuesOf<typeof PositioningShorthands>;
 declare const PopoverPositions: ("above-end" | "above-center" | "above-start" | "end-bottom" | "end-middle" | "end-top" | "below-end" | "below-center" | "below-start" | "start-bottom" | "start-top" | "start-middle")[];
 type PopoverSize = "small" | "medium" | "large";
 type PopoverMode = "manual" | "auto";
-type PopoverRepositionMode = RepositionMode;
+type PopoverRepositionMode = ValuesOf<typeof PopoverRepositionModes>;
 declare const PopoverRepositionModes: {
     readonly auto: "auto";
     readonly flip: "flip";
     readonly none: "none";
 };
-type PositioningShorthandKeys = keyof typeof PositioningShorthand;
-type PositioningShorthandValues = (typeof PositioningShorthand)[keyof typeof PositioningShorthand];
+type PositioningShorthandKeys = keyof typeof PositioningShorthands;
+type PositioningShorthandValues = (typeof PositioningShorthands)[keyof typeof PositioningShorthands];
 interface HTMLPopoverElement extends HTMLElement {
     showPopover: () => void;
     hidePopover: () => void;
@@ -2276,11 +2278,11 @@ interface PopoverEventData {
     target: HTMLElement;
 }
 declare const PopoverEventNames: {
-    readonly hide: "hidePopover";
-    readonly show: "showPopover";
-    readonly toggle: "togglePopover";
-    readonly mouseEnter: "mouseEnterPopover";
-    readonly mouseLeave: "mouseLeavePopover";
+    readonly hide: "hide-popover";
+    readonly show: "show-popover";
+    readonly toggle: "toggle-popover";
+    readonly mouseEnter: "mouse-enter-popover";
+    readonly mouseLeave: "mouse-leave-popover";
 };
 
 /**
@@ -2301,7 +2303,7 @@ declare const PopoverEventNames: {
  * @attr {PopoverMode} mode - The mode of the popover. In auto mode, the popover closes when the user clicks outside of it. In manual mode, the popover stays open.
  * @attr {PositioningShorthandValues} position - The position of the popover.
  * @attr {string} target-id - The ID of the target element.
- * @attr {PopoverRepositionMode} reposition-mode - The mode for repositioning the popover.
+ * @attr {PopoverRepositionMode} reposition-mode - Controls how the `FlexiblePositionStrategy` selects a fallback when the preferred `position` overflows the boundary. `"flip"` tries only the geometrically opposite position (default). `"auto"` evaluates all 12 positions and picks the one with the most available space. `"none"` disables automatic repositioning.
  * @attr {boolean} open - Whether the popover is open.
  * @attr {number} transition-duration - The duration of the transition of the popover. The default value is 100.
  * @attr {number} transition-delay - The delay of the transition of the popover. The default value is 0.
@@ -2311,10 +2313,9 @@ declare const PopoverEventNames: {
  * @prop {ElementStyles | undefined} styles - Stores the CSS variables required for animations.
  * @prop {boolean} transitionComplete - Indicates if the transition is complete.
  * @prop {PopoverRepositionMode} repositionMode - The mode for repositioning the popover.
- * @prop {Array<PositioningShorthandValues>} openPositions - The array of open positions based on the collision edge.
  * @prop {HTMLPopoverElement | undefined} popoverReference - The reference to the popover element.
  * @prop {string | undefined} popoverRole - An optional user-defined role for the popover floating content element.
- * @prop {HTMLElement | undefined} overflowBoundary - The boundary container element of the popover for repositioning.
+ * @prop {HTMLElement | undefined} overflowBoundary - Optional scrolling container used as the collision boundary by `FlexiblePositionStrategy`. When set, overflow is measured against this element instead of the document viewport, and its `scroll` events trigger repositioning. Only relevant when `reposition-mode` is not `"none"`.
  *
  * @slot popover-trigger - Slot for the popover trigger element.
  * @slot popover-content - Slot for the popover content.
@@ -2335,11 +2336,11 @@ declare const PopoverEventNames: {
  * @method createPositioningManager - Creates the positioning manager for the popover.
  * @method removeEventListeners - Removes event listeners from the popover.
  *
- * @fires hide - Emits when the popover is hidden.
- * @fires show - Emits when the popover is shown.
- * @fires toggle - Emits when the popover is toggled.
- * @fires mouseEnter - Emits when the mouse enters the popover.
- * @fires mouseLeave - Emits when the mouse leaves the popover.
+ * @fires hide-popover - Emits when the popover is hidden.
+ * @fires show-popover - Emits when the popover is shown.
+ * @fires toggle-popover - Emits when the popover is toggled.
+ * @fires mouse-enter-popover - Emits when the mouse enters the popover.
+ * @fires mouse-leave-popover - Emits when the mouse leaves the popover.
  *
  * @extends FASTElement
  * @tagname fabric-popover
@@ -2391,6 +2392,13 @@ declare class Popover extends FASTElement {
      * @attr
      */
     position: PositioningShorthandValues;
+    /**
+     * Handles changes to the public `position` attribute.
+     * Updates the positioning strategy and triggers a reposition if the
+     * popover is currently open, without closing/reopening.
+     * @public
+     */
+    positionChanged(): void;
     /**
      * ## targetId
      *
@@ -2412,9 +2420,9 @@ declare class Popover extends FASTElement {
     /**
      * Handles changes to the anchor references.
      * Adds anchor attributes and event listeners when the anchor is added to the DOM.
-     * @public
+     * @internal
      */
-    anchorReferencesChanged(): void;
+    private anchorReferencesChanged;
     /**
      * ## styles
      * @summary used in the class for storing the css variables required for animations
@@ -2472,7 +2480,14 @@ declare class Popover extends FASTElement {
      */
     removeTransitionStyles(): void;
     /**
-     * The mode for repositioning the popover.
+     * The mode for repositioning the popover via `FlexiblePositionStrategy`.
+     *
+     * - `"flip"` (default) — tries only the geometrically opposite position
+     *   (e.g. `above-center` ↔ `below-center`) as a fallback.
+     * - `"auto"` — evaluates all 12 `PositioningShorthand` positions and picks
+     *   the one with the most available space.
+     * - `"none"` — disables automatic repositioning; the popover stays at the
+     *   declared `position`.
      * @public
      * @type {PopoverRepositionMode}
      * @attr reposition-mode
@@ -2486,22 +2501,6 @@ declare class Popover extends FASTElement {
      * @public
      */
     repositionModeChanged(): void;
-    /**
-     * ## openPositions
-     *
-     * @summary The array of open positions based on the collision edge.
-     *
-     * @public
-     * @type {Array<PositioningShorthandValues>}
-     * @observable
-     */
-    openPositions: Array<PositioningShorthandValues>;
-    /**
-     * The original position of the popover before repositioning.
-     * @private
-     * @type {PositioningShorthandValues | undefined}
-     */
-    private originalPopoverPosition;
     /**
      * ## open
      *
@@ -2533,7 +2532,11 @@ declare class Popover extends FASTElement {
      * @observable
      */
     popoverReference: HTMLPopoverElement | undefined;
-    popoverReferenceChanged(): void;
+    /**
+     * Handles changes to the popover reference element.
+     * @internal
+     */
+    private popoverReferenceChanged;
     /**
      * ## popoverRole
      *
@@ -2549,7 +2552,12 @@ declare class Popover extends FASTElement {
      */
     private initializeTargetId;
     /**
-     * The boundary container element of the popover for repositioning.
+     * Optional scrolling container used as the collision boundary by
+     * `FlexiblePositionStrategy`.
+     *
+     * When set, the strategy measures overflow against this element instead of
+     * the document viewport and listens for its `scroll` events to trigger
+     * repositioning. Only relevant when `reposition-mode` is not `"none"`.
      * @public
      * @type {HTMLElement | undefined}
      * @observable
@@ -2612,11 +2620,6 @@ declare class Popover extends FASTElement {
      * @private
      */
     private removeMouseOverEventListeners;
-    /**
-     * Updates the popover position.
-     * @private
-     */
-    private updatePopoverPosition;
     /**
      * ## handleWindowChanges
      *
@@ -2666,28 +2669,14 @@ declare class Popover extends FASTElement {
      */
     private removeOverlayEventListeners;
     /**
-     * ## intersectionObserver
-     *
-     * @summary used for tracking the overflow / collision of the popover to adjacent edges on ui changes. The intersection observer for tracking overflow.
-     * @private
-     * @type {IntersectionObserver | undefined}
-     */
-    private intersectionObserver;
-    /**
-     * ## createOverflowHandler
-     *
-     * @summary handles the overflow of the popover based on the overflowBoundary. Calls handleOverflow when the popover collides with its container or user defined overflowed boundary. Creates the overflow handler based on the overflow boundary.
+     * Checks for overflow and repositions the popover if needed.
+     * Writes the resolved position to a `data-position` attribute on
+     * the internal `.popover` element so shadow-DOM CSS can follow
+     * the repositioned placement without mutating the public `position`
+     * attribute.
      * @private
      */
-    private createOverflowHandler;
-    /**
-     * ## handleOverflow
-     *
-     * @summary Repositions the popover when it collides with its container or user defined overflowed boundary. Handles overflow collisions with the popover. Repositions the popover when it collides with its container or defined boundary. Called by the intersectionObserver in createOverflowHandler.
-     * @private
-     * @param {Array<IntersectionObserverEntry>} entries - The entries to observe.
-     */
-    private handleOverflow;
+    private checkOverflow;
     /**
      * ## addRepositioningHandlers
      *
@@ -2696,9 +2685,13 @@ declare class Popover extends FASTElement {
      */
     addRepositioningHandlers(): void;
     /**
-     * ## addPositioningManager
+     * Creates a new {@link Positioning} instance that wraps `FlexiblePositionStrategy`
+     * for this popover.
      *
-     * @summary Creates a new positioning manager for the popover. The positioning manager is used to calculate the position of the popover based on the anchor and the popover's collision with the window or overflowBoundary. Creates the positioning manager for the popover.
+     * Called every time the popover opens (`openChanged`). Passes the current
+     * `repositionMode`, anchor reference, popover element, optional
+     * `overflowBoundary`, and the `beak` flag so beak-gap offsets are applied
+     * to every candidate position.
      * @public
      */
     createPositioningManager(): void;
@@ -2708,24 +2701,12 @@ declare class Popover extends FASTElement {
      */
     removeEventListeners(): void;
     /**
-     * ## releasePositions
-     *
-     * @summary cleans the positions that are not allowed. Releases the open positions for the popover. Cleans the positions that are not allowed.
-     * @private
-     */
-    private releasePositions;
-    /**
-     * ## repositionPopover
+     * Schedules an overflow check via `FlexiblePositionStrategy` on the next
+     * animation frame using `Updates.enqueue()`.
      *
-     * @summary Updates the position of the popover based on popover collisions. Repositions the popover based on collisions.
-     * @private
-     * @param {Array<PositioningShorthandValues>} openPositions - The array of open positions.
-     */
-    private repositionPopover;
-    /**
-     * ## observePopoverOverflow
-     *
-     * @summary Disconnects and re-observes the popoverReference for overflow. This is used to reposition the popover in the event that it collides with its container or user defined overflowed boundary. Disconnecting is required to reset the baseline for the intersection observer. This method will be called repeatedly on ui changes like resizing the window or scrolling the overflowBoundary. Observes the popover for overflow.  Disconnects and re-observes the popoverReference for overflow.
+     * Coordinates are applied before the popover becomes visible, preventing a
+     * layout flash on open. Also called on every resize and scroll event while
+     * the popover is open.
      * @private
      */
     private observePopoverOverflow;
@@ -2734,9 +2715,9 @@ declare class Popover extends FASTElement {
 
 declare const definition$Q: _microsoft_fast_element.FASTElementDefinition<typeof Popover>;
 
-declare const template$8: ElementViewTemplate<Popover>;
+declare const template$9: ElementViewTemplate<Popover>;
 
-declare const styles$b: _microsoft_fast_element.ElementStyles;
+declare const styles$c: _microsoft_fast_element.ElementStyles;
 
 /**
  * SvgIcon
@@ -2947,7 +2928,7 @@ type TableRowData = {
  * Expand mode for {@link AccordionMenu}
  * @public
  */
-declare const SortDirection: {
+declare const SortDirections: {
     readonly ascending: "ascending";
     readonly descending: "descending";
 };
@@ -2955,7 +2936,7 @@ declare const SortDirection: {
  * Type for the {@link Table} Sort Direction
  * @public
  */
-type SortDirection = ValuesOf<typeof SortDirection>;
+type SortDirection = ValuesOf<typeof SortDirections>;
 
 /**
  * Table
@@ -3117,7 +3098,7 @@ declare class Table extends FASTElement {
      * @param {string} columnKey - The key of the column to sort by.
      * @public
      */
-    sortByColumn(event: Event, columnKey: string): void;
+    sortByColumn(_event: Event, columnKey: string): void;
     /**
      * Creates an SVG icon element from an SVG string.
      * @param {typeof UP_ARROW | typeof DOWN_ARROW} icon - The SVG string to convert.
@@ -3206,9 +3187,9 @@ declare class Table extends FASTElement {
 
 declare const definition$O: _microsoft_fast_element.FASTElementDefinition<typeof Table>;
 
-declare const template$7: ElementViewTemplate<Table>;
+declare const template$8: ElementViewTemplate<Table>;
 
-declare const styles$a: _microsoft_fast_element.ElementStyles;
+declare const styles$b: _microsoft_fast_element.ElementStyles;
 
 /**
  * Simple Table
@@ -3312,7 +3293,7 @@ declare class TableCell extends FASTElement {
  * @public
  * The size variations for the TableCell component.
  */
-declare const TableCellSize: {
+declare const TableCellSizes: {
     readonly small: "small";
     readonly medium: "medium";
     readonly large: "large";
@@ -3321,7 +3302,7 @@ declare const TableCellSize: {
  * @public
  * The size types for the TableCell component.
  */
-type TableCellSize = ValuesOf<typeof TableCellSize>;
+type TableCellSize = ValuesOf<typeof TableCellSizes>;
 
 /**
  *
@@ -3331,9 +3312,9 @@ type TableCellSize = ValuesOf<typeof TableCellSize>;
  */
 declare const definition$M: _microsoft_fast_element.FASTElementDefinition<typeof TableCell>;
 
-declare const styles$9: _microsoft_fast_element.ElementStyles;
+declare const styles$a: _microsoft_fast_element.ElementStyles;
 
-declare const template$6: ElementViewTemplate<TableCell>;
+declare const template$7: ElementViewTemplate<TableCell>;
 
 /** Size values for {@link Tag}. */
 declare const TagSizes: {
@@ -3684,7 +3665,6 @@ declare const TeachingBubbleEventNames: {
  * @csspart heading - Style part for the heading inside the teaching bubble.
  * @csspart footer - Style part for the footer inside the teaching bubble.
  * @csspart arrow - Style part for the arrow of the teaching bubble.
- * @cssprop --fabric-layer-teaching-bubble - Controls the z-index layering token for the teaching bubble host.
  *
  * @method show() - Shows the teaching bubble.
  * @method hide(dismiss: boolean) - Hides the teaching bubble, optionally dismissing it.
@@ -3818,16 +3798,6 @@ declare class TeachingBubble extends FASTElement {
      * @private
      */
     private setElements;
-    /**
-     * Emits the dismiss event from the host.
-     * @private
-     */
-    private emitDismiss;
-    /**
-     * Emits the open-change event from the host.
-     * @private
-     */
-    private emitOpenChange;
     /**
      * Updates the position of the teaching bubble.
      * @private
@@ -3934,6 +3904,7 @@ declare const WizardStepEvents: {
     readonly stepChange: "step-change";
     readonly stepSelect: "step-select";
 };
+type WizardStepEvent = ValuesOf<typeof WizardStepEvents>;
 
 /**
  * WizardStep
@@ -4123,7 +4094,7 @@ declare class WizardStep extends FASTElement {
      * Toggles the active state of the step.
      * @public
      */
-    toggleActive(event?: Event): void;
+    toggleActive(_event?: Event): void;
     /**
      * Sets the step to a complete state.
      * @public
@@ -4362,7 +4333,7 @@ declare class Wizard extends FASTElement {
      * @param {string} oldValue - The previous value of the active ID.
      * @param {string} newValue - The new value of the active ID.
      */
-    activeidChanged(oldValue: string, newValue: string): void;
+    activeidChanged(oldValue: string, _newValue: string): void;
     /**
      * Handles changes to the slotted panels.
      * @public
@@ -4606,6 +4577,7 @@ declare const WizardEvents: {
     readonly wizardChange: "wizard-change";
     readonly wizardComplete: "wizard-complete";
 };
+type WizardEvent = ValuesOf<typeof WizardEvents>;
 
 declare const WizardPanelEventNames: {
     readonly panelChange: "panel-change";
@@ -5333,7 +5305,7 @@ declare const BadgeSize: {
  */
 declare const definition$C: _microsoft_fast_element.FASTElementDefinition<typeof Badge>;
 
-declare const styles$8: _microsoft_fast_element.ElementStyles;
+declare const styles$9: _microsoft_fast_element.ElementStyles;
 
 /**
  *
@@ -5440,6 +5412,69 @@ declare const definition$A: _microsoft_fast_element.FASTElementDefinition<typeof
 declare class CounterBadge extends CounterBadge$1 {
 }
 
+/**
+ * Appearances for {@link CounterBadge}.
+ * @public
+ */
+declare const CounterBadgeAppearances: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+};
+/**
+ * Type describing appearance options for {@link CounterBadge}.
+ * @public
+ */
+type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearances>;
+/**
+ * Colors for {@link CounterBadge}.
+ * @public
+ */
+declare const CounterBadgeColors: {
+    readonly brand: "brand";
+    readonly danger: "danger";
+    readonly important: "important";
+    readonly informative: "informative";
+    readonly severe: "severe";
+    readonly subtle: "subtle";
+    readonly success: "success";
+    readonly warning: "warning";
+};
+/**
+ * Type describing color options for {@link CounterBadge}.
+ * @public
+ */
+type CounterBadgeColor = ValuesOf<typeof CounterBadgeColors>;
+/**
+ * Shapes for {@link CounterBadge}.
+ * @public
+ */
+declare const CounterBadgeShapes: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+};
+/**
+ * Type describing shape options for {@link CounterBadge}.
+ * @public
+ */
+type CounterBadgeShape = ValuesOf<typeof CounterBadgeShapes>;
+/**
+ * Sizes for {@link CounterBadge}.
+ * @public
+ */
+declare const CounterBadgeSizes: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+/**
+ * Type describing size options for {@link CounterBadge}.
+ * @public
+ */
+type CounterBadgeSize = ValuesOf<typeof CounterBadgeSizes>;
+
 /**
  * The Fabric Counter Badge component.
  *
@@ -5487,7 +5522,7 @@ declare const definition$z: _microsoft_fast_element.FASTElementDefinition<typeof
 declare class Dialog extends Dialog$1 {
 }
 
-declare const styles$7: _microsoft_fast_element.ElementStyles;
+declare const styles$8: _microsoft_fast_element.ElementStyles;
 
 /**
  * The Fabric Dialog component.
@@ -5634,13 +5669,13 @@ declare const DividerRoles: {
  */
 type DividerRole = ValuesOf<typeof DividerRoles>;
 
-declare const styles$6: _microsoft_fast_element.ElementStyles;
+declare const styles$7: _microsoft_fast_element.ElementStyles;
 
 /**
  * Template for the {@link Divider} component.
  * @public
  */
-declare const template$5: _microsoft_fast_element.ElementViewTemplate<_fluentui_web_components.Divider, any>;
+declare const template$6: _microsoft_fast_element.ElementViewTemplate<_fluentui_web_components.Divider, any>;
 
 /**
  * The Fabric Divider component.
@@ -6028,7 +6063,7 @@ declare class Listbox extends Listbox$1 {
      * @param prev - the previous multiple value
      * @param next - the current multiple value
      */
-    multipleChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    multipleChanged(_prev: boolean | undefined, next: boolean | undefined): void;
 }
 
 /**
@@ -6074,9 +6109,40 @@ declare const definition$r: _microsoft_fast_element.FASTElementDefinition<typeof
  * @public
  */
 declare class Field extends Field$1 {
+    /**
+     * Sets ARIA and form-related attributes on slotted label elements.
+     * Extends the base implementation to support custom label elements (e.g., fabric-label)
+     * in addition to native HTMLLabelElement.
+     *
+     * @remarks
+     * The base FluentUI implementation only handles native `<label>` elements.
+     * This method ensures that custom elements like `<fabric-label>` are properly
+     * associated with the input via `aria-labelledby`, enabling screen reader support.
+     *
+     * @internal
+     */
+    private setLabelPropertiesExtended;
+    /**
+     * Updates attributes on the slotted label elements.
+     * Overrides base to add support for custom label elements.
+     *
+     * @param prev - the previous list of slotted label elements
+     * @param next - the current list of slotted label elements
+     * @internal
+     */
+    labelSlotChanged(prev: Node[], next: Node[]): void;
+    /**
+     * Updates the field's states and label properties when the assigned input changes.
+     * Overrides base to add support for custom label elements.
+     *
+     * @param prev - the previous input
+     * @param next - the current input
+     * @internal
+     */
+    inputChanged(prev: SlottableInput$1 | undefined, next: SlottableInput$1 | undefined): void;
 }
 
-declare const styles$5: _microsoft_fast_element.ElementStyles;
+declare const styles$6: _microsoft_fast_element.ElementStyles;
 
 /**
  * Label position values exposed by {@link Field}.
@@ -6642,7 +6708,7 @@ declare class MenuItem extends FASTElement {
      * @param prev - the previous state
      * @param next - the next state
      */
-    disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    disabledChanged(_prev: boolean | undefined, next: boolean | undefined): void;
     /**
      * The role of the element.
      *
@@ -6656,7 +6722,7 @@ declare class MenuItem extends FASTElement {
      * @param prev - the previous state
      * @param next - the next state
      */
-    roleChanged(prev: MenuItemRole | undefined, next: MenuItemRole | undefined): void;
+    roleChanged(_prev: MenuItemRole | undefined, next: MenuItemRole | undefined): void;
     /**
      * The checked value of the element.
      *
@@ -6670,7 +6736,7 @@ declare class MenuItem extends FASTElement {
      * @param prev - the previous state
      * @param next - the next state
      */
-    protected checkedChanged(prev: boolean, next: boolean): void;
+    protected checkedChanged(_prev: boolean, next: boolean): void;
     /**
      * The hidden attribute.
      *
@@ -6690,7 +6756,7 @@ declare class MenuItem extends FASTElement {
      *
      * @internal
      */
-    protected slottedSubmenuChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
+    protected slottedSubmenuChanged(_prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
     /**
      * @public
      */
@@ -6774,9 +6840,9 @@ type MenuItemColumnCount = 0 | 1 | 2;
 /** MenuItem styles
  * @public
  */
-declare const styles$4: _microsoft_fast_element.ElementStyles;
+declare const styles$5: _microsoft_fast_element.ElementStyles;
 
-declare const template$4: ElementViewTemplate<MenuItem>;
+declare const template$5: ElementViewTemplate<MenuItem>;
 
 /**
  *
@@ -6789,9 +6855,9 @@ declare const definition$k: _microsoft_fast_element.FASTElementDefinition<typeof
 /** MenuList styles
  * @public
  */
-declare const styles$3: _microsoft_fast_element.ElementStyles;
+declare const styles$4: _microsoft_fast_element.ElementStyles;
 
-declare const template$3: ElementViewTemplate<MenuList>;
+declare const template$4: ElementViewTemplate<MenuList>;
 
 /**
  *
@@ -6832,6 +6898,12 @@ type MenuRepositionMode = ValuesOf<typeof MenuRepositionModes>;
  * Menu
  * @summary A Menu component that provides an interactive menu interface with support for various trigger and open behaviors.
  *
+ * When `reposition-mode="auto"` is set the component creates a {@link MenuPositioning} manager backed by
+ * `FlexiblePositionStrategy`. On every open/resize/scroll cycle the strategy measures available space, picks
+ * the best-fitting position from the preferred position plus its fallbacks, and resizes the menu if there is
+ * not enough available space. Supply `overflowBoundary` to scope collision detection to a specific scrolling
+ * container instead of the viewport.
+ *
  * @example
  * ```html
  * <fabric-menu open-on-hover="true" open-on-context="true" close-on-scroll="true" persist-on-item-click="true">
@@ -6849,8 +6921,10 @@ type MenuRepositionMode = ValuesOf<typeof MenuRepositionModes>;
  * @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".
+ * @attr {MenuPosition | undefined} menu-position - Determines whether the menu list is above or below the trigger. Defaults to `"below"`.
+ * @attr {MenuRepositionMode | undefined} reposition-mode - Controls JS-based repositioning. `"auto"` enables
+ *   `FlexiblePositionStrategy` which detects collisions and flips the menu to the best-fitting position on
+ *   every resize/scroll cycle. `"none"` (default) disables JS repositioning and relies on CSS anchored positioning.
  *
  * @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.
@@ -6859,9 +6933,12 @@ type MenuRepositionMode = ValuesOf<typeof MenuRepositionModes>;
  * @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.
+ * @prop {MenuPosition | undefined} menuPosition - Reflects the active resolved position (`"above"` or `"below"`). May
+ *   differ from the authored `menu-position` attribute when `reposition-mode="auto"` has flipped the menu.
+ * @prop {MenuRepositionMode | undefined} repositionMode - The active repositioning mode (`"auto"` | `"none"`).
+ * @prop {HTMLElement | undefined} overflowBoundary - An optional scrolling container used by the
+ *   `FlexiblePositionStrategy` as the collision boundary instead of the viewport. Only relevant when
+ *   `reposition-mode="auto"`.
  *
  * @slot primary-action - Slot for the primary action element (used when split is true).
  * @slot trigger - Slot for the trigger element.
@@ -6891,21 +6968,6 @@ declare class Menu extends FASTElement {
      * @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
@@ -6936,14 +6998,34 @@ declare class Menu extends FASTElement {
      * @public
      */
     menuPosition?: MenuPosition;
+    /**
+     * Handles changes to the menuPosition attribute.
+     * Updates the positioning strategy and triggers a reposition if
+     * the menu is currently open, without mutating the public attribute.
+     * @public
+     */
+    menuPositionChanged(): void;
     /**
      * The mode for repositioning the menu when it overflows the boundary.
+     *
+     * - `"none"` (default) — no JS-based repositioning; positioning is handled entirely by CSS anchored positioning.
+     * - `"auto"` — enables `FlexiblePositionStrategy`. On every open, resize, and scroll event the strategy
+     *   measures available space, picks the best-fitting position from the preferred position plus its fallbacks,
+     *   and re-applies layout. When the chosen position is `"above"`, bottom-anchored positioning keeps the
+     *   menu's bottom edge pinned to the anchor's top edge so that height constraints shrink it upward.
+     *
      * @public
-     * @default "auto"
+     * @default "none"
      */
     repositionMode?: MenuRepositionMode;
     /**
-     * The overflow boundary element reference.
+     * An optional scrolling container used as the collision boundary by `FlexiblePositionStrategy`.
+     * When provided, the strategy measures overflow against this element's viewport instead of the
+     * document viewport. Only takes effect when `reposition-mode="auto"`.
+     *
+     * Scroll events on this element are listened to and trigger a debounced reposition while the menu
+     * is open.
+     *
      * @public
      */
     overflowBoundary?: HTMLElement;
@@ -6957,6 +7039,16 @@ declare class Menu extends FASTElement {
      * @public
      */
     slottedTriggers: HTMLElement[];
+    /**
+     * Handles menu list slot changes.
+     * @internal
+     */
+    private slottedMenuListChanged;
+    /**
+     * Handles trigger slot changes.
+     * @internal
+     */
+    private slottedTriggersChanged;
     /**
      * Defines whether the menu is open or not.
      * @internal
@@ -6968,61 +7060,37 @@ declare class Menu extends FASTElement {
      */
     private _trigger?;
     /**
-     * The menu list element of the menu which has the popover behavior.
+     * The menu list element of the menu.
      * @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.
+     * Updates menu list open state and ARIA expanded.
      * @private
      */
-    private createOverflowHandler;
+    private setMenuOpenState;
     /**
-     * Checks overflow against custom boundary using direct rect calculations.
-     * Delegates to MenuPositioning for the actual calculation.
+     * Internal open handler used by multiple entry points.
      * @private
      */
-    private checkOverflowWithBoundary;
+    private openMenuInternal;
     /**
-     * Handles overflow collisions with the menu.
+     * Internal close handler used by multiple entry points.
      * @private
      */
-    private handleOverflow;
+    private closeMenuInternal;
     /**
-     * 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.
+     * Delegates resize + flip logic to the positioning strategy.
      * @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.
+     * Schedules a reposition on the next microtask.
      * @private
      */
-    private updateMenuPosition;
+    private scheduleReposition;
     /**
-     * Debounced handler for window changes.
+     * Debounced handler for window resize/scroll changes.
      * @private
      */
     private handleWindowChanges;
@@ -7071,11 +7139,6 @@ declare class Menu extends FASTElement {
      * @public
      */
     setComponent(): void;
-    /**
-     * Sets the menu position.
-     * @public
-     */
-    setMenuPosition(): void;
     /**
      * Toggles the open state of the menu.
      * @public
@@ -7101,13 +7164,6 @@ declare class Menu extends FASTElement {
      * @public
      */
     focusTrigger(): void;
-    /**
-     * Handles the 'toggle' event on the popover.
-     * @public
-     * @param e - the event
-     * @returns void
-     */
-    toggleHandler: (e: Event | ToggleEvent) => void;
     /**
      * Called whenever the 'openOnHover' property changes.
      *
@@ -7115,7 +7171,7 @@ declare class Menu extends FASTElement {
      * @param newValue - The new value of 'openOnHover'.
      * @public
      */
-    openOnHoverChanged(oldValue: boolean, newValue: boolean): void;
+    openOnHoverChanged(_oldValue: boolean, newValue: boolean): void;
     /**
      * Called whenever the 'persistOnItemClick' property changes.
      *
@@ -7123,23 +7179,21 @@ declare class Menu extends FASTElement {
      * @param oldValue - The previous value of 'persistOnItemClick'.
      * @param newValue - The new value of 'persistOnItemClick'.
      */
-    persistOnItemClickChanged(oldValue: boolean, newValue: boolean): void;
+    persistOnItemClickChanged(_oldValue: boolean, newValue: boolean): void;
     /**
-     * Called whenever the 'menuPosition' property changes.
+     * Called whenever the 'repositionMode' property changes.
      *
-     * @param oldValue - The previous value of 'menuPosition'.
-     * @param newValue - The new value of 'menuPosition'.
      * @public
+     * @param oldValue - The previous value of 'repositionMode'.
+     * @param newValue - The new value of 'repositionMode'.
      */
-    menuPositionChanged(): void;
+    repositionModeChanged(_oldValue: MenuRepositionMode, newValue: MenuRepositionMode): void;
     /**
-     * Called whenever the 'repositionMode' property changes.
+     * Called whenever the 'overflowBoundary' property changes.
      *
      * @public
-     * @param oldValue - The previous value of 'repositionMode'.
-     * @param newValue - The new value of 'repositionMode'.
      */
-    repositionModeChanged(oldValue: MenuRepositionMode, newValue: MenuRepositionMode): void;
+    overflowBoundaryChanged(oldValue: HTMLElement | undefined, newValue: HTMLElement | undefined): void;
     /**
      * Called whenever the 'openOnContext' property changes.
      *
@@ -7147,7 +7201,7 @@ declare class Menu extends FASTElement {
      * @param oldValue - The previous value of 'openOnContext'.
      * @param newValue - The new value of 'openOnContext'.
      */
-    openOnContextChanged(oldValue: boolean, newValue: boolean): void;
+    openOnContextChanged(_oldValue: boolean, newValue: boolean): void;
     /**
      * Called whenever the 'closeOnScroll' property changes.
      *
@@ -7155,7 +7209,7 @@ declare class Menu extends FASTElement {
      * @param oldValue - The previous value of 'closeOnScroll'.
      * @param newValue - The new value of 'closeOnScroll'.
      */
-    closeOnScrollChanged(oldValue: boolean, newValue: boolean): void;
+    closeOnScrollChanged(_oldValue: boolean, newValue: boolean): void;
     /**
      * Adds event listeners.
      *
@@ -7183,7 +7237,7 @@ declare class Menu extends FASTElement {
      */
     triggerKeydownHandler: (e: KeyboardEvent) => boolean | void;
     /**
-     * Handles document click events to close a menu opened with contextmenu in popover="manual" mode.
+     * Handles document click events to close the menu when clicking outside (light dismiss).
      * @internal
      * @param e - The event triggered on document click.
      */
@@ -7201,9 +7255,9 @@ declare const definition$i: _microsoft_fast_element.FASTElementDefinition<typeof
 /** Menu styles
  * @public
  */
-declare const styles$2: _microsoft_fast_element.ElementStyles;
+declare const styles$3: _microsoft_fast_element.ElementStyles;
 
-declare const template$2: ElementViewTemplate<Menu>;
+declare const template$3: ElementViewTemplate<Menu>;
 
 /**
  * OptionGroup
@@ -7281,7 +7335,7 @@ declare class OptionGroup extends FASTElement {
      * @param next - The new disabled state.
      * @internal
      */
-    disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    disabledChanged(_prev: boolean | undefined, next: boolean | undefined): void;
     connectedCallback(): void;
     /**
      * Handles changes to the label attribute.
@@ -7308,9 +7362,9 @@ declare const definition$h: _microsoft_fast_element.FASTElementDefinition<typeof
  *
  * @public
  */
-declare const styles$1: _microsoft_fast_element.ElementStyles;
+declare const styles$2: _microsoft_fast_element.ElementStyles;
 
-declare const template$1: ElementViewTemplate<OptionGroup>;
+declare const template$2: ElementViewTemplate<OptionGroup>;
 
 /**
  * Predicate function that determines if the element should be considered an option group.
@@ -7618,6 +7672,12 @@ declare const TextInputTypes: {
     readonly url: "url";
 };
 type TextInputType = ValuesOf<typeof TextInputTypes>;
+/**
+ * Input types that block implicit form submission.
+ *
+ * @public
+ */
+declare const ImplicitSubmissionBlockingTypes$1: string[];
 
 /**
  * A Text Input Custom HTML Element.
@@ -7665,7 +7725,7 @@ declare class BaseTextInput extends FASTElement {
      *
      * @internal
      */
-    currentValueChanged(prev: string, next: string): void;
+    currentValueChanged(_prev: string, next: string): void;
     /**
      * The default slotted content. This is the content that appears in the text field label.
      *
@@ -7677,7 +7737,7 @@ declare class BaseTextInput extends FASTElement {
      *
      * @internal
      */
-    defaultSlottedNodesChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    defaultSlottedNodesChanged(_prev: Node[] | undefined, next: Node[] | undefined): void;
     /**
      * Sets the directionality of the element to be submitted with form data.
      * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/dirname | `dirname`} attribute
@@ -7811,7 +7871,7 @@ declare class BaseTextInput extends FASTElement {
      *
      * @internal
      */
-    requiredChanged(previous: boolean, next: boolean): void;
+    requiredChanged(_previous: boolean, next: boolean): void;
     /**
      * Sets the width of the element to a specified number of characters.
      *
@@ -8220,7 +8280,7 @@ declare class SearchBox extends TextInput {
      *
      * @internal
      */
-    currentValueChanged(prev: string, next: string): void;
+    currentValueChanged(_prev: string, next: string): void;
     /**
      * Clear the search box value
      * @method
@@ -8284,6 +8344,12 @@ declare const SearchBoxTypes: {
     readonly url: "url";
 };
 type SearchBoxType = ValuesOf<typeof SearchBoxTypes>;
+/**
+ * Input types that block implicit form submission.
+ *
+ * @public
+ */
+declare const ImplicitSubmissionBlockingTypes: string[];
 /**
  * SearchBox event names.
  *
@@ -8710,17 +8776,54 @@ declare class TextArea extends TextArea$1 {
  */
 declare const definition$6: _microsoft_fast_element.FASTElementDefinition<typeof TextArea>;
 
+/** Appearance values for {@link TextArea}. */
+declare const TextareaAppearances: {
+    readonly outline: "outline";
+    readonly filledLighter: "filled-lighter";
+    readonly filledDarker: "filled-darker";
+};
+/** Type describing appearance options for {@link TextArea}. */
+type TextareaAppearance = ValuesOf<typeof TextareaAppearances>;
+/** Autocomplete values for {@link TextArea}. */
+declare const TextareaAutocompletes: {
+    readonly on: "on";
+    readonly off: "off";
+};
+/** Type describing autocomplete options for {@link TextArea}. */
+type TextareaAutocomplete = ValuesOf<typeof TextareaAutocompletes>;
+/** Resize values for {@link TextArea}. */
+declare const TextareaResizes: {
+    readonly none: "none";
+    readonly both: "both";
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+/** Type describing resize options for {@link TextArea}. */
+type TextareaResize = ValuesOf<typeof TextareaResizes>;
+/** Size values for {@link TextArea}. */
+declare const TextareaSizes: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/** Type describing size options for {@link TextArea}. */
+type TextareaSize = ValuesOf<typeof TextareaSizes>;
+/** Appearance values that support display shadows for {@link TextArea}. */
+declare const TextareaAppearancesForDisplayShadows: readonly (TextAreaAppearance | undefined)[];
+/** Type describing appearance values that support display shadows for {@link TextArea}. */
+type TextareaAppearancesForDisplayShadow = ValuesOf<typeof TextareaAppearancesForDisplayShadows>;
+
 /**
  * Styles for the TextInput component.
  *
  * @public
  */
-declare const styles: ElementStyles;
+declare const styles$1: ElementStyles;
 
 /**
  * @internal
  */
-declare const template: ElementViewTemplate<TextInput>;
+declare const template$1: ElementViewTemplate<TextInput>;
 
 /**
  * The Fabric Text Input component.
@@ -8745,7 +8848,7 @@ declare const definition$5: _microsoft_fast_element.FASTElementDefinition<typeof
  * @attr {boolean} italic - The text style is italic.
  * @attr {boolean} underline - The text style is underline.
  * @attr {boolean} strikethrough - The text style is strikethrough.
- * @attr {boolean} block - An text can take up the width of its container.
+ * @attr {boolean} block - A text can take up the width of its container.
  * @attr {TextSize} size - The Text size. One of '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'.
  * @attr {TextFont} font - The Text font. One of 'base', 'numeric', 'monospace'.
  * @attr {TextWeight} weight - The Text weight. One of 'medium', 'regular', 'semibold', 'bold'.
@@ -8756,13 +8859,13 @@ declare const definition$5: _microsoft_fast_element.FASTElementDefinition<typeof
  * @prop {boolean} italic - The text style is italic.
  * @prop {boolean} underline - The text style is underline.
  * @prop {boolean} strikethrough - The text style is strikethrough.
- * @prop {boolean} block - An text can take up the width of its container.
+ * @prop {boolean} block - A text can take up the width of its container.
  * @prop {TextSize} size - The Text size.
  * @prop {TextFont} font - The Text font.
  * @prop {TextWeight} weight - The Text weight.
  * @prop {TextAlign} align - The Text alignment.
  *
- * @slot - The default slot for text content.
+ * @slot default - The default slot for text content.
  *
  * @extends FluentText
  * @tagname fabric-text
@@ -8778,6 +8881,40 @@ declare class Text extends Text$1 {
  */
 declare const definition$4: _microsoft_fast_element.FASTElementDefinition<typeof Text>;
 
+declare const TextAligns: {
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly justify: "justify";
+};
+type TextAlign = ValuesOf<typeof TextAligns>;
+declare const TextFonts: {
+    readonly base: "base";
+    readonly numeric: "numeric";
+    readonly monospace: "monospace";
+};
+type TextFont = ValuesOf<typeof TextFonts>;
+declare const TextSizes: {
+    readonly _100: "100";
+    readonly _200: "200";
+    readonly _300: "300";
+    readonly _400: "400";
+    readonly _500: "500";
+    readonly _600: "600";
+    readonly _700: "700";
+    readonly _800: "800";
+    readonly _900: "900";
+    readonly _1000: "1000";
+};
+type TextSize = ValuesOf<typeof TextSizes>;
+declare const TextWeights: {
+    readonly medium: "medium";
+    readonly regular: "regular";
+    readonly semibold: "semibold";
+    readonly bold: "bold";
+};
+type TextWeight = ValuesOf<typeof TextWeights>;
+
 /**
  * Tree
  * @summary A Fabric UI Tree component that extends Fluent UI's Tree with custom styling and behavior.
@@ -8819,6 +8956,22 @@ declare const definition$4: _microsoft_fast_element.FASTElementDefinition<typeof
  * @public
  */
 declare class Tree extends Tree$1 {
+    /**
+     * Overrides the upstream click handler to resolve the closest tree item
+     * from the event target. The upstream implementation uses `e.target` directly,
+     * which fails when the click originates from a child element (e.g., an icon
+     * in the `start` slot or text inside the default slot wrapper).
+     *
+     * @internal
+     */
+    clickHandler(e: Event): boolean | void;
+    /**
+     * Walks up the DOM from the event target to find the nearest tree item.
+     * The upstream `isTreeItem` check uses `e.target` directly, which fails
+     * when the click originates from a slotted child element (e.g., an icon
+     * in the `start` slot or text inside the default slot wrapper).
+     */
+    private findClosestTreeItem;
 }
 
 /**
@@ -8885,6 +9038,10 @@ declare const definition$3: _microsoft_fast_element.FASTElementDefinition<typeof
 declare class TreeItem extends TreeItem$1 {
 }
 
+declare const template: ElementViewTemplate<TreeItem>;
+
+declare const styles: _microsoft_fast_element.ElementStyles;
+
 /**
  * The Fabric TreeItem component.
  *
@@ -9045,6 +9202,33 @@ declare const definition$1: _microsoft_fast_element.FASTElementDefinition<typeof
  * @public
  */
 declare class Tooltip extends Tooltip$1 {
+    private showTimer;
+    private hideTimer;
+    private static readonly DEFAULT_DELAY;
+    /**
+     * Resolves the anchor element from the DOM.
+     */
+    private get resolvedAnchorElement();
+    /**
+     * Handles Escape key to dismiss the tooltip.
+     * Required because `popover="manual"` does not support native light-dismiss.
+     */
+    private handleKeydown;
+    disconnectedCallback(): void;
+    /**
+     * Shows the tooltip after the specified delay.
+     * Cancels any pending hide timer to prevent conflicts.
+     * @param delay - Number of milliseconds to delay showing the tooltip
+     * @internal
+     */
+    showTooltip(delay?: number): void;
+    /**
+     * Hides the tooltip after the specified delay.
+     * Cancels any pending show timer so the tooltip won't appear after the mouse leaves.
+     * @param delay - Number of milliseconds to delay hiding the tooltip
+     * @internal
+     */
+    hideTooltip(delay?: number): void;
 }
 
 /**
@@ -9084,19 +9268,327 @@ declare const disabledState: ":state(disabled)" | "[state--disabled]";
 declare const expandedState: ":state(expanded)" | "[state--expanded]";
 
 /**
- * A value that can be statically composed into a
- * foundation template.
- * @remarks
- * When providing a string, take care to ensure that it is
- * safe and will not enable an XSS attack.
+ * Checks whether the specified element is disabled.
+ * @param {Element} el The element to check.
+ */
+declare function isDisabledElement(el: Element): el is HTMLElement;
+/**
+ * Checks whether the specified element is hidden.
+ * @param {Element} el The element to check.
+ */
+declare function isHiddenElement(el: Element): el is HTMLElement;
+/**
+ * Checks whether the specified element is focusable.
+ * @param {Element} el The element to check.
+ */
+declare function isFocusableElement(el: Element): el is HTMLElement;
+/**
+ * Sets focusability of all focusable children within an element
+ * @private
+ * @param {HTMLElement} element - The parent element
+ * @param {boolean} focusable - Whether children should be focusable
+ */
+declare function setChildrenFocusability(element: HTMLElement, focusable: boolean): void;
+
+type Constructor = new (...args: unknown[]) => unknown;
+/**
+ * Apply mixins to a constructor.
+ * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ *
+ * TODO: Remove with https://github.com/microsoft/fast/pull/6797
+ * This was used for Badge where start/end was not yet implemented.
+ * The method itself was deprecated as it was largely intended to be "internals" for Fast Foundation.
+ * Adding here to avoid breaking of the existing API.
+ * @internal
+ */
+declare function applyMixins(derivedCtor: Constructor, ...baseCtors: Constructor[]): void;
+
+/**
+ * Sets the specified attributes on the given HTML element.
+ * @param {HTMLElement} element The HTML element on which to set attributes.
+ * @param {{[key: string]: string}} attributes An object mapping attribute names to values.
+ */
+declare function setAttributes(element: HTMLElement, attributes: {
+    [key: string]: string;
+}): void;
+
+/**
+ * debounce function
+ * @param func - function to be debounced
+ * @param delay - delay in milliseconds
+ */
+declare function debounce(func: (...args: unknown[]) => void, delay: number): (this: unknown, ...args: unknown[]) => void;
+
+/**
+ * Holds a collection of debug-related functions. When the instance is not in debug mode, most/all of
+ * the side-effects will be disabled.
+ */
+declare class debug {
+    static assertFailFunction: (message: string) => void;
+    static setAssertFailFunction(f: (message: string) => void): void;
+    /**
+     * Asserts that the condition is true, fails otherwise.
+     */
+    static assert(conditionFunc: () => boolean, message?: string): void;
+    /**
+     * Asserts that the value is neither null nor undefined, fails otherwise.
+     */
+    static assertDefined<T>(value: T, message: string): void;
+    /**
+     * Asserts that the value is neither null nor undefined, and has a length property that returns greater than zero, fails otherwise.
+     */
+    static assertNonEmpty<T>(value: ArrayLike<T>, message: string): void;
+    /**
+     * Asserts that this function is never called. This is to be used
+     */
+    static assertNever(neverValue: never): void;
+    static assertFail(message: string): void;
+    static log(message: string, ...optionalParams: unknown[]): void;
+    static logDebug(message: string, ...optionalParams: unknown[]): void;
+    static warn(message: string, ...optionalParams: unknown[]): void;
+    static execute(action: () => void): void;
+    private static enabled;
+    static enable(): void;
+}
+
+/**
+ * This module provides a composable system for detecting and monitoring text direction
+ * (LTR/RTL) changes in web applications. It follows a strategy/observer pattern to allow
+ * flexibility for the many ways that direction can be controlled in the document.
+ *
+ * ## Architecture
+ *
+ * The system uses two complementary interfaces:
+ *
+ * - **DirectionStrategy**: Detection - reads direction from a source (CSS, attributes, etc.)
+ * - **DirectionObserver**: Change monitoring - watches for direction changes and notifies
+ *
+ * The `DirectionDetector` class combines the detection and observer strategies to provide
+ * robust direction detection with automatic change notifications.
+ *
+ * ## Built-in Strategies
+ *
+ * - `DirAttributeStrategy`: Reads the `dir` attribute from elements
+ * - `ElementCssStrategy`: Reads computed CSS `direction` property
+ *
+ * ## Built-in Observers
+ *
+ * - `DirAttributeObserver`: Watches for `dir` attribute mutations via MutationObserver
+ *
+ * ## Global DirectionDetector
+ *
+ * A singleton detector is available via `globalDirectionDetector()`. By default, it
+ * monitors the `dir` attribute on the `<html>` element. This is the detector used by the
+ * components in this package to correctly adjust layout, keyboard navigation, etc.
+ *
+ * To customize the global detector, call `setGlobalDirectionDetector()`:
+ *
+ * ```typescript
+ * import {
+ *   setGlobalDirectionDetector,
+ *   DirectionDetector,
+ *   DirAttributeStrategy,
+ *   DirAttributeObserver
+ * } from "@fabric-msft/fabric-web";
+ *
+ * setGlobalDirectionDetector(
+ *   new DirectionDetector({
+ *     strategies: [new DirAttributeStrategy([document.documentElement])],
+ *     observers: [new DirAttributeObserver("html")],
+ *     onChange: (dir) => console.log("Global direction:", dir)
+ *   })
+ * );
+ * ```
+ *
+ * ## Defaults
+ *
+ * The default global DirectionDetector will monitor the `dir` attribute on the
+ * `html` element. You do not need to set anything if this is the strategy that your app
+ * uses to control document direction.
+ *
+ * ```html
+ * <html dir="rtl">
+ * ```
+ *
+ * ## Custom DirectionDetector
+ *
+ * ```typescript
+ * import {
+ *   DirectionDetector,
+ *   DirAttributeStrategy,
+ *   DirAttributeObserver
+ * } from "@fabric-msft/fabric-web";
+ *
+ * const detector = new DirectionDetector({
+ *   strategies: [new DirAttributeStrategy([document.documentElement])],
+ *   observers: [new DirAttributeObserver("html")],
+ *   onChange: (dir, { previous }) => {
+ *     console.log(`Direction changed: ${previous} → ${dir}`);
+ *   }
+ * });
+ *
+ * // Access current direction
+ * console.log(detector.value); // 'ltr' or 'rtl'
+ *
+ * // Clean up when done
+ * detector.stop();
+ * ```
+ */
+/**
+ * Determines the current localization direction of an element.
+ *
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @returns the localization direction of the element
+ *
  * @public
  */
-type StaticallyComposableHTML<TSource = unknown, TParent = unknown> = string | HTMLDirective | SyntheticViewTemplate<TSource, TParent> | undefined;
+declare const getDirection: (rootNode: HTMLElement) => Direction;
+declare function isRtl(): boolean;
+type DirectionOrNull = Direction | null;
 /**
- * A function to compose template options.
+ * Interface for direction detection strategies.
+ * Strategies are pure functions that detect direction from a source.
  * @public
  */
-declare function staticallyCompose<TSource = unknown, TParent = unknown>(item: StaticallyComposableHTML<TSource, TParent>): CaptureType<TSource, TParent>;
+interface DirectionStrategy {
+    /**
+     * Get the current direction value.
+     */
+    getDirection(): DirectionOrNull;
+}
+/**
+ * Interface for observing direction changes.
+ * Observers monitor a source and notify when changes may have occurred.
+ * @public
+ */
+interface DirectionObserver {
+    /**
+     * Start observing for direction changes.
+     * @param notify - Callback to invoke when a change may have occurred.
+     */
+    start(notify: () => void): void;
+    /**
+     * Stop observing and clean up resources.
+     */
+    stop(): void;
+}
+interface DirectionDetectorOptions {
+    /**
+     * Ordered list of strategies. First strategy that yields a non-null direction wins.
+     */
+    strategies: DirectionStrategy[];
+    /**
+     * Optional observers to monitor for direction changes.
+     * When any observer fires, the detector will recompute direction.
+     */
+    observers?: DirectionObserver[];
+    /**
+     * Called when the resolved direction changes.
+     */
+    onChange?: (dir: DirectionOrNull, info: {
+        previous: DirectionOrNull;
+    }) => void;
+}
+/**
+ * Detects and (optionally) observes direction using a chain of strategies.
+ * The first strategy to return a non-null direction wins.
+ * @public
+ */
+declare class DirectionDetector {
+    private readonly strategies;
+    private readonly observers;
+    private readonly onChange?;
+    private rafId;
+    private _value;
+    private observing;
+    constructor(options: DirectionDetectorOptions);
+    get value(): Direction;
+    /**
+     * Start all observers.
+     */
+    private start;
+    /**
+     * Stop observing and cancel any scheduled refresh.
+     */
+    stop(): void;
+    stable(): boolean;
+    /**
+     * Force recomputation; invokes onChange only if the resolved direction changed.
+     */
+    refresh(): DirectionOrNull;
+    private computeDirection;
+}
+declare function setGlobalDirectionDetector(detector: DirectionDetector): void;
+declare function globalDirectionDetector(): DirectionDetector;
+
+declare const inputElementMethods: string[];
+
+declare class MockElementInternals implements ElementInternals {
+    ariaDescription: string | null;
+    ariaBrailleLabel: string | null;
+    ariaBrailleRoleDescription: string | null;
+    private _form;
+    private _labels;
+    private _element;
+    constructor(element: HTMLElement);
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get shadowRoot(): null;
+    get states(): Set<string>;
+    get validationMessage(): string;
+    get validity(): ValidityState;
+    get willValidate(): boolean;
+    role: string;
+    ariaAtomic: string;
+    ariaAutoComplete: string;
+    ariaBusy: string;
+    ariaChecked: string;
+    ariaColCount: string;
+    ariaColIndex: string;
+    ariaColIndexText: string;
+    ariaColSpan: string;
+    ariaCurrent: string;
+    ariaDisabled: string;
+    ariaExpanded: string;
+    ariaHasPopup: string;
+    ariaHidden: string;
+    ariaInvalid: string;
+    ariaKeyShortcuts: string;
+    ariaLabel: string;
+    ariaLevel: string;
+    ariaLive: string;
+    ariaModal: string;
+    ariaMultiLine: string;
+    ariaMultiSelectable: string;
+    ariaOrientation: string;
+    ariaPlaceholder: string;
+    ariaPosInSet: string;
+    ariaPressed: string;
+    ariaReadOnly: string;
+    ariaRelevant: string;
+    ariaRequired: string;
+    ariaRoleDescription: string;
+    ariaRowCount: string;
+    ariaRowIndex: string;
+    ariaRowIndexText: string;
+    ariaRowSpan: string;
+    ariaSelected: string;
+    ariaSetSize: string;
+    ariaSort: string;
+    ariaValueMax: string;
+    ariaValueMin: string;
+    ariaValueNow: string;
+    ariaValueText: string;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setFormValue(_value: File | string | FormData | null, _state?: File | string | FormData | null): void;
+    setValidity(_flags: ValidityStateFlags, _message?: string, _anchor?: HTMLElement): void;
+}
+/**
+ * If the HTMLElement prototype does not have the attachInternals method, add it.
+ * This is used to create a new MockElementInternals instance when the element is attached to the DOM.
+ */
+declare function attachMockElementInternals(): void;
 
 /**
  * This function is used to toggle a state on the control. If the browser supports Custom States, the state is toggled
@@ -9114,18 +9606,160 @@ declare function staticallyCompose<TSource = unknown, TParent = unknown>(item: S
  */
 declare function toggleState(elementInternals: ElementInternals | undefined, state: string | undefined, force?: boolean): void;
 
-type Constructor = new (...args: unknown[]) => unknown;
 /**
- * Apply mixins to a constructor.
- * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ * Options for creating a roving focus controller.
  *
- * TODO: Remove with https://github.com/microsoft/fast/pull/6797
- * This was used for Badge where start/end was not yet implemented.
- * The method itself was deprecated as it was largely intended to be "internals" for Fast Foundation.
- * Adding here to avoid breaking of the existing API.
- * @internal
+ * @public
  */
-declare function applyMixins(derivedCtor: Constructor, ...baseCtors: Constructor[]): void;
+interface RovingFocusOptions {
+    /**
+     * Function that returns the current list of elements to manage.
+     * Called fresh each time to support dynamic slot changes.
+     */
+    items: () => HTMLElement[];
+    /**
+     * Filter function to determine if an element is disabled.
+     * Default: checks for `disabled`, `aria-disabled="true"`, or `inert` attributes.
+     */
+    isDisabled?: (el: HTMLElement) => boolean;
+    /**
+     * Navigation orientation.
+     * - "vertical": ArrowUp/ArrowDown (default)
+     * - "horizontal": ArrowLeft/ArrowRight
+     * - "both": All four arrow keys
+     */
+    orientation?: "vertical" | "horizontal" | "both";
+    /**
+     * Enable Home/End key support.
+     * @default true
+     */
+    enableHomeEnd?: boolean;
+    /**
+     * Enable wrapping at boundaries.
+     * @default true
+     */
+    wrap?: boolean;
+    /**
+     * Whether handleKeydown calls preventDefault for handled keys.
+     * @default true
+     */
+    preventDefault?: boolean;
+    /**
+     * Custom focus implementation for components with internal focusable elements
+     * (e.g., Prompt with internal button). If not provided, calls `el.focus()`.
+     */
+    focusItem?: (el: HTMLElement) => void;
+    /**
+     * Callback fired when the active item changes.
+     */
+    onFocusChange?: (el: HTMLElement, index: number) => void;
+    /**
+     * Function to determine if the component is in RTL mode.
+     * When true, horizontal arrow keys are swapped.
+     * @default () => false
+     */
+    isRtl: () => boolean;
+}
+/**
+ * Controller interface for managing roving tabindex focus.
+ *
+ * @remarks
+ * Invariants enforced by this controller:
+ * 1. Exactly one enabled item has `tabindex="0"` (the "active" item)
+ * 2. All other managed items have `tabindex="-1"`
+ * 3. When focus moves: new item gets tabindex=0, previous active gets -1, new item receives focus
+ *
+ * @public
+ */
+interface RovingFocusController {
+    /**
+     * Apply roving tabindex. Preserves current active if still valid and enabled;
+     * otherwise falls back to first enabled. If no enabled items, all get tabindex=-1.
+     */
+    applyTabindex(): void;
+    /**
+     * Move focus by delta (+1 or -1).
+     * @returns true if focus moved successfully
+     */
+    move(delta: 1 | -1): boolean;
+    /**
+     * Focus first enabled item.
+     * @returns true if successful
+     */
+    focusFirst(): boolean;
+    /**
+     * Focus last enabled item.
+     * @returns true if successful
+     */
+    focusLast(): boolean;
+    /**
+     * Focus specific item.
+     * @returns false if item is not in list or is disabled
+     */
+    focus(item: HTMLElement): boolean;
+    /**
+     * Sync active tabindex to match a target element (use on focusin/click).
+     * Updates tabindex without calling focus() to avoid jumpy behavior.
+     * @returns true if target was found and made active
+     */
+    sync(target: EventTarget | null): boolean;
+    /**
+     * Handle keydown event.
+     * @returns true if handled. Calls preventDefault() when configured.
+     */
+    handleKeydown(event: KeyboardEvent): boolean;
+    /**
+     * Clean up (for lifecycle symmetry; currently a no-op).
+     */
+    destroy(): void;
+}
+/**
+ * Creates a roving focus controller for managing keyboard navigation
+ * across a list of elements using the roving tabindex pattern.
+ *
+ * @example
+ * ```typescript
+ * const controller = createRovingFocusController({
+ *   items: () => this.slottedPills ?? [],
+ *   orientation: "vertical",
+ *   enableHomeEnd: true,
+ *   wrap: true
+ * });
+ *
+ * // In connectedCallback or setup:
+ * controller.applyTabindex();
+ *
+ * // In keydown handler:
+ * if (controller.handleKeydown(event)) return;
+ * // ...handle other keys like Escape
+ * ```
+ *
+ * @public
+ */
+declare function createRovingFocusController(options: RovingFocusOptions): RovingFocusController;
+
+/**
+ * Creates a unique ID string using a prefix and counter as salt for the random hex.
+ * @param prefix - The prefix string for the ID
+ * @param counter - Optional. A counter value used as salt for additional uniqueness
+ * @returns A unique ID string in the format `{prefix}{counter}-{randomHex}`
+ */
+declare function createUniqueId(prefix: string, counter?: number): string;
+
+/**
+ * A value that can be statically composed into a
+ * foundation template.
+ * @remarks
+ * When providing a string, take care to ensure that it is
+ * safe and will not enable an XSS attack.
+ * @public
+ */
+type StaticallyComposableHTML<TSource = unknown, TParent = unknown> = string | HTMLDirective | SyntheticViewTemplate<TSource, TParent> | undefined;
+/**
+ * A function to compose template options.
+ * @public
+ */
+declare function staticallyCompose<TSource = unknown, TParent = unknown>(item: StaticallyComposableHTML<TSource, TParent>): CaptureType<TSource, TParent>;
 
 /**
  * filters out any whitespace-only nodes, to be used inside a template.
@@ -9139,6 +9773,6 @@ declare function applyMixins(derivedCtor: Constructor, ...baseCtors: Constructor
  */
 declare const whitespaceFilter: ElementsFilter;
 
-export { Accordion, definition$F as AccordionDefinition, AccordionExpandModes, AccordionItem, definition$G as AccordionItemDefinition, AccordionItemMarkerPositions, AccordionItemSizes, AccordionMenu, definition$11 as AccordionMenuDefinition, AccordionMenuExpandModes, AccordionMenuPanel, definition$10 as AccordionMenuPanelDefinition, AccordionMenuPanelMarkerPositions, AccordionMenuPanelSizes, styles$e as AccordionMenuPanelStyles, template$b as AccordionMenuPanelTemplate, styles$f as AccordionMenuStyles, template$c as AccordionMenuTemplate, AnchorButton, AnchorButtonAppearance, AnchorButtonAppearances, definition$n as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonShapes, AnchorButtonSize, AnchorButtonSizes, AnchorTarget, AnchorTargets, Avatar, AvatarActive, AvatarActives, AvatarAppearance, AvatarAppearances, AvatarColor, AvatarColors, definition$D as AvatarDefinition, AvatarNamedColor, AvatarNamedColors, AvatarShape, AvatarShapes, AvatarSize, AvatarSizes, Badge, BadgeAppearance, BadgeAppearances, BadgeColor, BadgeColors, definition$C as BadgeDefinition, BadgeShape, BadgeShapes, BadgeSize, BadgeSizes, Button, ButtonAppearances, definition$B as ButtonDefinition, ButtonFormTargets, ButtonShapes, ButtonSizes, styles$8 as ButtonStyles, ButtonTypes, Card, CardAppearance, CardAppearances, definition$$ as CardDefinition, CardEventNames, CardFocusMode, CardFocusModes, CardFooter, definition$_ as CardFooterDefinition, CardHeader, definition$Z as CardHeaderDefinition, CardOrientation, CardOrientations, CardPreview, definition$Y as CardPreviewDefinition, styles$d as CardStyles, template$a as CardTemplate, Carousel, definition$X as CarouselDefinition, styles$c as CarouselStyles, template$9 as CarouselTemplate, Checkbox, definition$A as CheckboxDefinition, CheckboxShapes, CheckboxSizes, CollisionEdges, CompoundButton, CompoundButtonAppearances, definition$V as CompoundButtonDefinition, CompoundButtonFormTargets, CompoundButtonShapes, CompoundButtonSizes, CompoundButtonTypes, CounterBadge, definition$z as CounterBadgeDefinition, Dialog, DialogBody, definition$x as DialogBodyDefinition, definition$y as DialogDefinition, styles$7 as DialogStyles, DialogTypes, Divider, DividerAlignContents, DividerAppearances, definition$w as DividerDefinition, DividerOrientations, DividerRoles, styles$6 as DividerStyles, template$5 as DividerTemplate, Drawer, DrawerBody, definition$u as DrawerBodyDefinition, definition$v as DrawerDefinition, DrawerPositions, DrawerSizes, DrawerTypes, Dropdown, DropdownAppearances, definition$t as DropdownDefinition, DropdownOption, definition$s as DropdownOptionDefinition, DropdownSizes, DropdownTypes, DesignSystem as FabricDesignSystem, Field, definition$q as FieldDefinition, FieldLabelPosition, FieldLabelPositions, styles$5 as FieldStyles, FilterPill, FilterPillAppearances, definition$W as FilterPillDefinition, FilterPillEventNames, FilterPillFormTargets, FilterPillShapes, FilterPillSizes, FilterPillTypes, Image, definition$p as ImageDefinition, ImageFits, ImageShapes, Label, definition$o as LabelDefinition, LabelPositions, LabelSizes, LabelWeights, Link, LinkAppearance, LinkAppearances, definition$E as LinkDefinition, LinkTarget, LinkTargets, Listbox, definition$r as ListboxDefinition, LoadingButton, definition$U as LoadingButtonDefinition, Menu, MenuButton, MenuButtonAppearances, definition$l as MenuButtonDefinition, MenuButtonShapes, MenuButtonSizes, definition$i as MenuDefinition, MenuGroupRoles, MenuItem, definition$k as MenuItemDefinition, MenuItemRoles, styles$4 as MenuItemStyles, template$4 as MenuItemTemplate, MenuList, definition$j as MenuListDefinition, styles$3 as MenuListStyles, template$3 as MenuListTemplate, MenuPositions, MenuRepositionModes, styles$2 as MenuStyles, template$2 as MenuTemplate, MessageBar, definition$m as MessageBarDefinition, MultiView, MultiViewController, definition$S as MultiViewControllerDefinition, definition$T as MultiViewDefinition, MultiViewEventNames, MultiViewGroup, definition$R as MultiViewGroupDefinition, MultiViewGroupPositions, OptionGroup, definition$h as OptionGroupDefinition, Popover, definition$Q as PopoverDefinition, PopoverEventNames, PopoverPositions, PopoverRepositionModes, styles$b as PopoverStyles, template$8 as PopoverTemplate, PositioningShorthand, ProgressBar, definition$g as ProgressBarDefinition, ProgressBarShapes, ProgressBarThicknesses, ProgressBarValidationStates, Radio, definition$e as RadioDefinition, RadioGroup, definition$f as RadioGroupDefinition, RadioGroupOrientations, RatingDisplay, RatingDisplayColors, definition$d as RatingDisplayDefinition, RatingDisplaySizes, SearchBox, SearchBoxAppearances, SearchBoxControlSizes, definition$c as SearchBoxDefinition, SearchBoxEventNames, SearchBoxTypes, SimpleTable, definition$N as SimpleTableDefinition, Slider, definition$b as SliderDefinition, SliderEventNames, SliderModes, SliderOrientations, SliderSizes, SlottableInputs, SortDirection, Spinner, SpinnerAppearances, definition$a as SpinnerDefinition, SpinnerSizes, SvgIcon, definition$P as SvgIconDefinition, Switch, definition$9 as SwitchDefinition, Tab, definition$8 as TabDefinition, Table, TableCell, definition$M as TableCellDefinition, TableCellSize, styles$9 as TableCellStyles, template$6 as TableCellTemplate, definition$O as TableDefinition, styles$a as TableStyles, template$7 as TableTemplate, Tablist, TablistAppearances, definition$7 as TablistDefinition, TablistEventNames, TablistOrientations, TablistSizes, Tag, TagAppearances, definition$L as TagDefinition, TagEventNames, TagShapes, TagSizes, TagTextSizes, TeachingBubble, definition$K as TeachingBubbleDefinition, TeachingBubbleEventNames, TeachingBubblePlacements, TeachingBubbleSizes, Text, TextArea, definition$6 as TextAreaDefinition, definition$4 as TextDefinition, TextInput, TextInputAppearances, TextInputControlSizes, definition$5 as TextInputDefinition, styles as TextInputStyles, template as TextInputTemplate, TextInputTypes, ToggleButton, ToggleButtonAppearances, definition$1 as ToggleButtonDefinition, ToggleButtonFormTargets, ToggleButtonShapes, ToggleButtonSizes, ToggleButtonTypes, Tooltip, definition as TooltipDefinition, TooltipPositioningOptions, Tree, definition$3 as TreeDefinition, TreeItem, definition$2 as TreeItemDefinition, ValidationFlags, Wizard, definition$J as WizardDefinition, WizardEvents, WizardPanel, definition$I as WizardPanelDefinition, WizardPanelEventNames, WizardPanelStates, WizardStep, definition$H as WizardStepDefinition, WizardStepEvents, WizardStepStates, applyMixins, disabledState, expandedState, getOptionsFromElement, isOptionGroup, styles$1 as optionGroupStyles, template$1 as optionGroupTemplate, roleForMenuGroup, roleForMenuItem, staticallyCompose, toggleState, whitespaceFilter };
-export type { AccordionExpandMode, AccordionItemMarkerPosition, AccordionItemSize, AccordionMenuExpandMode, AccordionMenuPanelMarkerPosition, AccordionMenuPanelSize, ButtonAppearance, ButtonFormTarget, ButtonShape, ButtonSize, ButtonType, CheckboxShape, CheckboxSize, CollisionEdge, CompoundButtonAppearance, CompoundButtonFormTarget, CompoundButtonShape, CompoundButtonSize, CompoundButtonType, DialogType, DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole, DrawerPosition, DrawerSize, DrawerType, DropdownAppearance, DropdownSize, DropdownType, FilterPillAppearance, FilterPillFormTarget, FilterPillShape, FilterPillSize, FilterPillType, HTMLPopoverElement, ImageFit, ImageShape, LabelPosition, LabelSize, LabelWeight, MenuButtonAppearance, MenuButtonShape, MenuButtonSize, MenuGroupRole, MenuItemColumnCount, MenuItemRole, MenuPosition, MenuRepositionMode, MultiViewGroupPosition, PopoverEventData, PopoverMode, PopoverRepositionMode, PopoverSize, PositioningShorthandKeys, PositioningShorthandValues, ProgressBarShape, ProgressBarThickness, ProgressBarValidationState, RadioGroupOrientation, RatingDisplayColor, RatingDisplaySize, SearchBoxAppearance, SearchBoxControlSize, SearchBoxType, SliderMode, SliderOrientation, SliderSize, SlottableInput, SpinnerAppearance, SpinnerSize, StaticallyComposableHTML, TableCellRenderFunction, TableColumnData, TableRowData, TablistAppearance, TablistOrientation, TablistSize, TagAppearance, TagShape, TagSize, TagTextSize, TeachingBubblePlacement, TeachingBubbleSize, TextInputAppearance, TextInputControlSize, TextInputOptions, TextInputType, ToggleButtonAppearance, ToggleButtonFormTarget, ToggleButtonShape, ToggleButtonSize, ToggleButtonType, TooltipPositioningOption, ValidationFlag, WizardPanelState, WizardStepState };
+export { Accordion, definition$F as AccordionDefinition, AccordionExpandModes, AccordionItem, definition$G as AccordionItemDefinition, AccordionItemMarkerPositions, AccordionItemSizes, AccordionMenu, definition$11 as AccordionMenuDefinition, AccordionMenuExpandModes, AccordionMenuPanel, definition$10 as AccordionMenuPanelDefinition, AccordionMenuPanelMarkerPositions, AccordionMenuPanelSizes, styles$f as AccordionMenuPanelStyles, template$c as AccordionMenuPanelTemplate, styles$g as AccordionMenuStyles, template$d as AccordionMenuTemplate, AnchorButton, AnchorButtonAppearance, AnchorButtonAppearances, definition$n as AnchorButtonDefinition, AnchorButtonShape, AnchorButtonShapes, AnchorButtonSize, AnchorButtonSizes, AnchorTarget, AnchorTargets, Avatar, AvatarActive, AvatarActives, AvatarAppearance, AvatarAppearances, AvatarColor, AvatarColors, definition$D as AvatarDefinition, AvatarNamedColor, AvatarNamedColors, AvatarShape, AvatarShapes, AvatarSize, AvatarSizes, Badge, BadgeAppearance, BadgeAppearances, BadgeColor, BadgeColors, definition$C as BadgeDefinition, BadgeShape, BadgeShapes, BadgeSize, BadgeSizes, Button, ButtonAppearances, definition$B as ButtonDefinition, ButtonFormTargets, ButtonShapes, ButtonSizes, styles$9 as ButtonStyles, ButtonTypes, Card, CardAppearance, CardAppearances, definition$$ as CardDefinition, CardEventNames, CardFocusMode, CardFocusModes, CardFooter, definition$_ as CardFooterDefinition, CardHeader, definition$Z as CardHeaderDefinition, CardOrientation, CardOrientations, CardPreview, definition$Y as CardPreviewDefinition, styles$e as CardStyles, template$b as CardTemplate, Carousel, definition$X as CarouselDefinition, styles$d as CarouselStyles, template$a as CarouselTemplate, Checkbox, definition$A as CheckboxDefinition, CheckboxShapes, CheckboxSizes, CollisionEdges, CompoundButton, CompoundButtonAppearances, definition$V as CompoundButtonDefinition, CompoundButtonFormTargets, CompoundButtonShapes, CompoundButtonSizes, CompoundButtonTypes, CounterBadge, CounterBadgeAppearances, CounterBadgeColors, definition$z as CounterBadgeDefinition, CounterBadgeShapes, CounterBadgeSizes, Dialog, DialogBody, definition$x as DialogBodyDefinition, definition$y as DialogDefinition, styles$8 as DialogStyles, DialogTypes, DirectionDetector, Divider, DividerAlignContents, DividerAppearances, definition$w as DividerDefinition, DividerOrientations, DividerRoles, styles$7 as DividerStyles, template$6 as DividerTemplate, Drawer, DrawerBody, definition$u as DrawerBodyDefinition, definition$v as DrawerDefinition, DrawerPositions, DrawerSizes, DrawerTypes, Dropdown, DropdownAppearances, definition$t as DropdownDefinition, DropdownOption, definition$s as DropdownOptionDefinition, DropdownSizes, DropdownTypes, DesignSystem as FabricDesignSystem, Field, definition$q as FieldDefinition, FieldLabelPosition, FieldLabelPositions, styles$6 as FieldStyles, FilterPill, FilterPillAppearances, definition$W as FilterPillDefinition, FilterPillEventNames, FilterPillFormTargets, FilterPillShapes, FilterPillSizes, FilterPillTypes, Image, definition$p as ImageDefinition, ImageFits, ImageShapes, ImplicitSubmissionBlockingTypes$1 as ImplicitSubmissionBlockingTypes, Label, definition$o as LabelDefinition, LabelPositions, LabelSizes, LabelWeights, Link, LinkAppearance, LinkAppearances, definition$E as LinkDefinition, LinkTarget, LinkTargets, Listbox, definition$r as ListboxDefinition, LoadingButton, definition$U as LoadingButtonDefinition, Menu, MenuButton, MenuButtonAppearances, definition$l as MenuButtonDefinition, MenuButtonShapes, MenuButtonSizes, definition$i as MenuDefinition, MenuGroupRoles, MenuItem, definition$k as MenuItemDefinition, MenuItemRoles, styles$5 as MenuItemStyles, template$5 as MenuItemTemplate, MenuList, definition$j as MenuListDefinition, styles$4 as MenuListStyles, template$4 as MenuListTemplate, MenuPositions, MenuRepositionModes, styles$3 as MenuStyles, template$3 as MenuTemplate, MessageBar, definition$m as MessageBarDefinition, MockElementInternals, MultiView, MultiViewController, definition$S as MultiViewControllerDefinition, definition$T as MultiViewDefinition, MultiViewEventNames, MultiViewGroup, definition$R as MultiViewGroupDefinition, MultiViewGroupPositions, OptionGroup, definition$h as OptionGroupDefinition, Popover, definition$Q as PopoverDefinition, PopoverEventNames, PopoverPositions, PopoverRepositionModes, styles$c as PopoverStyles, template$9 as PopoverTemplate, PositioningShorthand, ProgressBar, definition$g as ProgressBarDefinition, ProgressBarShapes, ProgressBarThicknesses, ProgressBarValidationStates, Radio, definition$e as RadioDefinition, RadioGroup, definition$f as RadioGroupDefinition, RadioGroupOrientations, RatingDisplay, RatingDisplayColors, definition$d as RatingDisplayDefinition, RatingDisplaySizes, SearchBox, SearchBoxAppearances, SearchBoxControlSizes, definition$c as SearchBoxDefinition, SearchBoxEventNames, ImplicitSubmissionBlockingTypes as SearchBoxImplicitSubmissionBlockingTypes, SearchBoxTypes, SimpleTable, definition$N as SimpleTableDefinition, Slider, definition$b as SliderDefinition, SliderEventNames, SliderModes, SliderOrientations, SliderSizes, SlottableInputs, SortDirections, Spinner, SpinnerAppearances, definition$a as SpinnerDefinition, SpinnerSizes, SvgIcon, definition$P as SvgIconDefinition, Switch, definition$9 as SwitchDefinition, Tab, definition$8 as TabDefinition, Table, TableCell, definition$M as TableCellDefinition, TableCellSizes, styles$a as TableCellStyles, template$7 as TableCellTemplate, definition$O as TableDefinition, styles$b as TableStyles, template$8 as TableTemplate, Tablist, TablistAppearances, definition$7 as TablistDefinition, TablistEventNames, TablistOrientations, TablistSizes, Tag, TagAppearances, definition$L as TagDefinition, TagEventNames, TagShapes, TagSizes, TagTextSizes, TeachingBubble, definition$K as TeachingBubbleDefinition, TeachingBubbleEventNames, TeachingBubblePlacements, TeachingBubbleSizes, Text, TextAligns, TextArea, TextareaAppearances as TextAreaAppearances, TextareaAppearancesForDisplayShadows as TextAreaAppearancesForDisplayShadows, TextareaAutocompletes as TextAreaAutocompletes, definition$6 as TextAreaDefinition, TextareaResizes as TextAreaResizes, TextareaSizes as TextAreaSizes, definition$4 as TextDefinition, TextFonts, TextInput, TextInputAppearances, TextInputControlSizes, definition$5 as TextInputDefinition, styles$1 as TextInputStyles, template$1 as TextInputTemplate, TextInputTypes, TextSizes, TextWeights, ToggleButton, ToggleButtonAppearances, definition$1 as ToggleButtonDefinition, ToggleButtonFormTargets, ToggleButtonShapes, ToggleButtonSizes, ToggleButtonTypes, Tooltip, definition as TooltipDefinition, TooltipPositioningOptions, Tree, definition$3 as TreeDefinition, TreeItem, definition$2 as TreeItemDefinition, styles as TreeItemStyles, template as TreeItemTemplate, ValidationFlags, Wizard, definition$J as WizardDefinition, WizardEvents, WizardPanel, definition$I as WizardPanelDefinition, WizardPanelEventNames, WizardPanelStates, WizardStep, definition$H as WizardStepDefinition, WizardStepEvents, WizardStepStates, applyMixins, attachMockElementInternals, createRovingFocusController, createUniqueId, debounce, debug, disabledState, expandedState, getDirection, getOptionsFromElement, globalDirectionDetector, inputElementMethods, isDisabledElement, isFocusableElement, isHiddenElement, isOptionGroup, isRtl, styles$2 as optionGroupStyles, template$2 as optionGroupTemplate, roleForMenuGroup, roleForMenuItem, setAttributes, setChildrenFocusability, setGlobalDirectionDetector, staticallyCompose, toggleState, whitespaceFilter };
+export type { AccordionExpandMode, AccordionItemMarkerPosition, AccordionItemSize, AccordionMenuExpandMode, AccordionMenuPanelMarkerPosition, AccordionMenuPanelSize, ButtonAppearance, ButtonFormTarget, ButtonShape, ButtonSize, ButtonType, CheckboxShape, CheckboxSize, CollisionEdge, CompoundButtonAppearance, CompoundButtonFormTarget, CompoundButtonShape, CompoundButtonSize, CompoundButtonType, CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize, DialogType, DirectionDetectorOptions, DirectionObserver, DirectionOrNull, DirectionStrategy, DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole, DrawerPosition, DrawerSize, DrawerType, DropdownAppearance, DropdownSize, DropdownType, FilterPillAppearance, FilterPillFormTarget, FilterPillShape, FilterPillSize, FilterPillType, HTMLPopoverElement, ImageFit, ImageShape, LabelPosition, LabelSize, LabelWeight, MenuButtonAppearance, MenuButtonShape, MenuButtonSize, MenuGroupRole, MenuItemColumnCount, MenuItemRole, MenuPosition, MenuRepositionMode, MultiViewGroupPosition, PopoverEventData, PopoverMode, PopoverRepositionMode, PopoverSize, PositioningShorthandKeys, PositioningShorthandValues, ProgressBarShape, ProgressBarThickness, ProgressBarValidationState, RadioGroupOrientation, RatingDisplayColor, RatingDisplaySize, RovingFocusController, RovingFocusOptions, SearchBoxAppearance, SearchBoxControlSize, SearchBoxType, SliderMode, SliderOrientation, SliderSize, SlottableInput, SortDirection, SpinnerAppearance, SpinnerSize, StaticallyComposableHTML, TableCellRenderFunction, TableCellSize, TableColumnData, TableRowData, TablistAppearance, TablistOrientation, TablistSize, TagAppearance, TagShape, TagSize, TagTextSize, TeachingBubblePlacement, TeachingBubbleSize, TextAlign, TextareaAppearance as TextAreaAppearance, TextareaAppearancesForDisplayShadow as TextAreaAppearancesForDisplayShadow, TextareaAutocomplete as TextAreaAutocomplete, TextareaResize as TextAreaResize, TextareaSize as TextAreaSize, TextFont, TextInputAppearance, TextInputControlSize, TextInputOptions, TextInputType, TextSize, TextWeight, ToggleButtonAppearance, ToggleButtonFormTarget, ToggleButtonShape, ToggleButtonSize, ToggleButtonType, TooltipPositioningOption, ValidationFlag, WizardEvent, WizardPanelState, WizardStepEvent, WizardStepState };
 //# sourceMappingURL=index.d.ts.map