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

package/dist/esm/text-input/text-input.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import { borderRadiusMedium, colorCompoundBrandStroke, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground3, colorNeutralBackgroundInverted, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorTransparentBackground, colorTransparentStroke, colorTransparentStrokeInteractive, curveAccelerateMid, curveDecelerateMid, durationNormal, durationUltraFast, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalXS, strokeWidthThin, } from '../theme/design-tokens.js';
 /** TextInput styles
  * @public

package/dist/esm/text-input/text-input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;;;;iBAa5B,uBAAuB;cAC1B,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;WAC5B,oBAAoB;;;;;;;;;uBASR,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;aAM7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;;;;;;;;;;aAUnB,uBAAuB;;;;;;;aAOvB,uBAAuB;iBACnB,eAAe;;;qBAGX,oBAAoB;;;oBAGrB,oBAAoB;WAC7B,mBAAmB;;;oBAGV,wBAAwB;2BACjB,iCAAiC;;;oBAGxC,0BAA0B;;;;;;;;;2BASnB,cAAc;wBACjB,kBAAkB;;;2BAGf,+BAA+B;;;cAG5C,eAAe,UAAU,mBAAmB;;;aAG7C,uBAAuB;;;kBAGlB,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;aAKpD,8BAA8B;;;aAG9B,8BAA8B;wBACnB,8BAA8B;;;iBAGrC,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,oBAAoB;iBACd,uBAAuB;;;;iBAIvB,eAAe;;;iBAGf,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,kBAAkB;iBACZ,kBAAkB;;;;iBAIlB,eAAe;;;kBAGd,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;2BAG/C,iCAAiC;;;2BAGjC,mCAAmC;;;;2BAInC,mCAAmC;;;2BAGnC,0BAA0B;;;;cAIvC,eAAe,UAAU,sBAAsB;kBAC3C,OAAO;;;kBAGP,uBAAuB;;;kBAGvB,uBAAuB;;;;oBAIrB,iCAAiC;;;;oBAIjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}
+{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;;;;iBAa5B,uBAAuB;cAC1B,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;WAC5B,oBAAoB;;;;;;;;;uBASR,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;aAM7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;;;;;;;;;;aAUnB,uBAAuB;;;;;;;aAOvB,uBAAuB;iBACnB,eAAe;;;qBAGX,oBAAoB;;;oBAGrB,oBAAoB;WAC7B,mBAAmB;;;oBAGV,wBAAwB;2BACjB,iCAAiC;;;oBAGxC,0BAA0B;;;;;;;;;2BASnB,cAAc;wBACjB,kBAAkB;;;2BAGf,+BAA+B;;;cAG5C,eAAe,UAAU,mBAAmB;;;aAG7C,uBAAuB;;;kBAGlB,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;aAKpD,8BAA8B;;;aAG9B,8BAA8B;wBACnB,8BAA8B;;;iBAGrC,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,oBAAoB;iBACd,uBAAuB;;;;iBAIvB,eAAe;;;iBAGf,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,kBAAkB;iBACZ,kBAAkB;;;;iBAIlB,eAAe;;;kBAGd,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;2BAG/C,iCAAiC;;;2BAGjC,mCAAmC;;;;2BAInC,mCAAmC;;;2BAGnC,0BAA0B;;;;cAIvC,eAAe,UAAU,sBAAsB;kBAC3C,OAAO;;;kBAGP,uBAAuB;;;kBAGvB,uBAAuB;;;;oBAIrB,iCAAiC;;;;oBAIjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}

package/dist/esm/toggle-button/toggle-button.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { styles as ButtonStyles } from '../button/button.styles.js';
 import { colorBrandBackgroundHover, colorBrandBackgroundPressed, colorBrandBackgroundSelected, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackground1Selected, colorNeutralForeground1, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2BrandSelected, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground2Selected, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentBackgroundSelected, strokeWidthThin, } from '../theme/design-tokens.js';
 // Need to support icon hover styles

package/dist/esm/toggle-button/toggle-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,yBAAyB,EACzB,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,oCAAoC,EACpC,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;oBAGI,mBAAmB;wBACf,+BAA+B;aAC1C,uBAAuB;oBAChB,eAAe;;;;oBAIf,wBAAwB;wBACpB,4BAA4B;;;;oBAIhC,0BAA0B;wBACtB,8BAA8B;;;;;wBAK9B,4BAA4B;aACvC,6BAA6B;;;;wBAIlB,yBAAyB;;;;wBAIzB,2BAA2B;;;;;wBAK3B,6BAA6B;aACxC,+BAA+B;;;;wBAIpB,0BAA0B;aACrC,4BAA4B;;;;wBAIjB,4BAA4B;aACvC,8BAA8B;;;;;wBAKnB,kCAAkC;;;;;wBAKlC,+BAA+B;;;;;wBAK/B,iCAAiC;;;;;aAK5C,oCAAoC;;;;aAIpC,iCAAiC;;;;aAIjC,mCAAmC;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../src/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,yBAAyB,EACzB,2BAA2B,EAC3B,4BAA4B,EAC5B,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,oCAAoC,EACpC,4BAA4B,EAC5B,8BAA8B,EAC9B,+BAA+B,EAC/B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,+BAA+B,EAC/B,iCAAiC,EACjC,kCAAkC,EAClC,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;oBAGI,mBAAmB;wBACf,+BAA+B;aAC1C,uBAAuB;oBAChB,eAAe;;;;oBAIf,wBAAwB;wBACpB,4BAA4B;;;;oBAIhC,0BAA0B;wBACtB,8BAA8B;;;;;wBAK9B,4BAA4B;aACvC,6BAA6B;;;;wBAIlB,yBAAyB;;;;wBAIzB,2BAA2B;;;;;wBAK3B,6BAA6B;aACxC,+BAA+B;;;;wBAIpB,0BAA0B;aACrC,4BAA4B;;;;wBAIjB,4BAA4B;aACvC,8BAA8B;;;;;wBAKnB,kCAAkC;;;;;wBAKlC,+BAA+B;;;;;wBAK/B,iCAAiC;;;;;aAK5C,oCAAoC;;;;aAIpC,iCAAiC;;;;aAIjC,mCAAmC;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}

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

@@ -0,0 +1,142 @@
+/**
+ * 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

@@ -0,0 +1 @@
+{"version":3,"file":"match-media-stylesheet-behavior.js","sourceRoot":"","sources":["../../../../src/utils/behaviors/match-media-stylesheet-behavior.ts"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,MAAM,OAAgB,kBAAkB;IAatC;;;OAGG;IACH,YAAY,KAAqB;QAhBjC;;;;WAIG;QACK,kBAAa,GAAG,IAAI,OAAO,EAA0C,CAAC;QAY5E,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAQD;;;OAGG;IACH,iBAAiB,CAAC,UAA0B;QAC1C,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACvB,IAAI,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAElD,IAAI,CAAC,QAAQ,EAAE;YACb,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;SAC9C;QAED,2DAA2D;QAC3D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAED;;;OAGG;IACH,oBAAoB,CAAC,UAA0B;QAC7C,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;SACpD;IACH,CAAC;CACF;AAED;;;;;;GAMG;AACH,MAAM,OAAO,4BAA6B,SAAQ,kBAAkB;IAWlE;;;;OAIG;IACH,YAAY,KAAqB,EAAE,MAAqB;QACtD,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACI,MAAM,CAAC,IAAI,CAAC,KAAqB;QACtC,OAAO,CAAC,MAAqB,EAAE,EAAE;YAC/B,OAAO,IAAI,4BAA4B,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACO,iBAAiB,CAAC,UAA0B;QACpD,IAAI,QAAQ,GAAG,KAAK,CAAC;QACrB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAE3B,OAAO,SAAS,QAAQ;YACtB,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;YAEzB,IAAI,OAAO,IAAI,CAAC,QAAQ,EAAE;gBACxB,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;gBAC7B,QAAQ,GAAG,OAAO,CAAC;aACpB;iBAAM,IAAI,CAAC,OAAO,IAAI,QAAQ,EAAE;gBAC/B,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;gBAChC,QAAQ,GAAG,OAAO,CAAC;aACpB;QACH,CAAC,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACI,eAAe,CAAC,UAA+B;QACpD,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,4BAA4B,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC;AAEtH;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,4BAA4B,CAAC,IAAI,CACzE,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAClD,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,4BAA4B,CAAC,IAAI,CAC1E,MAAM,CAAC,UAAU,CAAC,+BAA+B,CAAC,CACnD,CAAC"}

package/dist/esm/utils/display.js

@@ -0,0 +1,15 @@
+/**
+ * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
+ * @public
+ */
+export const hidden = `:host([hidden]){display:none}`;
+/**
+ * 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 function display(displayValue) {
+    return `${hidden}:host{display:${displayValue}}`;
+}
+//# sourceMappingURL=display.js.map

package/dist/esm/utils/display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.js","sourceRoot":"","sources":["../../../src/utils/display.ts"],"names":[],"mappings":"AA6BA;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,YAAqC;IAC3D,OAAO,GAAG,MAAM,iBAAiB,YAAY,GAAG,CAAC;AACnD,CAAC"}

package/dist/esm/utils/index.js

@@ -2,4 +2,6 @@ export * from './direction.js';
 export * from './typings.js';
 export * from './template-helpers.js';
 export * from './whitespace-filter.js';
+export * from './display.js';
+export * from './behaviors/match-media-stylesheet-behavior.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,gDAAgD,CAAC"}