@ni/nimble-components 16.0.0 → 16.1.1

package/dist/all-components-bundle.js

@@ -15700,9 +15700,9 @@
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-    const template$c = html `<slot></slot>`;
+    const template$f = html `<slot></slot>`;
 
-    const styles$B = css `
+    const styles$E = css `
     :host {
         display: contents;
     }
@@ -15758,8 +15758,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$B,
-        template: template$c
+        styles: styles$E,
+        template: template$f
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -15913,7 +15913,7 @@
         }
     }
 
-    const styles$A = css `
+    const styles$D = css `
     ${display('inline')}
 
     :host {
@@ -15996,7 +15996,7 @@
 `;
 
     // prettier-ignore
-    const template$b = (context, definition) => html `
+    const template$e = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -16069,8 +16069,8 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$b,
-        styles: styles$A,
+        template: template$e,
+        styles: styles$D,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -16155,7 +16155,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$z = css `
+    const styles$C = css `
     ${display('inline-flex')}
 
     :host {
@@ -16436,8 +16436,8 @@
             }
         `));
 
-    const styles$y = css `
-    ${styles$z}
+    const styles$B = css `
+    ${styles$C}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -16445,7 +16445,7 @@
     }
 `;
 
-    const template$a = (context, definition) => html `
+    const template$d = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -16527,15 +16527,15 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$a,
-        styles: styles$y,
+        template: template$d,
+        styles: styles$B,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
 
-    const styles$x = css `
+    const styles$A = css `
     :host {
         contain: layout;
         display: block;
@@ -16559,13 +16559,13 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$x
+        styles: styles$A
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleAnchoredRegion());
 
-    const styles$w = css `
+    const styles$z = css `
     ${display('inline-block')}
 
     :host {
@@ -16606,7 +16606,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$w
+        styles: styles$z
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -17212,7 +17212,7 @@
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026L4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363zm1.155-10.68l-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312z"/></svg>`
     };
 
-    const styles$v = css `
+    const styles$y = css `
     ${display('inline-flex')}
 
     :host {
@@ -17291,15 +17291,15 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$v,
+        styles: styles$y,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleBreadcrumbItem());
 
-    const styles$u = css `
-    ${styles$z}
+    const styles$x = css `
+    ${styles$C}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -17345,7 +17345,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$u,
+        styles: styles$x,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17425,7 +17425,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$t = css `
+    const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -17584,14 +17584,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$t,
+        styles: styles$w,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$s = css `
+    const styles$v = css `
     ${display('inline-flex')}
 
     :host {
@@ -17709,14 +17709,14 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$s,
+        styles: styles$v,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
-    const styles$r = css `
-    ${styles$z}
+    const styles$u = css `
+    ${styles$C}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -17742,7 +17742,7 @@
     }
 `;
 
-    const template$9 = (context, definition) => html `
+    const template$c = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -17817,8 +17817,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$9,
-        styles: styles$r,
+        template: template$c,
+        styles: styles$u,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17831,13 +17831,13 @@
     </div>
 `;
 
-    const template$8 = html `
+    const template$b = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$q = css `
+    const styles$t = css `
     ${display('inline-flex')}
 
     :host {
@@ -17890,8 +17890,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$8,
-            styles: styles$q,
+            template: template$b,
+            styles: styles$t,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -17925,7 +17925,7 @@
         block: 'block'
     };
 
-    const styles$p = css `
+    const styles$s = css `
     ${display('inline-flex')}
 
     :host {
@@ -18153,7 +18153,7 @@
             }
         `));
 
-    const styles$o = css `
+    const styles$r = css `
     .error-icon {
         display: none;
     }
@@ -18191,9 +18191,9 @@
     }
 `;
 
-    const styles$n = css `
-    ${styles$p}
-    ${styles$o}
+    const styles$q = css `
+    ${styles$s}
+    ${styles$r}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -18429,7 +18429,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$n,
+        styles: styles$q,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -18473,7 +18473,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$m = css `
+    const styles$p = css `
     ${display('grid')}
 
     dialog {
@@ -18589,7 +18589,7 @@
             }
         `));
 
-    const template$7 = html `
+    const template$a = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -18715,13 +18715,13 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$7,
-        styles: styles$m,
+        template: template$a,
+        styles: styles$p,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-    const styles$l = css `
+    const styles$o = css `
     ${display('block')}
 
     :host {
@@ -18876,7 +18876,7 @@
             }
         `));
 
-    const template$6 = html `
+    const template$9 = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -18990,8 +18990,8 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$6,
-        styles: styles$l
+        template: template$9,
+        styles: styles$o
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -20623,7 +20623,7 @@
     }
     registerIcon('icon-xmark-check', IconXmarkCheck);
 
-    const styles$k = css `
+    const styles$n = css `
     ${display('flex')}
 
     :host {
@@ -20703,11 +20703,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$k
+        styles: styles$n
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$j = css `
+    const styles$m = css `
     ${display('grid')}
 
     :host {
@@ -20762,11 +20762,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$j
+        styles: styles$m
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$i = css `
+    const styles$l = css `
     ${display('inline-block')}
 
     :host {
@@ -20785,7 +20785,7 @@
 `;
 
     // prettier-ignore
-    const template$5 = html `
+    const template$8 = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -20993,15 +20993,15 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$5,
-        styles: styles$i,
+        template: template$8,
+        styles: styles$l,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
 
-    const styles$h = css `
+    const styles$k = css `
     ${display('grid')}
 
     :host {
@@ -21099,7 +21099,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$h,
+        styles: styles$k,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -21113,9 +21113,9 @@
         block: 'block'
     };
 
-    const styles$g = css `
+    const styles$j = css `
     ${display('inline-block')}
-    ${styles$o}
+    ${styles$r}
 
     :host {
         font: ${bodyFont};
@@ -21329,7 +21329,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$g,
+        styles: styles$j,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -21370,7 +21370,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    const styles$f = css `
+    const styles$i = css `
     ${display('inline-flex')}
 
     :host {
@@ -21470,12 +21470,12 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$f,
+        styles: styles$i,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-    const styles$e = css `
+    const styles$h = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -21510,16 +21510,16 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$e,
+        styles: styles$h,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
 
-    const styles$d = css `
-    ${styles$p}
-    ${styles$o}
+    const styles$g = css `
+    ${styles$s}
+    ${styles$r}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -21595,7 +21595,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$d,
+        styles: styles$g,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${DesignSystem.tagFor(IconExclamationMark)}
@@ -21607,7 +21607,173 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-    const styles$c = css `
+    const styles$f = 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};
+            }
+        `));
+
+    const template$7 = html `
+    <template role="progressbar">
+        <div class="container">
+            <div class="bit1"></div>
+            <div class="bit2"></div>
+        </div>
+    </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.
+     */
+    class Spinner extends FoundationElement {
+    }
+    const nimbleSpinner = Spinner.compose({
+        baseName: 'spinner',
+        template: template$7,
+        styles: styles$f
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
+
+    const styles$e = css `
     ${display('inline-flex')}
 
     :host {
@@ -21770,7 +21936,7 @@
         `));
 
     // prettier-ignore
-    const template$4 = html `
+    const template$6 = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -21814,12 +21980,12 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$4,
-        styles: styles$c
+        template: template$6,
+        styles: styles$e
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-    const styles$b = css `
+    const styles$d = css `
     ${display('inline-flex')}
 
     :host {
@@ -21923,11 +22089,11 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$b
+        styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-    const styles$a = css `
+    const styles$c = css `
     ${display('block')}
 
     :host {
@@ -21947,7 +22113,7 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$a
+        styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -24899,7 +25065,7 @@
       });
     }
 
-    const styles$9 = css `
+    const styles$b = css `
     ${display('flex')}
 
     .table-container {
@@ -24914,32 +25080,105 @@
         flex-direction: row;
     }
 
-    .table-row {
-        display: flex;
-        flex-direction: row;
+    .table-cell {
+        flex: 1;
     }
+`;
 
-    .table-cell {
+    const styles$a = css `
+    ${display('flex')}
+
+    .cell {
         flex: 1;
     }
 `;
 
+    const styles$9 = css `
+    ${display('flex')}
+`;
+
+    // prettier-ignore
+    const template$5 = html `
+    <template role="cell">
+        ${x => x.data}
+    </template>
+`;
+
+    /**
+     * A styled cell that is used within the nimble-table-row.
+     * @internal
+     */
+    class TableCell extends FoundationElement {
+    }
+    __decorate$1([
+        observable
+    ], TableCell.prototype, "data", void 0);
+    const nimbleTableCell = TableCell.compose({
+        baseName: 'table-cell',
+        template: template$5,
+        styles: styles$9
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
+
+    // prettier-ignore
+    const template$4 = 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>
+`;
+
+    /**
+     * A styled row that is used within the nimble-table.
+     * @internal
+     */
+    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$1([
+        observable
+    ], TableRow.prototype, "data", void 0);
+    __decorate$1([
+        observable
+    ], TableRow.prototype, "columns", void 0);
+    const nimbleTableRow = TableRow.compose({
+        baseName: 'table-row',
+        template: template$4,
+        styles: styles$a
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
+
     // prettier-ignore
     const template$3 = 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>
@@ -24953,8 +25192,9 @@
         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;
@@ -24990,25 +25230,8 @@
             // 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);
@@ -25031,6 +25254,7 @@
             });
             this.updateTableOptions({ columns: generatedColumns });
             this.columnHeaders = generatedColumns.map(x => x.header);
+            this.columns = this.columnHeaders;
         }
     }
     __decorate$1([
@@ -25038,14 +25262,14 @@
     ], Table.prototype, "data", void 0);
     __decorate$1([
         observable
-    ], Table.prototype, "tableData", void 0);
+    ], Table.prototype, "columns", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "columnHeaders", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
         template: template$3,
-        styles: styles$9
+        styles: styles$b
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
@@ -25289,7 +25513,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$o}
+    ${styles$r}
 
     :host {
         font: ${bodyFont};