@ni/nimble-components 16.0.0 → 16.1.1

package/dist/esm/all-components.d.ts

@@ -23,6 +23,7 @@ import './number-field';
 import './radio';
 import './radio-group';
 import './select';
+import './spinner';
 import './switch';
 import './tab';
 import './tab-panel';

package/dist/esm/all-components.js

@@ -23,6 +23,7 @@ import './number-field';
 import './radio';
 import './radio-group';
 import './select';
+import './spinner';
 import './switch';
 import './tab';
 import './tab-panel';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

package/dist/esm/spinner/index.d.ts

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-spinner': Spinner;
+    }
+}
+/**
+ * A Nimble-styled spinner component.
+ * A spinner is an animating indicator that can be placed in a particular region of a page to represent loading progress, or an ongoing operation, of an indeterminate / unknown duration.
+ */
+export declare class Spinner extends FoundationElement {
+}

package/dist/esm/spinner/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A Nimble-styled spinner component.
+ * A spinner is an animating indicator that can be placed in a particular region of a page to represent loading progress, or an ongoing operation, of an indeterminate / unknown duration.
+ */
+export class Spinner extends FoundationElement {
+}
+const nimbleSpinner = Spinner.compose({
+    baseName: 'spinner',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,OAAQ,SAAQ,iBAAiB;CAAG;AAEjD,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAClC,QAAQ,EAAE,SAAS;IACnB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC"}

package/dist/esm/spinner/styles.d.ts

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

package/dist/esm/spinner/styles.js

@@ -0,0 +1,149 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { Theme } from '../theme-provider/types';
+import { themeBehavior } from '../utilities/style/theme';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        width: 16px;
+        height: 16px;
+    }
+
+    div.container {
+        margin: max(2px, 6.25%);
+        flex: 1;
+        ${
+/**
+ * At some spinner sizes / browser zoom levels, the spinner bits/squares appear to slightly overlap visually.
+ * If we set a color with transparency on each bit, it'll look wrong in the overlapping region (since the opacity
+ * combines and affects the color at the overlapping spot).
+ * Currently all 3 themes use a color with opacity = 0.6, so that's applied here on the parent element instead,
+ * which avoids that issue.
+ */
+''}
+        opacity: 0.6;
+    }
+
+    div.bit1,
+    div.bit2 {
+        background: var(--ni-private-spinner-bits-background-color);
+        width: 50%;
+        height: 50%;
+        margin: auto;
+        animation-duration: 1600ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 0);
+    }
+
+    div.bit1 {
+        animation-name: ni-private-spinner-keyframes-1;
+    }
+
+    div.bit2 {
+        animation-name: ni-private-spinner-keyframes-2;
+    }
+
+    @media (prefers-reduced-motion) {
+        div.bit1,
+        div.bit2 {
+            animation-timing-function: ease-in-out, steps(1);
+            animation-duration: 3200ms;
+        }
+
+        div.bit1 {
+            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
+                ni-private-spinner-no-motion-transform-keyframes-1;
+        }
+
+        div.bit2 {
+            animation-name: ni-private-spinner-no-motion-opacity-keyframes,
+                ni-private-spinner-no-motion-transform-keyframes-2;
+        }
+    }
+
+    @keyframes ni-private-spinner-keyframes-1 {
+        0%,
+        100% {
+            transform: translate(-50%, 0);
+        }
+
+        25% {
+            transform: translate(50%, 0);
+        }
+
+        50% {
+            transform: translate(50%, 100%);
+        }
+
+        75% {
+            transform: translate(-50%, 100%);
+        }
+    }
+
+    @keyframes ni-private-spinner-keyframes-2 {
+        0%,
+        100% {
+            transform: translate(50%, 0);
+        }
+
+        25% {
+            transform: translate(-50%, 0);
+        }
+
+        50% {
+            transform: translate(-50%, -100%);
+        }
+
+        75% {
+            transform: translate(50%, -100%);
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-opacity-keyframes {
+        0%,
+        50%,
+        100% {
+            opacity: 0;
+        }
+
+        25%,
+        75% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-transform-keyframes-1 {
+        0%,
+        100% {
+            transform: translate(-50%, 0);
+        }
+        50% {
+            transform: translate(50%, 0);
+        }
+    }
+
+    @keyframes ni-private-spinner-no-motion-transform-keyframes-2 {
+        0%,
+        100% {
+            transform: translate(50%, 0);
+        }
+
+        50% {
+            transform: translate(-50%, 0);
+        }
+    }
+`.withBehaviors(themeBehavior(Theme.light, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${Black91}
+        `), themeBehavior(Theme.dark, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${Black15};
+            }
+        `), themeBehavior(Theme.color, css `
+            :host {
+                --ni-private-spinner-bits-background-color: ${White};
+            }
+        `));
+//# sourceMappingURL=styles.js.map

package/dist/esm/spinner/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/spinner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;UAUlB;AACE;;;;;;GAMG;AACH,EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHP,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,OAAO;SAC5D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8DAEmD,OAAO;;SAE5D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,KAAK;;SAE1D,CACJ,CACJ,CAAC"}

package/dist/esm/spinner/template.d.ts

@@ -0,0 +1,2 @@
+import type { Spinner } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Spinner, any>;

package/dist/esm/spinner/template.js

@@ -0,0 +1,10 @@
+import { html } from '@microsoft/fast-element';
+export const template = html `
+    <template role="progressbar">
+        <div class="container">
+            <div class="bit1"></div>
+            <div class="bit2"></div>
+        </div>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/spinner/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/spinner/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;;;;;;CAOpC,CAAC"}

package/dist/esm/table/components/cell/index.d.ts

@@ -0,0 +1,14 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { TableFieldValue } from '../../types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-cell': TableCell;
+    }
+}
+/**
+ * A styled cell that is used within the nimble-table-row.
+ * @internal
+ */
+export declare class TableCell extends FoundationElement {
+    data: TableFieldValue;
+}

package/dist/esm/table/components/cell/index.js

@@ -0,0 +1,21 @@
+import { __decorate } from "tslib";
+import { observable } from '@microsoft/fast-element';
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A styled cell that is used within the nimble-table-row.
+ * @internal
+ */
+export class TableCell extends FoundationElement {
+}
+__decorate([
+    observable
+], TableCell.prototype, "data", void 0);
+const nimbleTableCell = TableCell.compose({
+    baseName: 'table-cell',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
+//# sourceMappingURL=index.js.map

package/dist/esm/table/components/cell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,iBAAiB;CAI/C;AADG;IADC,UAAU;uCACkB;AAGjC,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}

package/dist/esm/table/components/cell/styles.d.ts

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

package/dist/esm/table/components/cell/styles.js

@@ -0,0 +1,6 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+export const styles = css `
+    ${display('flex')}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/table/components/cell/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;CACpB,CAAC"}

package/dist/esm/table/components/cell/template.d.ts

@@ -0,0 +1,2 @@
+import type { TableCell } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TableCell, any>;

package/dist/esm/table/components/cell/template.js

@@ -0,0 +1,8 @@
+import { html } from '@microsoft/fast-element';
+// prettier-ignore
+export const template = html `
+    <template role="cell">
+        ${x => x.data}
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/table/components/cell/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;;UAE7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;CAEpB,CAAC"}

package/dist/esm/table/components/row/index.d.ts

@@ -0,0 +1,16 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { TableFieldValue, TableRecord } from '../../types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-table-row': TableRow;
+    }
+}
+/**
+ * A styled row that is used within the nimble-table.
+ * @internal
+ */
+export declare class TableRow<TData extends TableRecord = TableRecord> extends FoundationElement {
+    data?: TData;
+    columns: string[];
+    getCellValue(column: string): TableFieldValue;
+}

package/dist/esm/table/components/row/index.js

@@ -0,0 +1,33 @@
+import { __decorate } from "tslib";
+import { observable } from '@microsoft/fast-element';
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A styled row that is used within the nimble-table.
+ * @internal
+ */
+export class TableRow extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        // TODO: Temporarily assume the set of columns will be an array of strings.
+        // Eventually, this will be an array of column definitions.
+        this.columns = [];
+    }
+    getCellValue(column) {
+        return this.data ? this.data[column] : undefined;
+    }
+}
+__decorate([
+    observable
+], TableRow.prototype, "data", void 0);
+__decorate([
+    observable
+], TableRow.prototype, "columns", void 0);
+const nimbleTableRow = TableRow.compose({
+    baseName: 'table-row',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
+//# sourceMappingURL=index.js.map

package/dist/esm/table/components/row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;;GAGG;AACH,MAAM,OAAO,QAEX,SAAQ,iBAAiB;IAF3B;;QAMI,2EAA2E;QAC3E,2DAA2D;QAEpD,YAAO,GAAa,EAAE,CAAC;IAKlC,CAAC;IAHU,YAAY,CAAC,MAAc;QAC9B,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACrD,CAAC;CACJ;AAVG;IADC,UAAU;sCACS;AAKpB;IADC,UAAU;yCACmB;AAOlC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,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/table/components/row/styles.d.ts

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

package/dist/esm/table/components/row/styles.js

@@ -0,0 +1,10 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+export const styles = css `
+    ${display('flex')}
+
+    .cell {
+        flex: 1;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/table/components/row/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;CAKpB,CAAC"}

package/dist/esm/table/components/row/template.d.ts

@@ -0,0 +1,2 @@
+import type { TableRow } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TableRow<import("../../types").TableRecord>, any>;

package/dist/esm/table/components/row/template.js

@@ -0,0 +1,16 @@
+import { html, repeat } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { TableCell } from '../cell';
+// prettier-ignore
+export const template = html `
+    <template role="row">
+        ${repeat(x => x.columns, html `
+            <${DesignSystem.tagFor(TableCell)}
+                class="cell"
+                :data="${(x, c) => c.parent.getCellValue(x)}"
+            >
+            </${DesignSystem.tagFor(TableCell)}>
+        `)}
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/table/components/row/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/row/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;UAE5B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAQ;eAC9B,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;;yBAEpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAE,CAAC,CAAC,MAAmB,CAAC,YAAY,CAAC,CAAC,CAAC;;gBAEzD,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC;SACrC,CAAC;;CAET,CAAC"}

package/dist/esm/table/index.d.ts

@@ -10,14 +10,13 @@ declare global {
  */
 export declare class Table<TData extends TableRecord = TableRecord> extends FoundationElement {
     data: TData[];
-    tableData: string[][];
+    columns: string[];
     columnHeaders: string[];
     private readonly table;
     private options;
     private readonly tableInitialized;
     constructor();
     dataChanged(prev: TData[] | undefined, next: TData[] | undefined): void;
-    private refreshRows;
     private updateTableOptions;
     private readonly update;
     private generateColumns;

package/dist/esm/table/index.js

@@ -11,8 +11,9 @@ export class Table extends FoundationElement {
     constructor() {
         super();
         this.data = [];
-        // TODO: Temporarily expose the table data as arrays of strings.
-        this.tableData = [];
+        // TODO: Temporarily expose the columns as a string array. This will ultimately be
+        // column definitions provided by slotted elements.
+        this.columns = [];
         // TODO: Temporarily expose the column headers as a string array.
         this.columnHeaders = [];
         this.tableInitialized = false;
@@ -48,25 +49,8 @@ export class Table extends FoundationElement {
         // Ignore any updates that occur prior to the TanStack table being initialized.
         if (this.tableInitialized) {
             this.updateTableOptions({ data: this.data });
-            this.refreshRows();
         }
     }
-    // TODO: For now, assume all cells can be rendered as strings. Ultimately, the data
-    // should be passed to nimble-row elements to use the view template from a column definition.
-    refreshRows() {
-        const tableData = [];
-        const rows = this.table.getRowModel().rows;
-        for (const row of rows) {
-            const rowArray = [];
-            for (const cell of row.getVisibleCells()) {
-                const cellValue = cell.getValue();
-                const stringValue = cellValue == null ? '' : cellValue.toString();
-                rowArray.push(stringValue);
-            }
-            tableData.push(rowArray);
-        }
-        this.tableData = tableData;
-    }
     updateTableOptions(updatedOptions) {
         this.options = { ...this.options, ...updatedOptions };
         this.update(this.table.initialState);
@@ -89,6 +73,7 @@ export class Table extends FoundationElement {
         });
         this.updateTableOptions({ columns: generatedColumns });
         this.columnHeaders = generatedColumns.map(x => x.header);
+        this.columns = this.columnHeaders;
     }
 }
 __decorate([
@@ -96,7 +81,7 @@ __decorate([
 ], Table.prototype, "data", void 0);
 __decorate([
     observable
-], Table.prototype, "tableData", void 0);
+], Table.prototype, "columns", void 0);
 __decorate([
     observable
 ], Table.prototype, "columnHeaders", void 0);

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

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

package/dist/esm/table/styles.js

@@ -16,11 +16,6 @@ export const styles = css `
         flex-direction: row;
     }
 
-    .table-row {
-        display: flex;
-        flex-direction: row;
-    }
-
     .table-cell {
         flex: 1;
     }

package/dist/esm/table/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAE1E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;gBAKL,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;CAgB7B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAE1E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;gBAKL,QAAQ;iBACP,aAAa;;;;;;;;;;;CAW7B,CAAC"}

package/dist/esm/table/template.d.ts

@@ -1,2 +1,3 @@
 import type { Table } from '.';
-export declare const template: import("@microsoft/fast-element").ViewTemplate<Table<import("./types").TableRecord>, any>;
+import type { TableRecord } from './types';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Table<TableRecord>, any>;

package/dist/esm/table/template.js

@@ -1,20 +1,24 @@
 import { html, repeat } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { TableRow } from './components/row';
 // prettier-ignore
 export const template = html `
-    <template>
+    <template role="table">
         <div class="table-container">
-            <div class="table-header">
-                ${repeat(x => x.columnHeaders, html `
-                    <span class="table-cell">${x => x}</span>
-                `)}
+            <div role="rowgroup">
+                <div class="table-header" role="row">
+                    ${repeat(x => x.columnHeaders, html `
+                        <span class="table-cell" role="columnheader">${x => x}</span>
+                    `)}
+                </div>
             </div>
-            <div class="table-viewport">
-                ${repeat(x => x.tableData, html `
-                    <div class="table-row">
-                        ${repeat(x => x, html `
-                            <span class="table-cell">${x => x}</span>
-                        `)}
-                    </div>
+            <div class="table-viewport" role="rowgroup">
+                ${repeat(x => x.data, html `
+                    <${DesignSystem.tagFor(TableRow)}
+                        :data="${x => x}"
+                        :columns="${(_, c) => c.parent.columns}"
+                    >
+                    </${DesignSystem.tagFor(TableRow)}>
                 `)}
             </div>
         </div>

package/dist/esm/table/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGvD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAO;;;;kBAIjB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAQ;+CACZ,CAAC,CAAC,EAAE,CAAC,CAAC;iBACpC,CAAC;;;kBAGA,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAU;;0BAE/B,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAQ;uDACE,CAAC,CAAC,EAAE,CAAC,CAAC;yBACpC,CAAC;;iBAET,CAAC;;;;CAIjB,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/table/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAO;;;;;sBAKb,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAQ;uEACQ,CAAC,CAAC,EAAE,CAAC,CAAC;qBACxD,CAAC;;;;kBAIJ,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAa;uBAChC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;iCACnB,CAAC,CAAC,EAAE,CAAC,CAAC;oCACH,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAE,CAAC,CAAC,MAAgB,CAAC,OAAO;;wBAEjD,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC;iBACpC,CAAC;;;;CAIjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "16.0.0",
+  "version": "16.1.1",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
@@ -63,7 +63,7 @@
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.13.15",
-    "@mdx-js/react": "*",
+    "@mdx-js/react": "^1.6.22",
     "@ni/eslint-config-javascript": "^4.0.0",
     "@ni/eslint-config-typescript": "^4.1.0",
     "@rollup/plugin-commonjs": "^21.0.2",