@ni/nimble-components 1.0.0-beta.12 → 1.0.0-beta.123

package/dist/esm/theme-provider/types.js

@@ -0,0 +1,8 @@
+export var NimbleTheme;
+(function (NimbleTheme) {
+    NimbleTheme["Light"] = "light";
+    NimbleTheme["Dark"] = "dark";
+    NimbleTheme["Color"] = "color";
+    NimbleTheme["LegacyBlue"] = "legacy-blue"; // ⛔️ only for use within SystemLink apps that haven't been updated to brand-aligned controls
+})(NimbleTheme || (NimbleTheme = {}));
+//# sourceMappingURL=types.js.map

package/dist/esm/theme-provider/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/theme-provider/types.ts"],"names":[],"mappings":"AACA,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACnB,8BAAe,CAAA;IACf,4BAAa,CAAA;IACb,8BAAe,CAAA;IACf,yCAA0B,CAAA,CAAC,6FAA6F;AAC5H,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB"}

package/dist/esm/tree-item/index.d.ts

@@ -0,0 +1,34 @@
+import { TreeItem as FoundationTreeItem } from '@microsoft/fast-foundation';
+export type { TreeItem };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tree-item': TreeItem;
+    }
+}
+/**
+ * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-item\>
+ *
+ */
+declare class TreeItem extends FoundationTreeItem {
+    private treeView;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private hasChildTreeItems;
+    private readonly handleClickOverride;
+    private readonly handleSelectedChange;
+    private clearTreeGroupSelection;
+    private setGroupSelectionOnRootParentTreeItem;
+    private getImmediateTreeItem;
+    /**
+     * This was copied directly from the FAST TreeItem implementation
+     * @returns the root tree view
+     */
+    private getParentTreeView;
+}

package/dist/esm/tree-item/index.js

@@ -0,0 +1,117 @@
+import { treeItemTemplate as template, TreeItem as FoundationTreeItem, DesignSystem } from '@microsoft/fast-foundation';
+import { controlsArrowExpanderUp16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { groupSelectedAttribute, TreeViewSelectionMode } from '../tree-view/types';
+import { styles } from './styles';
+/**
+ * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-item\>
+ *
+ */
+class TreeItem extends FoundationTreeItem {
+    constructor() {
+        super();
+        this.treeView = null;
+        this.handleClickOverride = (event) => {
+            if (event.composedPath().includes(this.expandCollapseButton)) {
+                // just have base class handle click event for glyph
+                return;
+            }
+            const treeItem = this.getImmediateTreeItem(event.target);
+            if (treeItem?.disabled || treeItem !== this) {
+                // don't allow base TreeItem to emit a 'selected-change' event when a disabled item is clicked
+                event.stopImmediatePropagation();
+                return;
+            }
+            const leavesOnly = this.treeView?.selectionMode === TreeViewSelectionMode.LeavesOnly;
+            const hasChildren = this.hasChildTreeItems();
+            if ((leavesOnly && !hasChildren) || !leavesOnly) {
+                // if either a leaf tree item, or in a mode that supports select on groups,
+                // process click as a select
+                if (!this.selected) {
+                    this.selected = true;
+                    this.$emit('selected-change', this);
+                }
+            }
+            else {
+                // implicit hasChildren && leavesOnly, so only allow expand/collapse, not select
+                this.expanded = !this.expanded;
+                this.$emit('expanded-change', this);
+            }
+            // don't allow base class to process click event
+            event.stopImmediatePropagation();
+        };
+        // This prevents the toggling of selected state when a TreeItem is clicked multiple times,
+        // which is what the FAST TreeItem allows
+        this.handleSelectedChange = (event) => {
+            // only process selection
+            if (event.target === this && this.selected) {
+                this.setGroupSelectionOnRootParentTreeItem(this);
+            }
+        };
+        this.addEventListener('click', this.handleClickOverride);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('selected-change', this.handleSelectedChange);
+        this.treeView = this.getParentTreeView();
+        if (this.treeView && this.selected) {
+            this.setGroupSelectionOnRootParentTreeItem(this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClickOverride);
+        this.removeEventListener('selected-change', this.handleSelectedChange);
+        this.treeView = null;
+    }
+    hasChildTreeItems() {
+        const treeItemChild = this.querySelector('[role="treeitem"]');
+        return treeItemChild !== null;
+    }
+    clearTreeGroupSelection() {
+        const currentGroupSelection = this.treeView?.querySelectorAll(`[${groupSelectedAttribute}]`);
+        currentGroupSelection?.forEach(treeItem => treeItem.removeAttribute(groupSelectedAttribute));
+    }
+    setGroupSelectionOnRootParentTreeItem(treeItem) {
+        this.clearTreeGroupSelection();
+        let currentItem = treeItem;
+        while (currentItem?.parentElement !== this.treeView) {
+            currentItem = currentItem?.parentElement;
+        }
+        if (currentItem) {
+            currentItem.setAttribute(groupSelectedAttribute, 'true');
+        }
+    }
+    getImmediateTreeItem(element) {
+        let foundElement = element;
+        while (foundElement
+            && !(foundElement?.getAttribute('role') === 'treeitem')) {
+            foundElement = foundElement?.parentElement;
+        }
+        return foundElement;
+    }
+    /**
+     * This was copied directly from the FAST TreeItem implementation
+     * @returns the root tree view
+     */
+    getParentTreeView() {
+        const parentNode = this.parentElement.closest("[role='tree']");
+        return parentNode;
+    }
+}
+const nimbleTreeItem = TreeItem.compose({
+    baseName: 'tree-item',
+    baseClass: FoundationTreeItem,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
+    template,
+    // @ts-expect-error FAST styles have incorrect type, see: https://github.com/microsoft/fast/issues/5047
+    styles,
+    expandCollapseGlyph: controlsArrowExpanderUp16X16.data
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
+//# sourceMappingURL=index.js.map

package/dist/esm/tree-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/tree-item/styles.d.ts

@@ -0,0 +1,3 @@
+import { ElementStyles } from '@microsoft/fast-element';
+import { ElementDefinitionContext, TreeItemOptions } from '@microsoft/fast-foundation';
+export declare const styles: (context: ElementDefinitionContext, definition: TreeItemOptions) => ElementStyles;

package/dist/esm/tree-item/styles.js

@@ -0,0 +1,195 @@
+import { DirectionalStyleSheetBehavior } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+import { display, TreeItem } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+import { contentFontColor, fontFamily, borderColorHover, fillColorSelected, contentFontSize, fillColorHover, fillColorSelectedHover, borderWidth, iconSize } from '../theme-provider/design-tokens';
+import { groupSelectedAttribute } from '../tree-view/types';
+export const styles = (context) => css `
+        ${display('block')}
+
+        :host {
+            contain: content;
+            position: relative;
+            outline: none;
+            color: ${contentFontColor};
+            cursor: pointer;
+            font-family: ${fontFamily};
+            --tree-item-nested-width: 0;
+        }
+
+        ${ /* this controls the side border */''}
+        :host([${groupSelectedAttribute}])::after {
+            background: ${borderColorHover};
+            border-radius: 0px;
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0px;
+            width: calc(${borderWidth} * 2);
+            height: calc(${iconSize} * 2);
+        }
+
+        .positioning-region {
+            display: flex;
+            position: relative;
+            box-sizing: border-box;
+            height: calc(${iconSize} * 2);
+        }
+
+        .positioning-region:hover {
+            background: ${fillColorHover};
+        }
+
+        :host(${focusVisible}) .positioning-region {
+            box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
+            outline: ${borderWidth} solid ${borderColorHover};
+            outline-offset: -2px;
+        }
+
+        :host([selected]) .positioning-region {
+            background: ${fillColorSelected};
+        }
+
+        :host([selected]) .positioning-region:hover {
+            background: ${fillColorSelectedHover};
+        }
+
+        .positioning-region::before {
+            content: '';
+            display: block;
+            width: var(--tree-item-nested-width);
+            flex-shrink: 0;
+        }
+
+        .content-region {
+            display: inline-flex;
+            align-items: center;
+            white-space: nowrap;
+            width: 100%;
+            padding-left: 10px;
+            font-size: ${contentFontSize};
+            user-select: none;
+        }
+
+        :host(${focusVisible}) .content-region {
+            outline: none;
+        }
+
+        :host(.nested) .content-region {
+            position: relative;
+            margin-inline-start: ${iconSize};
+        }
+
+        :host([disabled]) .content-region {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .expand-collapse-button {
+            background: none;
+            border: none;
+            outline: none;
+            width: ${iconSize};
+            height: ${iconSize};
+            padding: 0px;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            margin-left: 10px;
+        }
+
+        :host(.nested) .expand-collapse-button {
+            position: absolute;
+        }
+
+        .expand-collapse-button svg {
+            width: ${iconSize};
+            height: ${iconSize};
+            transition: transform 0.2s ease-in;
+            pointer-events: none;
+            fill: currentcolor;
+        }
+
+        ${
+/* this rule keeps children without an icon text aligned with parents */ ''}
+        span[part="start"] {
+            width: ${iconSize};
+        }
+
+        ${
+/* the start class is applied when the corresponding slots is filled */ ''}
+        .start {
+            display: flex;
+            fill: currentcolor;
+            margin-inline-start: ${iconSize};
+            margin-inline-end: ${iconSize};
+        }
+
+        slot[name='start']::slotted(*) {
+            width: ${iconSize};
+            height: ${iconSize};
+        }
+
+        ::slotted(${context.tagFor(TreeItem)}) {
+            --tree-item-nested-width: 1em;
+            --expand-collapse-button-nested-width: calc(${iconSize} * -1);
+        }
+
+        ${
+/* the end class is applied when the corresponding slots is filled */ ''}
+        .end {
+            display: flex;
+            fill: currentcolor;
+            margin-inline-start: ${iconSize};
+        }
+
+        .items {
+            display: none;
+            ${
+/*
+ * this controls the nested indentation (by affecting .positioning-region::before)
+ * it must minimally contain arithmetic with an em and a px value
+ * make it larger or shorter by changing the px value
+ */ ''}
+            font-size: calc(1em + (${iconSize} * 2));
+        }
+
+        :host([expanded]) .items {
+            display: block;
+        }
+    `
+    // prettier-ignore
+    .withBehaviors(new DirectionalStyleSheetBehavior(css `
+                    ${ /* ltr styles */''}
+                    :host(.nested) .expand-collapse-button {
+                        left: var(
+                            --expand-collapse-button-nested-width,
+                            calc(${iconSize} * -1)
+                        );
+                    }
+
+                    .expand-collapse-button svg {
+                        transform: rotate(90deg);
+                    }
+
+                    :host([expanded]) .expand-collapse-button svg {
+                        transform: rotate(180deg);
+                    }
+                `, css `
+                    ${ /* rtl styles */''}
+                    :host(.nested) .expand-collapse-button {
+                        right: var(
+                            --expand-collapse-button-nested-width,
+                            calc(${iconSize} * -1)
+                        );
+                    }
+
+                    .expand-collapse-button svg {
+                        transform: rotate(180deg);
+                    }
+
+                    :host([expanded]) .expand-collapse-button svg {
+                        transform: rotate(135deg);
+                    }
+                `));
+//# sourceMappingURL=styles.js.map

package/dist/esm/tree-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAiB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACH,OAAO,EAEP,QAAQ,EAEX,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,QAAQ,EACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,MAAM,CAAC,MAAM,MAAM,GAGE,CAAC,OAAiC,EAAE,EAAE,CAAC,GAAG,CAAA;UACrD,OAAO,CAAC,OAAO,CAAC;;;;;;qBAML,gBAAgB;;2BAEV,UAAU;;;;UAI3B,CAAA,mCAAoC,EAAE;iBAC/B,sBAAsB;0BACb,gBAAgB;;;;;;0BAMhB,WAAW;2BACV,QAAQ;;;;;;;2BAOR,QAAQ;;;;0BAIT,cAAc;;;gBAGxB,YAAY;sCACU,WAAW,IAAI,gBAAgB;uBAC9C,WAAW,UAAU,gBAAgB;;;;;0BAKlC,iBAAiB;;;;0BAIjB,sBAAsB;;;;;;;;;;;;;;;;yBAgBvB,eAAe;;;;gBAIxB,YAAY;;;;;;mCAMO,QAAQ;;;;;;;;;;;;qBAYtB,QAAQ;sBACP,QAAQ;;;;;;;;;;;;;qBAaT,QAAQ;sBACP,QAAQ;;;;;;UAMpB;AACE,wEAAwE,CAAC,EAC7E;;qBAEa,QAAQ;;;UAGnB;AACE,uEAAuE,CAAC,EAC5E;;;;mCAI2B,QAAQ;iCACV,QAAQ;;;;qBAIpB,QAAQ;sBACP,QAAQ;;;oBAGV,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC;;0DAEc,QAAQ;;;UAGxD;AACE,qEAAqE,CAAC,EAC1E;;;;mCAI2B,QAAQ;;;;;cAK7B;AACE;;;;GAIG,CAAC,EACR;qCACyB,QAAQ;;;;;;KAMxC;IACL,kBAAkB;KACb,aAAa,CACV,IAAI,6BAA6B,CAC7B,GAAG,CAAA;sBACO,CAAA,gBAAiB,EAAE;;;;mCAIN,QAAQ;;;;;;;;;;;iBAW1B,EACL,GAAG,CAAA;sBACO,CAAA,gBAAiB,EAAE;;;;mCAIN,QAAQ;;;;;;;;;;;iBAW1B,CACR,CACJ,CAAC"}

package/dist/esm/tree-view/index.d.ts

@@ -0,0 +1,22 @@
+import { TreeView as FoundationTreeView } from '@microsoft/fast-foundation';
+import { TreeViewSelectionMode } from './types';
+export type { TreeView };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tree-view': TreeView;
+    }
+}
+/**
+ * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-view\>
+ *
+ */
+declare class TreeView extends FoundationTreeView {
+    selectionMode: TreeViewSelectionMode;
+    connectedCallback(): void;
+}

package/dist/esm/tree-view/index.js

@@ -0,0 +1,35 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { treeViewTemplate as template, TreeView as FoundationTreeView, DesignSystem } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { TreeViewSelectionMode } from './types';
+/**
+ * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-view\>
+ *
+ */
+class TreeView extends FoundationTreeView {
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.selectionMode) {
+            this.selectionMode = TreeViewSelectionMode.All;
+        }
+    }
+}
+__decorate([
+    attr({ attribute: 'selection-mode' })
+], TreeView.prototype, "selectionMode", void 0);
+const nimbleTreeView = TreeView.compose({
+    baseName: 'tree-view',
+    baseClass: FoundationTreeView,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
+//# sourceMappingURL=index.js.map

package/dist/esm/tree-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,gBAAgB,IAAI,QAAQ,EAC5B,QAAQ,IAAI,kBAAkB,EAC9B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAUhD;;;;;;;;;GASG;AACH,MAAM,QAAS,SAAQ,kBAAkB;IAI9B,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACrB,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,GAAG,CAAC;SAClD;IACL,CAAC;CACJ;AARG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACO;AAUjD,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}

package/dist/esm/tree-view/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/tree-view/styles.js

@@ -0,0 +1,17 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+export const styles = css `
+    ${display('flex')}
+
+    :host {
+        flex-direction: column;
+        align-items: stretch;
+        min-width: fit-content;
+        font-size: 0;
+    }
+    :host(${focusVisible}) {
+        outline: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/tree-view/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;YAQT,YAAY;;;CAGvB,CAAC"}

package/dist/esm/tree-view/types.d.ts

@@ -0,0 +1,7 @@
+export declare const pinnedSelectedAttribute = "pinned-selected";
+export declare const groupSelectedAttribute = "group-selected";
+export declare type TreeViewSelectionModeAttribute = 'all' | 'leaves-only';
+export declare enum TreeViewSelectionMode {
+    All = "all",
+    LeavesOnly = "leaves-only"
+}

package/dist/esm/tree-view/types.js

@@ -0,0 +1,8 @@
+export const pinnedSelectedAttribute = 'pinned-selected';
+export const groupSelectedAttribute = 'group-selected';
+export var TreeViewSelectionMode;
+(function (TreeViewSelectionMode) {
+    TreeViewSelectionMode["All"] = "all";
+    TreeViewSelectionMode["LeavesOnly"] = "leaves-only";
+})(TreeViewSelectionMode || (TreeViewSelectionMode = {}));
+//# sourceMappingURL=types.js.map

package/dist/esm/tree-view/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/tree-view/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;AACzD,MAAM,CAAC,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAGvD,MAAM,CAAN,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC7B,oCAAW,CAAA;IACX,mDAA0B,CAAA;AAC9B,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,QAGhC"}

package/dist/esm/utilities/style/focus.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
+ */
+/**
+ * The string representing the focus selector to be used. Value
+ * will be ":focus-visible" when https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+ * is supported and ":focus" when it is not.
+ *
+ * @public
+ */
+export declare const focusVisible: string;

package/dist/esm/utilities/style/focus.js

@@ -0,0 +1,14 @@
+/**
+ * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
+ */
+// eslint-disable-next-line
+import { focusVisible as focusVisibleOriginal } from '@microsoft/fast-foundation';
+/**
+ * The string representing the focus selector to be used. Value
+ * will be ":focus-visible" when https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+ * is supported and ":focus" when it is not.
+ *
+ * @public
+ */
+export const focusVisible = `:${focusVisibleOriginal}`;
+//# sourceMappingURL=focus.js.map

package/dist/esm/utilities/style/focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../../../src/utilities/style/focus.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,2BAA2B;AAC3B,OAAO,EAAE,YAAY,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,oBAAoB,EAAE,CAAC"}

package/dist/esm/utilities/style/prefers-reduced-motion.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Singleton utility to watch the prefers-reduced-motion media value
+ */
+export declare class PrefersReducedMotionWatcher {
+    static instance: PrefersReducedMotionWatcher;
+    readonly mediaQuery: MediaQueryList;
+    private constructor();
+}

package/dist/esm/utilities/style/prefers-reduced-motion.js

@@ -0,0 +1,11 @@
+/**
+ * Singleton utility to watch the prefers-reduced-motion media value
+ */
+export class PrefersReducedMotionWatcher {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    constructor() {
+        this.mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    }
+}
+PrefersReducedMotionWatcher.instance = new PrefersReducedMotionWatcher();
+//# sourceMappingURL=prefers-reduced-motion.js.map

package/dist/esm/utilities/style/prefers-reduced-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefers-reduced-motion.js","sourceRoot":"","sources":["../../../../src/utilities/style/prefers-reduced-motion.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,OAAO,2BAA2B;IAQpC,gEAAgE;IAChE;QALgB,eAAU,GAAmB,MAAM,CAAC,UAAU,CAC1D,kCAAkC,CACrC,CAAC;IAGqB,CAAC;;AARV,oCAAQ,GACtB,IAAI,2BAA2B,EAAE,CAAC"}