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

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"}

package/package.json

@@ -1,24 +1,30 @@
 {
   "name": "@ni/nimble-components",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.120",
   "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.4",
+    "@microsoft/fast-element": "^1.6.1",
+    "@microsoft/fast-foundation": "^2.22.0",
+    "@ni/nimble-tokens": "^1.0.0-beta.36",
     "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.5",
+    "@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';

package/dist/esm/button/tests/button.spec.js

@@ -1,39 +0,0 @@
-import { DOM } from '@microsoft/fast-element';
-import { fixture } from '../../tests/utilities/fixture';
-import '../index';
-async function setup() {
-    return fixture('nimble-button');
-}
-describe('Button', () => {
-    it('should set the `autofocus` attribute on the internal button when provided', async () => {
-        const { element, connect, disconnect } = await setup();
-        element.autofocus = true;
-        await connect();
-        expect(element.shadowRoot?.querySelector('button')?.hasAttribute('autofocus')).toBe(true);
-        await disconnect();
-    });
-    describe("of type 'submit'", () => {
-        it('should submit the parent form when clicked', async () => {
-            const { element, parent, connect, disconnect } = await setup();
-            const form = document.createElement('form');
-            element.setAttribute('type', 'submit');
-            form.appendChild(element);
-            parent.appendChild(form);
-            await connect();
-            const wasSumbitted = await new Promise(resolve => {
-                // Resolve as true when the event listener is handled
-                form.addEventListener('submit', (event) => {
-                    event.preventDefault();
-                    expect(event.submitter).toEqual(element.proxy);
-                    resolve(true);
-                });
-                element.click();
-                // Resolve false on the next update in case reset hasn't happened
-                DOM.queueUpdate(() => resolve(false));
-            });
-            expect(wasSumbitted).toBe(true);
-            await disconnect();
-        });
-    });
-});
-//# sourceMappingURL=button.spec.js.map

package/dist/esm/button/tests/button.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.spec.js","sourceRoot":"","sources":["../../../../src/button/tests/button.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAW,MAAM,+BAA+B,CAAC;AAEjE,OAAO,UAAU,CAAC;AAElB,KAAK,UAAU,KAAK;IAChB,OAAO,OAAO,CAAS,eAAe,CAAC,CAAC;AAC5C,CAAC;AAED,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACpB,EAAE,CAAC,2EAA2E,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,MAAM,KAAK,EAAE,CAAC;QAEvD,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;QAEzB,MAAM,OAAO,EAAE,CAAC;QAEhB,MAAM,CACF,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CACzE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEb,MAAM,UAAU,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;QAC9B,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;YACxD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,MAAM,KAAK,EAAE,CAAC;YAC/D,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC5C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YACvC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC1B,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAEzB,MAAM,OAAO,EAAE,CAAC;YAEhB,MAAM,YAAY,GAAG,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;gBAC7C,qDAAqD;gBACrD,IAAI,CAAC,gBAAgB,CACjB,QAAQ,EACR,CAAC,KAAyC,EAAE,EAAE;oBAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;oBAC/C,OAAO,CAAC,IAAI,CAAC,CAAC;gBAClB,CAAC,CACJ,CAAC;gBAEF,OAAO,CAAC,KAAK,EAAE,CAAC;gBAEhB,iEAAiE;gBACjE,GAAG,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;YAC1C,CAAC,CAAC,CAAC;YAEH,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEhC,MAAM,UAAU,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

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

@@ -1,81 +0,0 @@
-import { ButtonAppearance } from '../types';
-import '../index';
-declare const _default: {
-    title: string;
-    decorators: ((...args: any) => any)[];
-    parameters: {
-        design: {
-            artboardUrl: string;
-        };
-        actions: {
-            handles: string[];
-        };
-    };
-    argTypes: {
-        appearance: {
-            options: ButtonAppearance[];
-            control: {
-                type: string;
-            };
-        };
-        disabled: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-    };
-    render: ({ label, appearance, disabled }: {
-        label: string;
-        appearance: string;
-        disabled: string;
-    }) => string;
-    args: {
-        label: string;
-        appearance: string;
-    };
-};
-export default _default;
-export declare const defaultButton: {
-    (): string;
-    parameters: any;
-};
-export declare const outlineButton: {
-    args: {
-        label: string;
-        appearance: ButtonAppearance;
-    };
-};
-export declare const ghostButton: {
-    args: {
-        label: string;
-        appearance: ButtonAppearance;
-    };
-};
-export declare const blockButton: {
-    args: {
-        label: string;
-        appearance: ButtonAppearance;
-    };
-};
-export declare const outlineButtonDisabled: {
-    args: {
-        disabled: string;
-        label: string;
-        appearance: ButtonAppearance;
-    };
-};
-export declare const ghostButtonDisabled: {
-    args: {
-        disabled: string;
-        label: string;
-        appearance: ButtonAppearance;
-    };
-};
-export declare const blockButtonDisabled: {
-    args: {
-        disabled: string;
-        label: string;
-        appearance: ButtonAppearance;
-    };
-};