@ni/nimble-components 1.0.0-beta.11 → 1.0.0-beta.110

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

@@ -1,7 +1,8 @@
 export var NimbleTheme;
 (function (NimbleTheme) {
-    NimbleTheme["Light"] = "LIGHT";
-    NimbleTheme["Dark"] = "DARK";
-    NimbleTheme["Color"] = "COLOR";
+    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=themes.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../src/theme-provider/themes.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACnB,8BAAe,CAAA;IACf,4BAAa,CAAA;IACb,8BAAe,CAAA;AACnB,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB"}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../../src/theme-provider/themes.ts"],"names":[],"mappings":"AAAA,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,28 @@
+import { TreeItem as FoundationTreeItem } from '@microsoft/fast-foundation';
+/**
+ * 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\>
+ *
+ */
+export 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,114 @@
+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, SelectionMode } 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\>
+ *
+ */
+export class TreeItem extends FoundationTreeItem {
+    constructor() {
+        super();
+        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 === SelectionMode.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,
+    template,
+    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,16 @@
+import { TreeView as FoundationTreeView } from '@microsoft/fast-foundation';
+import { SelectionMode } 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\>
+ *
+ */
+export declare class TreeView extends FoundationTreeView {
+    selectionMode: SelectionMode;
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,34 @@
+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 { SelectionMode } 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\>
+ *
+ */
+export class TreeView extends FoundationTreeView {
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.selectionMode) {
+            this.selectionMode = SelectionMode.All;
+        }
+    }
+}
+__decorate([
+    attr({ attribute: 'selection-mode' })
+], TreeView.prototype, "selectionMode", void 0);
+const nimbleTreeView = TreeView.compose({
+    baseName: 'tree-view',
+    baseClass: FoundationTreeView,
+    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,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAIrC,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACrB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC,GAAG,CAAC;SAC1C;IACL,CAAC;CACJ;AARG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACF;AAUxC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,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,6 @@
+export declare const pinnedSelectedAttribute = "pinned-selected";
+export declare const groupSelectedAttribute = "group-selected";
+export declare enum SelectionMode {
+    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 SelectionMode;
+(function (SelectionMode) {
+    SelectionMode["All"] = "all";
+    SelectionMode["LeavesOnly"] = "leaves-only";
+})(SelectionMode || (SelectionMode = {}));
+//# 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;AAEvD,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACrB,4BAAW,CAAA;IACX,2CAA0B,CAAA;AAC9B,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB"}

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/package.json

@@ -1,24 +1,30 @@
 {
   "name": "@ni/nimble-components",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.110",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run build-components && npm run build-storybook",
-    "lint": "eslint .",
-    "lint-fix": "eslint src --fix",
+    "lint": "npm run eslint && npm run prettier",
+    "format": "npm run eslint-fix && npm run prettier-fix",
+    "eslint": "eslint .",
+    "eslint-fix": "eslint src --fix",
+    "prettier": "prettier-eslint \"**/*.*\" --list-different --prettier-ignore",
+    "prettier-fix": "prettier-eslint \"**/*.*\" --write --prettier-ignore",
     "pack": "npm pack",
+    "invoke-publish": "npm publish",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook -o dist/storybook",
     "build-components": "tsc -p ./tsconfig.json",
     "build-components:watch": "tsc -p ./tsconfig.json -w",
     "chromatic": "chromatic",
-    "tdd": "npm run build-components && npm run test",
+    "tdd": "npm run build-components && npm run test-chrome",
     "tdd:watch": "npm run build-components:watch & npm run test-chrome:watch",
     "test-chrome:debugger": "karma start karma.conf.js --browsers=ChromeDebugging",
+    "test-chrome:verbose": "karma start karma.conf.verbose.js --browsers=ChromeHeadlessOpt --single-run",
     "test-chrome:watch": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --watch-extensions js",
     "test-chrome": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run",
     "test-firefox": "karma start karma.conf.js --browsers=FirefoxHeadless --single-run",
-    "test": "npm run test-chrome"
+    "test": "npm run test-chrome:verbose"
   },
   "repository": {
     "type": "git",
@@ -32,14 +38,12 @@
     "url": "https://github.com/ni/nimble/issues"
   },
   "homepage": "https://github.com/ni/nimble#readme",
-  "files": [
-    "dist/esm/**"
-  ],
   "dependencies": {
+    "@microsoft/fast-animation": "^4.1.5",
     "@microsoft/fast-components": "^2.0.0",
-    "@microsoft/fast-element": "^1.4.0",
-    "@microsoft/fast-foundation": "^2.0.0",
-    "@ni/nimble-tokens": "^1.0.0-beta.3",
+    "@microsoft/fast-element": "^1.6.1",
+    "@microsoft/fast-foundation": "^2.22.0",
+    "@ni/nimble-tokens": "^1.0.0-beta.35",
     "hex-rgb": "^5.0.0",
     "lodash-es": "^4.17.21"
   },
@@ -47,24 +51,29 @@
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.13.15",
-    "@ni/eslint-config": "^1.0.0",
-    "@storybook/addon-a11y": "^6.3.4",
-    "@storybook/addon-actions": "^6.3.4",
-    "@storybook/addon-essentials": "^6.3.4",
-    "@storybook/addon-links": "^6.3.4",
-    "@storybook/builder-webpack5": "^6.3.4",
-    "@storybook/html": "^6.3.4",
-    "@storybook/manager-webpack5": "^6.3.4",
-    "@types/jasmine": "~3.6.0",
+    "@ni/eslint-config-typescript": "^3.0.0",
+    "@storybook/addon-a11y": "^6.4.0",
+    "@storybook/addon-actions": "^6.4.0",
+    "@storybook/addon-docs": "^6.4.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-interactions": "^6.4.0",
+    "@storybook/addon-links": "^6.4.0",
+    "@storybook/addons": "^6.4.0",
+    "@storybook/builder-webpack5": "^6.4.0",
+    "@storybook/html": "^6.4.0",
+    "@storybook/jest": "^0.0.5",
+    "@storybook/manager-webpack5": "^6.4.0",
+    "@storybook/testing-library": "^0.0.7",
+    "@storybook/theming": "^6.4.0",
+    "@types/jasmine": "^3.6.0",
     "@types/webpack-env": "^1.15.2",
-    "@typescript-eslint/eslint-plugin": "^4.28.1",
     "babel-loader": "^8.2.2",
     "chromatic": "^5.9.2",
     "circular-dependency-plugin": "^5.2.0",
-    "css-loader": "^5.2.4",
+    "css-loader": "^6.2.0",
     "dotenv-webpack": "^7.0.2",
-    "eslint": "^7.29.0",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsdoc": "^36.1.0",
+    "eslint-plugin-storybook": "^0.5.1",
     "html-webpack-plugin": "^5.3.1",
     "jasmine-core": "^3.7.0",
     "karma": "^6.3.0",
@@ -74,13 +83,17 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-source-map-support": "^1.4.0",
     "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "^0.0.32",
     "karma-webpack": "^5.0.0",
+    "prettier": "^2.0.0",
+    "prettier-eslint": "^13.0.0",
+    "prettier-eslint-cli": "^5.0.1",
     "puppeteer": "^10.1.0",
-    "storybook-addon-xd-designs": "^5.5.0",
-    "ts-loader": "^7.0.2",
-    "typescript": "^4.3.4",
+    "storybook-addon-xd-designs": "file:storybook-addon-xd-designs-6.0.0.tgz",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.3.2",
     "webpack": "^5.37.0",
     "webpack-cli": "^4.6.0",
-    "webpack-dev-middleware": "^4.2.0"
+    "webpack-dev-middleware": "^5.0.0"
   }
 }

package/dist/esm/button/tests/button.spec.d.ts

@@ -1 +0,0 @@
-import '../index';