@fluentui/web-components 3.0.0-beta.10 → 3.0.0-beta.11

package/dist/storybook/project.json

@@ -1 +1 @@
-{"generatedAt":1712635583202,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"monorepo":"Nx","packageManager":{"type":"yarn","version":"1.23.34"},"storybookVersion":"6.5.15","language":"typescript","storybookPackages":{"@storybook/html":{"version":null}},"framework":{"name":"html"},"addons":{"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-essentials":{"options":{"backgrounds":false,"viewport":false,"toolbars":false,"actions":true},"version":"6.5.15"}}}
+{"generatedAt":1713154074770,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"monorepo":"Nx","packageManager":{"type":"yarn","version":"1.23.34"},"storybookVersion":"6.5.15","language":"typescript","storybookPackages":{"@storybook/html":{"version":null}},"framework":{"name":"html"},"addons":{"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-essentials":{"options":{"backgrounds":false,"viewport":false,"toolbars":false,"actions":true},"version":"6.5.15"}}}

package/dist/web-components.d.ts

@@ -4,6 +4,8 @@ import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
+import type { HostBehavior } from '@microsoft/fast-element';
+import type { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import type { SyntheticViewTemplate } from '@microsoft/fast-element';
@@ -2488,6 +2490,12 @@ export declare const CounterBadgeStyles: ElementStyles;
  */
 export declare const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
 
+/**
+ * Define all possible CSS display values.
+ * @public
+ */
+export declare type CSSDisplayPropertyValue = 'block' | 'contents' | 'flex' | 'grid' | 'inherit' | 'initial' | 'inline' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'none' | 'run-in' | 'table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row' | 'table-row-group';
+
 export declare const curveAccelerateMax = "var(--curveAccelerateMax)";
 
 export declare const curveAccelerateMid = "var(--curveAccelerateMid)";
@@ -2506,6 +2514,12 @@ export declare const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 
 export declare const curveLinear = "var(--curveLinear)";
 
+/**
+ * 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;
+
 /**
  * Includes ARIA states and properties relating to the ARIA button role
  *
@@ -2794,6 +2808,14 @@ export declare const DialogStyles: ElementStyles;
  */
 export declare const DialogTemplate: ElementViewTemplate<Dialog>;
 
+/**
+ * Applies a CSS display property.
+ * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
+ * @param display - The CSS display property value
+ * @public
+ */
+export declare function display(displayValue: CSSDisplayPropertyValue): string;
+
 /**
  * @class Divider component
  *
@@ -3051,6 +3073,12 @@ export declare const fontWeightRegular = "var(--fontWeightRegular)";
 
 export declare const fontWeightSemibold = "var(--fontWeightSemibold)";
 
+/**
+ * This can be used to construct a behavior to apply a forced-colors only stylesheet.
+ * @public
+ */
+export declare const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
 /**
  * Base function for providing Custom Element Form Association.
  *
@@ -3147,6 +3175,22 @@ declare class FormAssociatedTextField extends FormAssociatedTextField_base {
 
 declare const FormAssociatedTextField_base: typeof _TextField;
 
+/**
+ * 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;
+
+/**
+ * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
+ * @public
+ */
+export declare const hidden = ":host([hidden]){display:none}";
+
 /**
  * The base class used for constucting a fluent image custom element
  * @public
@@ -3333,6 +3377,12 @@ declare const LabelWeight: {
  */
 declare type LabelWeight = ValuesOf<typeof LabelWeight>;
 
+/**
+ * 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;
+
 export declare const lineHeightBase100 = "var(--lineHeightBase100)";
 
 export declare const lineHeightBase200 = "var(--lineHeightBase200)";
@@ -3353,6 +3403,117 @@ export declare const lineHeightHero800 = "var(--lineHeightHero800)";
 
 export declare const lineHeightHero900 = "var(--lineHeightHero900)";
 
+/**
+ * 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;
+}
+
+/**
+ * An event listener fired by a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList | MediaQueryList }.
+ * @public
+ */
+export declare type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
+
 /**
  * The Menu class represents a menu component.
  * @public