npm - @fabric-msft/fabric-web - Versions diffs - 5.0.0 → 7.0.0 - Mend

@fabric-msft/fabric-web 5.0.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2890) hide show

package/dts/util/direction.d.ts ADDED Viewed

@@ -0,0 +1,204 @@
+import { Direction } from "@microsoft/fast-web-utilities";
+/**
+ * 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
+ */
+export declare const getDirection: (rootNode: HTMLElement) => Direction;
+export declare function findClosestElementsWithDir(element: Element): Element[];
+export declare function isRtl(): boolean;
+export type DirectionOrNull = Direction | null;
+/**
+ * Interface for direction detection strategies.
+ * Strategies are pure functions that detect direction from a source.
+ * @public
+ */
+export 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
+ */
+export 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;
+}
+/**
+ * Strategy that reads direction from the computed CSS style of a specific element.
+ * @public
+ */
+export declare class ElementCssStrategy implements DirectionStrategy {
+    private readonly element;
+    private readonly doc;
+    constructor(element: Element | null);
+    getDirection(): DirectionOrNull;
+}
+/**
+ * Strategy that reads direction from the dir attribute.
+ * Takes a list of elements and checks each element until it finds one with a "dir" attribute specified.
+ * @public
+ */
+export declare class DirAttributeStrategy implements DirectionStrategy {
+    private readonly elements;
+    constructor(elements: Element[]);
+    getDirection(): DirectionOrNull;
+}
+/**
+ * Observer that watches for dir attribute changes using MutationObserver.
+ * @public
+ */
+export declare class DirAttributeObserver implements DirectionObserver {
+    private readonly doc;
+    private readonly target;
+    private mo;
+    constructor(target?: Element | string, doc?: Document);
+    start(notify: () => void): void;
+    stop(): void;
+}
+export 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
+ */
+export 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;
+}
+export declare function setGlobalDirectionDetector(detector: DirectionDetector): void;
+export declare function globalDirectionDetector(): DirectionDetector;
+//# sourceMappingURL=direction.d.ts.map

package/dts/util/direction.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"direction.d.ts","sourceRoot":"","sources":["../../../src/util/direction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,GAAI,UAAU,WAAW,KAAG,SAIpD,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,EAAE,CAYtE;AAED,wBAAgB,KAAK,IAAI,OAAO,CAE/B;AAED,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;AAE/C;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,YAAY,IAAI,eAAe,CAAC;CACjC;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,CAAC,MAAM,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;IAEhC;;OAEG;IACH,IAAI,IAAI,IAAI,CAAC;CACd;AAED;;;GAGG;AACH,qBAAa,kBAAmB,YAAW,iBAAiB;IAC1D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiB;IACzC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAW;gBAEnB,OAAO,EAAE,OAAO,GAAG,IAAI;IAKnC,YAAY,IAAI,eAAe;CAahC;AAED;;;;GAIG;AACH,qBAAa,oBAAqB,YAAW,iBAAiB;IAC5D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAY;gBAEzB,QAAQ,EAAE,OAAO,EAAE;IAI/B,YAAY,IAAI,eAAe;CAShC;AAED;;;GAGG;AACH,qBAAa,oBAAqB,YAAW,iBAAiB;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAW;IAC/B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmB;IAC1C,OAAO,CAAC,EAAE,CAAiC;gBAE/B,MAAM,GAAE,OAAO,GAAG,MAAe,EAAE,GAAG,GAAE,QAAmB;IAKvE,KAAK,CAAC,MAAM,EAAE,MAAM,IAAI,GAAG,IAAI;IAc/B,IAAI,IAAI,IAAI;CAIb;AAED,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAEhC;;OAEG;IACH,QAAQ,CAAC,EAAE,CACT,GAAG,EAAE,eAAe,EACpB,IAAI,EAAE;QAAE,QAAQ,EAAE,eAAe,CAAA;KAAE,KAChC,IAAI,CAAC;CACX;AAED;;;;GAIG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAsB;IAChD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAGhB;IAEV,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,MAAM,CAAyB;IACvC,OAAO,CAAC,SAAS,CAAS;gBAEd,OAAO,EAAE,wBAAwB;IAU7C,IAAI,KAAK,IAAI,SAAS,CAErB;IAED;;OAEG;IACH,OAAO,CAAC,KAAK;IA0Bb;;OAEG;IACH,IAAI,IAAI,IAAI;IAaZ,MAAM,IAAI,OAAO;IAIjB;;OAEG;IACH,OAAO,IAAI,eAAe;IAgB1B,OAAO,CAAC,gBAAgB;CAOzB;AAID,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAE5E;AAED,wBAAgB,uBAAuB,IAAI,iBAAiB,CAU3D"}

package/dts/util/dom.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const inputElementMethods: string[];
2	+ //# sourceMappingURL=dom.d.ts.map

package/dts/util/dom.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/util/dom.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,UAa/B,CAAC"}

package/dts/util/element-definition.d.ts ADDED Viewed

@@ -0,0 +1,53 @@
+/**
+ * Defines a custom element registration entry that can be composed with other
+ * element definitions.
+ *
+ * @public
+ */
+export interface FabricElementDefinition {
+    /**
+     * The custom element tag name associated with the definition.
+     */
+    readonly name: string;
+    /**
+     * Registers the element definition with a custom element registry.
+     *
+     * @param registry - The registry to define the element in. Defaults to the
+     * global custom element registry.
+     */
+    define(registry?: CustomElementRegistry): void;
+}
+/**
+ * The subset of FAST element definitions required by Fabric definition helpers.
+ *
+ * @internal
+ */
+interface FASTElementDefinitionLike {
+    readonly name: string;
+    define(registry?: CustomElementRegistry): void;
+}
+/**
+ * Validates a FAST element definition and returns it as a Fabric element
+ * definition.
+ *
+ * @param fastDefinition - The FAST definition to validate.
+ * @returns The FAST definition as a Fabric element definition.
+ *
+ * @public
+ */
+export declare function fromFAST(fastDefinition: FASTElementDefinitionLike): FabricElementDefinition;
+/**
+ * Creates a Fabric element definition for a primary element and any
+ * sub-element dependencies it requires.
+ *
+ * @param primaryDefinition - The primary element definition to expose.
+ * @param dependencies - The dependency definitions to register before the
+ * primary definition.
+ * @returns A Fabric element definition that defines each dependency and the
+ * primary definition with the same custom element registry.
+ *
+ * @public
+ */
+export declare function composeDefinitions(primaryDefinition: FabricElementDefinition, ...dependencies: FabricElementDefinition[]): FabricElementDefinition;
+export {};
+//# sourceMappingURL=element-definition.d.ts.map

package/dts/util/element-definition.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"element-definition.d.ts","sourceRoot":"","sources":["../../../src/util/element-definition.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,MAAM,CAAC,QAAQ,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;CAChD;AAED;;;;GAIG;AACH,UAAU,yBAAyB;IACjC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,MAAM,CAAC,QAAQ,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;CAChD;AAqCD;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CACtB,cAAc,EAAE,yBAAyB,GACxC,uBAAuB,CAGzB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAChC,iBAAiB,EAAE,uBAAuB,EAC1C,GAAG,YAAY,EAAE,uBAAuB,EAAE,GACzC,uBAAuB,CA8BzB"}

package/dts/util/element-internal-mocks.d.ts ADDED Viewed

@@ -0,0 +1,67 @@
+export 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.
+ */
+export declare function attachMockElementInternals(): void;
+//# sourceMappingURL=element-internal-mocks.d.ts.map

package/dts/util/element-internal-mocks.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"element-internal-mocks.d.ts","sourceRoot":"","sources":["../../../src/util/element-internal-mocks.ts"],"names":[],"mappings":"AAAA,qBAAa,oBAAqB,YAAW,gBAAgB;IAC3D,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IACtC,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjD,OAAO,CAAC,KAAK,CAAgC;IAC7C,OAAO,CAAC,OAAO,CAA0D;IACzE,OAAO,CAAC,QAAQ,CAAc;gBAElB,OAAO,EAAE,WAAW;IAMhC,IAAI,IAAI,2BAMP;IACD,IAAI,MAAM,aAET;IACD,IAAI,UAAU,SAEb;IACD,IAAI,MAAM,gBAET;IAGD,IAAI,iBAAiB,WAEpB;IACD,IAAI,QAAQ,IAaL,aAAa,CACnB;IACD,IAAI,YAAY,YAEf;IAGD,IAAI,SAAM;IACV,UAAU,SAAM;IAChB,gBAAgB,SAAM;IACtB,QAAQ,SAAM;IACd,WAAW,SAAM;IACjB,YAAY,SAAM;IAClB,YAAY,SAAM;IAClB,gBAAgB,SAAM;IACtB,WAAW,SAAM;IACjB,WAAW,SAAM;IACjB,YAAY,SAAM;IAClB,YAAY,SAAM;IAClB,YAAY,SAAM;IAClB,UAAU,SAAM;IAChB,WAAW,SAAM;IACjB,gBAAgB,SAAM;IACtB,SAAS,SAAM;IACf,SAAS,SAAM;IACf,QAAQ,SAAM;IACd,SAAS,SAAM;IACf,aAAa,SAAM;IACnB,mBAAmB,SAAM;IACzB,eAAe,SAAM;IACrB,eAAe,SAAM;IACrB,YAAY,SAAM;IAClB,WAAW,SAAM;IACjB,YAAY,SAAM;IAClB,YAAY,SAAM;IAClB,YAAY,SAAM;IAClB,mBAAmB,SAAM;IACzB,YAAY,SAAM;IAClB,YAAY,SAAM;IAClB,gBAAgB,SAAM;IACtB,WAAW,SAAM;IACjB,YAAY,SAAM;IAClB,WAAW,SAAM;IACjB,QAAQ,SAAM;IACd,YAAY,SAAM;IAClB,YAAY,SAAM;IAClB,YAAY,SAAM;IAClB,aAAa,SAAM;IAGnB,aAAa;IAGb,cAAc;IAId,YAAY,CACV,MAAM,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,EACvC,MAAM,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI;IAE1C,WAAW,CACT,MAAM,EAAE,kBAAkB,EAC1B,QAAQ,CAAC,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,WAAW;CAExB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,SAMzC"}

package/dts/util/element-internals.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"element-internals.d.ts","sourceRoot":"","sources":["../../../src/util/element-internals.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD;;;GAGG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GAC3C,UAAU,CAAC,GAAG,GAAG,WAAW,CAAC,GAAG,GAChC,KAAK,CAAC;AAEV,OAAO,EAAE,wBAAwB,EAAE,CAAC;AAQpC;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAQ1E;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CACzB,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,EAC9C,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,KAAK,CAAC,EAAE,OAAO,GACd,IAAI,CAcN;AAQD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,EAC1C,KAAK,EAAE,MAAM,GAAG,SAAS,GACxB,OAAO,CAYT;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CACxB,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,GAAE,MAAM,GAAG,SAAc,EAC7B,IAAI,GAAE,MAAM,GAAG,SAAc,EAC7B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC/B,MAAM,GAAE,MAAW,GAClB,IAAI,CAMN;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EACrC,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,CAAC,GAAG,SAAS,EACnB,IAAI,EAAE,CAAC,GAAG,SAAS,EACnB,QAAQ,EAAE,CACR,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,OAAO,KACX,IAAI,QAQV"}

package/dts/util/focus-management.d.ts ADDED Viewed

@@ -0,0 +1,132 @@
+/**
+ * Options for creating a roving focus controller.
+ *
+ * @public
+ */
+export 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
+ */
+export 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
+ */
+export declare function createRovingFocusController(options: RovingFocusOptions): RovingFocusController;
+//# sourceMappingURL=focus-management.d.ts.map

package/dts/util/focus-management.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"focus-management.d.ts","sourceRoot":"","sources":["../../../src/util/focus-management.ts"],"names":[],"mappings":"AASA;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,EAAE,MAAM,WAAW,EAAE,CAAC;IAE3B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IAE1C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAEjD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzD;;;;OAIG;IACH,KAAK,EAAE,MAAM,OAAO,CAAC;CACtB;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,aAAa,IAAI,IAAI,CAAC;IAEtB;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC;IAE7B;;;OAGG;IACH,UAAU,IAAI,OAAO,CAAC;IAEtB;;;OAGG;IACH,SAAS,IAAI,OAAO,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC;IAElC;;;;OAIG;IACH,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAAC;IAE1C;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC;IAE7C;;OAEG;IACH,OAAO,IAAI,IAAI,CAAC;CACjB;AAQD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,kBAAkB,GAC1B,qBAAqB,CAgQvB"}

package/dts/util/hash-utilities.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/**
+ * 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}`
+ */
+export declare function createUniqueId(prefix: string, counter?: number): string;
+//# sourceMappingURL=hash-utilities.d.ts.map

package/dts/util/hash-utilities.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"hash-utilities.d.ts","sourceRoot":"","sources":["../../../src/util/hash-utilities.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,GAAE,MAAU,GAAG,MAAM,CAK1E"}

package/dts/util/icons.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+/**
+ * Chevron left icon (20x20).
+ * @internal
+ */
+export declare const chevronLeftIcon: import("@microsoft/fast-element").ViewTemplate<any, any>;
+/**
+ * Chevron right icon (20x20).
+ * @internal
+ */
+export declare const chevronRightIcon: import("@microsoft/fast-element").ViewTemplate<any, any>;
+/**
+ * Chevron down icon (20x20).
+ * @internal
+ */
+export declare const chevronDownIcon: import("@microsoft/fast-element").InlineTemplateDirective;
+/**
+ * Chevron up icon (20x20).
+ * @internal
+ */
+export declare const chevronUpIcon: import("@microsoft/fast-element").InlineTemplateDirective;
+//# sourceMappingURL=icons.d.ts.map

package/dts/util/icons.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/util/icons.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,eAAe,0DAa3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,0DAa5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,2DAapB,CAAC;AAET;;;GAGG;AACH,eAAO,MAAM,aAAa,2DAalB,CAAC"}

package/dts/util/index.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+export * from "./accessibility-utilities.js";
+export * from "./apply-mixins.js";
+export * from "./attribute-utilities.js";
+export * from "./collection-event-manager.js";
+export * from "./debounce.js";
+export * from "./debug.js";
+export * from "./descendants.js";
+export * from "./direction.js";
+export * from "./dom.js";
+export * from "./element-internal-mocks.js";
+export * from "./element-internals.js";
+export * from "./element-definition.js";
+export * from "./focus-management.js";
+export * from "./hash-utilities.js";
+export * from "./icons.js";
+export * from "./match-media-stylesheet-behaviors.js";
+export * from "./support.js";
+export * from "./platform.js";
+export * from "./template-helpers.js";
+export * from "./typings.js";
+export * from "./whitespace-filter.js";
+export * from "./math.js";
+//# sourceMappingURL=index.d.ts.map

package/dts/util/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/util/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,uCAAuC,CAAC;AACtD,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC"}

package/dts/util/match-media-stylesheet-behaviors.d.ts ADDED Viewed

@@ -0,0 +1,121 @@
+import type { ElementStyles, HostBehavior, HostController } from "@microsoft/fast-element";
+/**
+ * An event listener fired by a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList | MediaQueryList }.
+ * @public
+ */
+export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
+/**
+ * An abstract behavior to react to media queries. Implementations should implement
+ * the `constructListener` method to perform some action based on media query changes.
+ *
+ * @public
+ */
+export declare abstract class MatchMediaBehavior implements HostBehavior {
+    /**
+     * The behavior needs to operate on element instances but elements might share a behavior instance.
+     * To ensure proper attachment / detachment per instance, we construct a listener for
+     * each bind invocation and cache the listeners by element reference.
+     */
+    private listenerCache;
+    /**
+     * The media query that the behavior operates on.
+     */
+    readonly query: MediaQueryList;
+    /**
+     *
+     * @param query - The media query to operate from.
+     */
+    constructor(query: MediaQueryList);
+    /**
+     * Constructs a function that will be invoked with the MediaQueryList context
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    protected abstract constructListener(controller: HostController): MediaQueryListListener;
+    /**
+     * Binds the behavior to the element.
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    connectedCallback(controller: HostController): void;
+    /**
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
+     */
+    disconnectedCallback(controller: HostController): void;
+}
+/**
+ * A behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that
+ * styles are applied while the a query matches the environment and that styles are not applied if the query does
+ * not match the environment.
+ *
+ * @public
+ */
+export declare class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+    /**
+     * The styles object to be managed by the behavior.
+     */
+    readonly styles: ElementStyles;
+    /**
+     * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
+     * @param query - The media query to operate from.
+     * @param styles - The styles to coordinate with the query.
+     */
+    constructor(query: MediaQueryList, styles: ElementStyles);
+    /**
+     * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
+     * a provided query.
+     * @param query - The media query to operate from.
+     *
+     * @public
+     * @example
+     *
+     * ```ts
+     * import { css } from "@microsoft/fast-element";
+     * import { MatchMediaStyleSheetBehavior } from "@fluentui/web-components";
+     *
+     * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
+     *   window.matchMedia("(orientation: landscape)")
+     * );
+     *
+     * const styles = css`
+     *   :host {
+     *     width: 200px;
+     *     height: 400px;
+     *   }
+     * `
+     * .withBehaviors(landscapeBehavior(css`
+     *   :host {
+     *     width: 400px;
+     *     height: 200px;
+     *   }
+     * `))
+     * ```
+     */
+    static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+    /**
+     * Constructs a match-media listener for a provided element.
+     * @param source - the element for which to attach or detach styles.
+     */
+    protected constructListener(controller: HostController): MediaQueryListListener;
+    /**
+     * Unbinds the behavior from the element.
+     * @param controller - The host controller orchestrating this behavior.
+     * @internal
+     */
+    removedCallback(controller: HostController<unknown>): void;
+}
+/**
+ * This can be used to construct a behavior to apply a forced-colors only stylesheet.
+ * @public
+ */
+export declare const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
+ * @public
+ */
+export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
+ * @public
+ */
+export declare const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+//# sourceMappingURL=match-media-stylesheet-behaviors.d.ts.map