@fluentui/web-components 3.0.0-rc.15 → 3.0.0-rc.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
-  "version": "3.0.0-rc.15",
+  "version": "3.0.0-rc.16",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -77,6 +77,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.10.10",
     "@microsoft/fast-element": "2.0.0",
+    "@microsoft/focusgroup-polyfill": "^1.3.0",
     "@tensile-perf/web-components": "~0.2.2",
     "@storybook/html": "9.1.17",
     "@storybook/html-vite": "9.1.17",
@@ -93,7 +94,8 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@microsoft/fast-element": "^2.0.0"
+    "@microsoft/fast-element": "^2.0.0",
+    "@microsoft/focusgroup-polyfill": "^1.3.0"
   },
   "beachball": {
     "disallowedChangeTypes": [

package/dist/esm/utils/behaviors/match-media-stylesheet-behavior.d.ts

@@ -1,124 +0,0 @@
-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 media query that the behavior operates on.
-     */
-    readonly query: MediaQueryList;
-    /**
-     * 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<any>): 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;

package/dist/esm/utils/behaviors/match-media-stylesheet-behavior.js

@@ -1,142 +0,0 @@
-/**
- * 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 class MatchMediaBehavior {
-    /**
-     *
-     * @param query - The media query to operate from.
-     */
-    constructor(query) {
-        /**
-         * 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.
-         */
-        this.listenerCache = new WeakMap();
-        this.query = query;
-    }
-    /**
-     * Binds the behavior to the element.
-     * @param controller - The host controller orchestrating this behavior.
-     */
-    connectedCallback(controller) {
-        const { query } = this;
-        let listener = this.listenerCache.get(controller);
-        if (!listener) {
-            listener = this.constructListener(controller);
-            this.listenerCache.set(controller, listener);
-        }
-        // Invoke immediately to add if the query currently matches
-        listener.bind(query)();
-        query.addEventListener('change', listener);
-    }
-    /**
-     * Unbinds the behavior from the element.
-     * @param controller - The host controller orchestrating this behavior.
-     */
-    disconnectedCallback(controller) {
-        const listener = this.listenerCache.get(controller);
-        if (listener) {
-            this.query.removeEventListener('change', listener);
-        }
-    }
-}
-/**
- * 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 class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
-    /**
-     * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
-     * @param query - The media query to operate from.
-     * @param styles - The styles to coordinate with the query.
-     */
-    constructor(query, styles) {
-        super(query);
-        this.styles = styles;
-    }
-    /**
-     * 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) {
-        return (styles) => {
-            return new MatchMediaStyleSheetBehavior(query, styles);
-        };
-    }
-    /**
-     * Constructs a match-media listener for a provided element.
-     * @param source - the element for which to attach or detach styles.
-     */
-    constructListener(controller) {
-        let attached = false;
-        const styles = this.styles;
-        return function listener() {
-            const { matches } = this;
-            if (matches && !attached) {
-                controller.addStyles(styles);
-                attached = matches;
-            }
-            else if (!matches && attached) {
-                controller.removeStyles(styles);
-                attached = matches;
-            }
-        };
-    }
-    /**
-     * Unbinds the behavior from the element.
-     * @param controller - The host controller orchestrating this behavior.
-     * @internal
-     */
-    removedCallback(controller) {
-        controller.removeStyles(this.styles);
-    }
-}
-/**
- * This can be used to construct a behavior to apply a forced-colors only stylesheet.
- * @public
- */
-export const forcedColorsStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia('(forced-colors)'));
-/**
- * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
- * @public
- */
-export const darkModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia('(prefers-color-scheme: dark)'));
-/**
- * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
- * @public
- */
-export const lightModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia('(prefers-color-scheme: light)'));
-//# sourceMappingURL=match-media-stylesheet-behavior.js.map

package/dist/esm/utils/behaviors/match-media-stylesheet-behavior.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"match-media-stylesheet-behavior.js","sourceRoot":"","sources":["../../../../src/utils/behaviors/match-media-stylesheet-behavior.ts"],"names":[],"mappings":"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"}