@ni/nimble-components 18.5.6 → 18.5.8

package/dist/all-components-bundle.js

@@ -16872,6 +16872,25 @@
         .withPrefix('nimble')
         .register(nimbleDesignSystemProvider());
 
+    /* eslint-disable @typescript-eslint/naming-convention */
+    const Headline1FallbackFontFamily = 'Noto Serif Fallback';
+    const Headline2FallbackFontFamily = 'Noto Serif Fallback';
+    const Title1FallbackFontFamily = 'Source Sans Pro Fallback';
+    const Title2FallbackFontFamily = 'Source Sans Pro Fallback';
+    const Title3FallbackFontFamily = 'Source Sans Pro Fallback';
+    const Subtitle1FallbackFontFamily = 'Source Sans Pro Fallback';
+    const Subtitle2FallbackFontFamily = 'Source Sans Pro Fallback';
+    const LinkFallbackFontFamily = 'Source Sans Pro Fallback';
+    const PlaceholderFallbackFontFamily = 'Source Sans Pro Fallback';
+    const BodyFallbackFontFamily = 'Source Sans Pro Fallback';
+    const BodyEmphasizedFallbackFontFamily = 'Source Sans Pro Fallback';
+    const GroupLabel1FallbackFontFamily = 'Source Sans Pro Fallback';
+    const ControlLabel1FallbackFontFamily = 'Source Sans Pro Fallback';
+    const ButtonLabel1FallbackFontFamily = 'Source Sans Pro Fallback';
+    const TooltipCaptionFallbackFontFamily = 'Source Sans Pro Fallback';
+    const ErrorLightUiFallbackFontFamily = 'Source Sans Pro Fallback';
+    const GridHeaderFallbackFontFamily = 'Source Sans Pro Fallback';
+    /* eslint-enable @typescript-eslint/naming-convention */
     // Color Tokens
     const actionRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.actionRgbPartialColor)).withDefault((element) => hexToRgbPartial(getColorForTheme(element, Black91, Black15, White)));
     const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
@@ -16914,26 +16933,26 @@
     const elevation2BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation2BoxShadow)).withDefault((element) => `0px 2px 4px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.16)}`);
     const elevation3BoxShadow = DesignToken.create(styleNameFromTokenName(tokenNames.elevation3BoxShadow)).withDefault((element) => `0px 4px 8px ${hexToRgbaCssColor(getColorForTheme(element, Black, Black, Black), 0.3)}`);
     // Font Tokens
-    createFontTokens(tokenNames.headlineFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline1Family, Headline1Weight, Headline1Size, Headline1LineHeight, 'serif');
-    createFontTokens(tokenNames.headlinePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline2Family, Headline2Weight, Headline2Size, Headline2LineHeight, 'serif');
-    createFontTokens(tokenNames.titlePlus2Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title3Family, Title3Weight, Title3Size, Title3LineHeight, 'sans-serif');
-    const [titlePlus1Font, titlePlus1FontColor, titlePlus1DisabledFontColor, titlePlus1FontFamily, titlePlus1FontWeight, titlePlus1FontSize, titlePlus1FontLineHeight, titlePlus1FallbackFontFamily] = createFontTokens(tokenNames.titlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title2Family, Title2Weight, Title2Size, Title2LineHeight, 'sans-serif');
-    createFontTokens(tokenNames.titleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight, 'sans-serif');
-    createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight, 'sans-serif');
-    const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight, subtitleFallbackFontFamily] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight, 'sans-serif');
-    const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight, linkFallbackFontFamily] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, 'sans-serif');
-    const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight, linkActiveFallbackFontFamily] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, 'sans-serif');
-    const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight, linkProminentFallbackFontFamily] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, 'sans-serif');
-    const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight, linkActiveProminentFallbackFontFamily] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, 'sans-serif');
-    const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight, placeholderFallbackFontFamily] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight, 'sans-serif');
-    const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight, bodyEmphasizedFallbackFontFamily] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight, 'sans-serif');
-    const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight, bodyFallbackFontFamily] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight, 'sans-serif');
-    const [groupHeaderFont, groupHeaderFontColor, groupHeaderDisabledFontColor, groupHeaderFontFamily, groupHeaderFontWeight, groupHeaderFontSize, groupHeaderFontLineHeight, groupHeaderFallbackFontFamily] = createFontTokens(tokenNames.groupHeaderFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GroupLabel1Family, GroupLabel1Weight, GroupLabel1Size, GroupLabel1LineHeight, 'sans-serif');
-    const [controlLabelFont, controlLabelFontColor, controlLabelDisabledFontColor, controlLabelFontFamily, controlLabelFontWeight, controlLabelFontSize, controlLabelFontLineHeight, controlLabelFallbackFontFamily] = createFontTokens(tokenNames.controlLabelFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ControlLabel1Family, ControlLabel1Weight, ControlLabel1Size, ControlLabel1LineHeight, 'sans-serif');
-    const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, buttonLabelFontFamily, buttonLabelFontWeight, buttonLabelFontSize, buttonLabelFontLineHeight, buttonLabelFallbackFontFamily] = createFontTokens(tokenNames.buttonLabelFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ButtonLabel1Family, ButtonLabel1Weight, ButtonLabel1Size, ButtonLabel1LineHeight, 'sans-serif');
-    const [tooltipCaptionFont, tooltipCaptionFontColor, tooltipCaptionDisabledFontColor, tooltipCaptionFontFamily, tooltipCaptionFontWeight, tooltipCaptionFontSize, tooltipCaptionFontLineHeight, tooltipCaptionFallbackFontFamily] = createFontTokens(tokenNames.tooltipCaptionFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), TooltipCaptionFamily, TooltipCaptionWeight, TooltipCaptionSize, TooltipCaptionLineHeight, 'sans-serif');
-    const [errorTextFont, errorTextFontColor, errorTextDisabledFontColor, errorTextFontFamily, errorTextFontWeight, errorTextFontSize, errorTextFontLineHeight, errorTextFallbackFontFamily] = createFontTokens(tokenNames.errorTextFont, (element) => getFailColorForTheme(element), (element) => hexToRgbaCssColor(getFailColorForTheme(element), 0.3), ErrorLightUiFamily, ErrorLightUiWeight, ErrorLightUiSize, TooltipCaptionLineHeight, 'sans-serif');
-    const [tableHeaderFont, tableHeaderFontColor, tableHeaderDisabledFontColor, tableHeaderFontFamily, tableHeaderFontWeight, tableHeaderFontSize, tableHeaderFontLineHeight, tableHeaderFallbackFontFamily] = createFontTokens(tokenNames.tableHeaderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GridHeaderFamily, GridHeaderWeight, GridHeaderSize, TooltipCaptionLineHeight, 'sans-serif');
+    createFontTokens(tokenNames.headlineFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline1Family, Headline1Weight, Headline1Size, Headline1LineHeight, Headline1FallbackFontFamily);
+    createFontTokens(tokenNames.headlinePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Headline2Family, Headline2Weight, Headline2Size, Headline2LineHeight, Headline2FallbackFontFamily);
+    createFontTokens(tokenNames.titlePlus2Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title3Family, Title3Weight, Title3Size, Title3LineHeight, Title3FallbackFontFamily);
+    const [titlePlus1Font, titlePlus1FontColor, titlePlus1DisabledFontColor, titlePlus1FontFamily, titlePlus1FontWeight, titlePlus1FontSize, titlePlus1FontLineHeight, titlePlus1FallbackFontFamily] = createFontTokens(tokenNames.titlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title2Family, Title2Weight, Title2Size, Title2LineHeight, Title2FallbackFontFamily);
+    createFontTokens(tokenNames.titleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Title1Family, Title1Weight, Title1Size, Title1LineHeight, Title1FallbackFontFamily);
+    createFontTokens(tokenNames.subtitlePlus1Font, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle2Family, Subtitle2Weight, Subtitle2Size, Subtitle2LineHeight, Subtitle2FallbackFontFamily);
+    const [subtitleFont, subtitleFontColor, subtitleDisabledFontColor, subtitleFontFamily, subtitleFontWeight, subtitleFontSize, subtitleFontLineHeight, subtitleFallbackFontFamily] = createFontTokens(tokenNames.subtitleFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), Subtitle1Family, Subtitle1Weight, Subtitle1Size, Subtitle1LineHeight, Subtitle1FallbackFontFamily);
+    const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight, linkFallbackFontFamily] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
+    const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight, linkActiveFallbackFontFamily] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
+    const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight, linkProminentFallbackFontFamily] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
+    const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight, linkActiveProminentFallbackFontFamily] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
+    const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight, placeholderFallbackFontFamily] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight, PlaceholderFallbackFontFamily);
+    const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight, bodyEmphasizedFallbackFontFamily] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight, BodyEmphasizedFallbackFontFamily);
+    const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight, bodyFallbackFontFamily] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight, BodyFallbackFontFamily);
+    const [groupHeaderFont, groupHeaderFontColor, groupHeaderDisabledFontColor, groupHeaderFontFamily, groupHeaderFontWeight, groupHeaderFontSize, groupHeaderFontLineHeight, groupHeaderFallbackFontFamily] = createFontTokens(tokenNames.groupHeaderFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GroupLabel1Family, GroupLabel1Weight, GroupLabel1Size, GroupLabel1LineHeight, GroupLabel1FallbackFontFamily);
+    const [controlLabelFont, controlLabelFontColor, controlLabelDisabledFontColor, controlLabelFontFamily, controlLabelFontWeight, controlLabelFontSize, controlLabelFontLineHeight, controlLabelFallbackFontFamily] = createFontTokens(tokenNames.controlLabelFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ControlLabel1Family, ControlLabel1Weight, ControlLabel1Size, ControlLabel1LineHeight, ControlLabel1FallbackFontFamily);
+    const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor, buttonLabelFontFamily, buttonLabelFontWeight, buttonLabelFontSize, buttonLabelFontLineHeight, buttonLabelFallbackFontFamily] = createFontTokens(tokenNames.buttonLabelFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), ButtonLabel1Family, ButtonLabel1Weight, ButtonLabel1Size, ButtonLabel1LineHeight, ButtonLabel1FallbackFontFamily);
+    const [tooltipCaptionFont, tooltipCaptionFontColor, tooltipCaptionDisabledFontColor, tooltipCaptionFontFamily, tooltipCaptionFontWeight, tooltipCaptionFontSize, tooltipCaptionFontLineHeight, tooltipCaptionFallbackFontFamily] = createFontTokens(tokenNames.tooltipCaptionFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), TooltipCaptionFamily, TooltipCaptionWeight, TooltipCaptionSize, TooltipCaptionLineHeight, TooltipCaptionFallbackFontFamily);
+    const [errorTextFont, errorTextFontColor, errorTextDisabledFontColor, errorTextFontFamily, errorTextFontWeight, errorTextFontSize, errorTextFontLineHeight, errorTextFallbackFontFamily] = createFontTokens(tokenNames.errorTextFont, (element) => getFailColorForTheme(element), (element) => hexToRgbaCssColor(getFailColorForTheme(element), 0.3), ErrorLightUiFamily, ErrorLightUiWeight, ErrorLightUiSize, TooltipCaptionLineHeight, ErrorLightUiFallbackFontFamily);
+    const [tableHeaderFont, tableHeaderFontColor, tableHeaderDisabledFontColor, tableHeaderFontFamily, tableHeaderFontWeight, tableHeaderFontSize, tableHeaderFontLineHeight, tableHeaderFallbackFontFamily] = createFontTokens(tokenNames.tableHeaderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), GridHeaderFamily, GridHeaderWeight, GridHeaderSize, TooltipCaptionLineHeight, GridHeaderFallbackFontFamily);
     // Font Transform Tokens
     const groupHeaderTextTransform = DesignToken.create(styleNameFromTokenName(tokenNames.groupHeaderTextTransform)).withDefault('uppercase');
     // Animation Tokens
@@ -26867,13 +26886,123 @@
       });
     }
 
+    function getSortedRowModel() {
+      return table => memo$1(() => [table.getState().sorting, table.getPreSortedRowModel()], (sorting, rowModel) => {
+        if (!rowModel.rows.length || !(sorting != null && sorting.length)) {
+          return rowModel;
+        }
+        const sortingState = table.getState().sorting;
+        const sortedFlatRows = [];
+
+        // Filter out sortings that correspond to non existing columns
+        const availableSorting = sortingState.filter(sort => {
+          var _table$getColumn;
+          return (_table$getColumn = table.getColumn(sort.id)) == null ? void 0 : _table$getColumn.getCanSort();
+        });
+        const columnInfoById = {};
+        availableSorting.forEach(sortEntry => {
+          const column = table.getColumn(sortEntry.id);
+          if (!column) return;
+          columnInfoById[sortEntry.id] = {
+            sortUndefined: column.columnDef.sortUndefined,
+            invertSorting: column.columnDef.invertSorting,
+            sortingFn: column.getSortingFn()
+          };
+        });
+        const sortData = rows => {
+          // This will also perform a stable sorting using the row index
+          // if needed.
+          const sortedData = [...rows];
+          sortedData.sort((rowA, rowB) => {
+            for (let i = 0; i < availableSorting.length; i += 1) {
+              var _sortEntry$desc;
+              const sortEntry = availableSorting[i];
+              const columnInfo = columnInfoById[sortEntry.id];
+              const isDesc = (_sortEntry$desc = sortEntry == null ? void 0 : sortEntry.desc) != null ? _sortEntry$desc : false;
+              if (columnInfo.sortUndefined) {
+                const aValue = rowA.getValue(sortEntry.id);
+                const bValue = rowB.getValue(sortEntry.id);
+                const aUndefined = typeof aValue === 'undefined';
+                const bUndefined = typeof bValue === 'undefined';
+                if (aUndefined || bUndefined) {
+                  return aUndefined && bUndefined ? 0 : aUndefined ? columnInfo.sortUndefined : -columnInfo.sortUndefined;
+                }
+              }
+
+              // This function should always return in ascending order
+              let sortInt = columnInfo.sortingFn(rowA, rowB, sortEntry.id);
+              if (sortInt !== 0) {
+                if (isDesc) {
+                  sortInt *= -1;
+                }
+                if (columnInfo.invertSorting) {
+                  sortInt *= -1;
+                }
+                return sortInt;
+              }
+            }
+            return rowA.index - rowB.index;
+          });
+
+          // If there are sub-rows, sort them
+          sortedData.forEach(row => {
+            var _row$subRows;
+            sortedFlatRows.push(row);
+            if ((_row$subRows = row.subRows) != null && _row$subRows.length) {
+              row.subRows = sortData(row.subRows);
+            }
+          });
+          return sortedData;
+        };
+        return {
+          rows: sortData(rowModel.rows),
+          flatRows: sortedFlatRows,
+          rowsById: rowModel.rowsById
+        };
+      }, {
+        key: 'getSortedRowModel',
+        debug: () => {
+          var _table$options$debugA;
+          return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugTable;
+        },
+        onChange: () => {
+          table._autoResetPageIndex();
+        }
+      });
+    }
+
+    /**
+     * The possible directions a table column can be sorted in.
+     */
+    const TableColumnSortDirection = {
+        none: undefined,
+        ascending: 'ascending',
+        descending: 'descending'
+    };
+
+    /**
+     * The possible operations to use when sorting a table column.
+     */
+    const TableColumnSortOperation = {
+        /**
+         * Performs a sort using `===`, `<`, and `>` operators
+         */
+        basic: 'basic',
+        /**
+         * Performs a locale-aware case-sensitive string sort on the columns.
+         * Only use this sort operation if the field is of type `string | undefined | null`.
+         */
+        localeAwareCaseSensitive: 'localeAwareCaseSensitive'
+    };
+
     /**
      * The base class for table columns
      */
     class TableColumn extends FoundationElement {
         constructor() {
-            super(...arguments);
+            super();
             this.columnHidden = false;
+            this.sortDirection = TableColumnSortDirection.none;
             /**
              * @internal
              *
@@ -26881,13 +27010,20 @@
              * This array is parallel with the field names specified by `cellRecordFieldNames`.
              */
             this.dataRecordFieldNames = [];
+            /**
+             * @internal
+             *
+             * The operation to use when sorting the table by this column.
+             */
+            this.sortOperation = TableColumnSortOperation.basic;
+            this.internalUniqueId = uniqueId('table-column-slot');
         }
         /**
          * @internal
          */
         connectedCallback() {
             super.connectedCallback();
-            this.setAttribute('slot', uniqueId('table-column-slot'));
+            this.setAttribute('slot', this.internalUniqueId);
         }
     }
     __decorate$1([
@@ -26902,12 +27038,24 @@
     __decorate$1([
         attr({ attribute: 'column-hidden', mode: 'boolean' })
     ], TableColumn.prototype, "columnHidden", void 0);
+    __decorate$1([
+        attr({ attribute: 'sort-index', converter: nullableNumberConverter })
+    ], TableColumn.prototype, "sortIndex", void 0);
+    __decorate$1([
+        attr({ attribute: 'sort-direction' })
+    ], TableColumn.prototype, "sortDirection", void 0);
     __decorate$1([
         observable
     ], TableColumn.prototype, "dataRecordFieldNames", void 0);
     __decorate$1([
         observable
     ], TableColumn.prototype, "columnConfig", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "operandDataRecordFieldName", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "sortOperation", void 0);
 
     /**
      * Helper class for the nimble-table to validate that the table's configuration
@@ -26920,6 +27068,7 @@
             this.invalidRecordId = false;
             this.duplicateColumnId = false;
             this.missingColumnId = false;
+            this.duplicateSortIndex = false;
         }
         getValidity() {
             return {
@@ -26927,7 +27076,8 @@
                 missingRecordId: this.missingRecordId,
                 invalidRecordId: this.invalidRecordId,
                 duplicateColumnId: this.duplicateColumnId,
-                missingColumnId: this.missingColumnId
+                missingColumnId: this.missingColumnId,
+                duplicateSortIndex: this.duplicateSortIndex
             };
         }
         isValid() {
@@ -26981,6 +27131,17 @@
             }
             return !this.missingColumnId && !this.duplicateColumnId;
         }
+        validateColumnSortIndices(sortIndices) {
+            this.duplicateSortIndex = false;
+            const sortIndexSet = new Set();
+            for (const sortIndex of sortIndices) {
+                if (sortIndexSet.has(sortIndex)) {
+                    this.duplicateSortIndex = true;
+                }
+                sortIndexSet.add(sortIndex);
+            }
+            return !this.duplicateSortIndex;
+        }
     }
 
     const styles$d = css `
@@ -27081,12 +27242,26 @@
         ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};
         text-transform: uppercase;
     }
+
+    .sort-indicator {
+        padding: 0px calc(${standardPadding} / 2);
+        width: ${standardPadding};
+    }
 `;
 
     // prettier-ignore
     const template$7 = html `
-    <template role="columnheader">
+    <template role="columnheader" aria-sort="${x => x.ariaSort}">
         <slot></slot>
+
+        <span class="sort-indicator" aria-hidden="true">
+            ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
+                <${DesignSystem.tagFor(IconArrowUp)}></${DesignSystem.tagFor(IconArrowUp)}>
+            `)}
+            ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
+                <${DesignSystem.tagFor(IconArrowDown)}></${DesignSystem.tagFor(IconArrowDown)}>
+            `)}
+        </span>
     </template>
 `;
 
@@ -27095,7 +27270,36 @@
      * @internal
      */
     class TableHeader extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            this.sortDirection = TableColumnSortDirection.none;
+            this.firstSortedColumn = false;
+        }
+        sortDirectionChanged(_prev, _next) {
+            this.updateAriaSort();
+        }
+        firstSortedColumnChanged(_prev, _next) {
+            this.updateAriaSort();
+        }
+        updateAriaSort() {
+            if (!this.firstSortedColumn
+                || this.sortDirection === TableColumnSortDirection.none) {
+                this.ariaSort = null;
+            }
+            else if (this.sortDirection === TableColumnSortDirection.ascending) {
+                this.ariaSort = 'ascending';
+            }
+            else {
+                this.ariaSort = 'descending';
+            }
+        }
     }
+    __decorate$1([
+        attr({ attribute: 'sort-direction' })
+    ], TableHeader.prototype, "sortDirection", void 0);
+    __decorate$1([
+        attr({ attribute: 'first-sorted-column', mode: 'boolean' })
+    ], TableHeader.prototype, "firstSortedColumn", void 0);
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
         template: template$7,
@@ -27355,7 +27559,11 @@
                 <div class="header-row" role="row">
                     ${repeat(x => x.columns, html `
                         ${when(x => !x.columnHidden, html `
-                            <${DesignSystem.tagFor(TableHeader)} class="header">
+                            <${DesignSystem.tagFor(TableHeader)}
+                                class="header"
+                                sort-direction="${x => (typeof x.sortIndex === 'number' ? x.sortDirection : TableColumnSortDirection.none)}"
+                                ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+                            >
                                 <slot name="${x => x.slot}"></slot>
                             </${DesignSystem.tagFor(TableHeader)}>
                         `)}
@@ -28111,6 +28319,40 @@
         observable
     ], Virtualizer.prototype, "rowContainerYOffset", void 0);
 
+    /**
+     * Returns the sorting function for TanStack to use based on the specified
+     * TableColumnSortOperation
+     */
+    function getTanStackSortingFunction(sortOperation) {
+        switch (sortOperation) {
+            case TableColumnSortOperation.basic:
+                return sortingFns.basic;
+            case TableColumnSortOperation.localeAwareCaseSensitive:
+                return localeAwareCaseSensitiveSortFunction;
+            default:
+                return sortingFns.basic;
+        }
+    }
+    /**
+     * A function to perform locale-aware and case-senstitive sorting of two rows from
+     * TanStack for a given column. The function sorts `undefined` followed by `null`
+     * before all defined strings.
+     */
+    function localeAwareCaseSensitiveSortFunction(rowA, rowB, columnId) {
+        const valueA = rowA.getValue(columnId);
+        const valueB = rowB.getValue(columnId);
+        if (typeof valueA === 'string' && typeof valueB === 'string') {
+            return valueA.localeCompare(valueB);
+        }
+        if (valueA === valueB) {
+            return 0;
+        }
+        if (valueA === undefined || (valueA === null && valueB !== undefined)) {
+            return -1;
+        }
+        return 1;
+    }
+
     /**
      * A nimble-styled table.
      */
@@ -28139,25 +28381,14 @@
             this.canRenderRows = true;
             this.tableValidator = new TableValidator();
             this.columnNotifiers = [];
-            this.update = (state) => {
-                this.table.setOptions(prev => ({
-                    ...prev,
-                    ...this.options,
-                    state,
-                    onStateChange: (updater) => {
-                        const updatedState = typeof updater === 'function'
-                            ? updater(state)
-                            : updater;
-                        this.update(updatedState);
-                    }
-                }));
-            };
             this.options = {
                 data: [],
                 onStateChange: (_) => { },
                 getCoreRowModel: getCoreRowModel(),
+                getSortedRowModel: getSortedRowModel(),
                 columns: [],
                 state: {},
+                enableSorting: true,
                 renderFallbackValue: null,
                 autoResetAll: false
             };
@@ -28168,7 +28399,6 @@
             return this.tableValidator.getValidity();
         }
         setData(newData) {
-            this.generateTanStackColumns(newData);
             this.setTableData(newData);
         }
         connectedCallback() {
@@ -28196,6 +28426,14 @@
                 if (args === 'columnId') {
                     this.validateColumnIds();
                 }
+                else if (args === 'operandDataRecordFieldName'
+                    || args === 'sortOperation') {
+                    this.generateTanStackColumns();
+                }
+                else if (args === 'sortIndex' || args === 'sortDirection') {
+                    this.validateColumnSortIndices();
+                    this.setSortState();
+                }
             }
         }
         onRowActionMenuBeforeToggle(event) {
@@ -28218,6 +28456,8 @@
                 return;
             }
             this.validateAndObserveColumns();
+            this.generateTanStackColumns();
+            this.setSortState();
             const slots = new Set();
             for (const column of this.columns) {
                 if (column.actionMenuSlot) {
@@ -28240,11 +28480,20 @@
                 this.columnNotifiers.push(notifier);
             }
             this.validateColumnIds();
+            this.validateColumnSortIndices();
         }
         validateColumnIds() {
             this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
             this.canRenderRows = this.checkValidity();
         }
+        validateColumnSortIndices() {
+            this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.sortIndex));
+            this.canRenderRows = this.checkValidity();
+        }
+        getColumnsParticipatingInSorting() {
+            return this.columns.filter(x => x.sortDirection !== TableColumnSortDirection.none
+                && typeof x.sortIndex === 'number');
+        }
         async updateColumnsFromChildItems() {
             const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
                 ? customElements.whenDefined(item.localName)
@@ -28278,27 +28527,47 @@
             this.virtualizer.dataChanged();
         }
         updateTableOptions(updatedOptions) {
-            this.options = { ...this.options, ...updatedOptions };
-            this.update(this.table.initialState);
+            this.options = {
+                ...this.options,
+                ...updatedOptions,
+                state: { ...this.options.state, ...updatedOptions.state }
+            };
+            this.table.setOptions(this.options);
             this.refreshRows();
         }
-        // Generate columns for TanStack that correspond to all the keys in TData because all operations,
-        // such as grouping and sorting, will be performed on the data's records, not the values rendered within a cell.
-        generateTanStackColumns(data) {
-            if (data.length === 0) {
-                return;
-            }
-            const firstItem = data[0];
-            const keys = Object.keys(firstItem);
-            const generatedColumns = keys.map(key => {
+        setSortState() {
+            const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.sortIndex - y.sortIndex);
+            this.firstSortedColumn = sortedColumns.length
+                ? sortedColumns[0]
+                : undefined;
+            const tanStackSortingState = sortedColumns.map(column => {
+                return {
+                    id: column.internalUniqueId,
+                    desc: column.sortDirection
+                        === TableColumnSortDirection.descending
+                };
+            });
+            this.updateTableOptions({
+                state: {
+                    sorting: tanStackSortingState
+                }
+            });
+        }
+        generateTanStackColumns() {
+            const generatedColumns = this.columns.map(column => {
                 const columnDef = {
-                    id: key,
-                    accessorKey: key,
-                    header: key
+                    id: column.internalUniqueId,
+                    accessorKey: column.operandDataRecordFieldName,
+                    sortingFn: getTanStackSortingFunction(column.sortOperation)
                 };
                 return columnDef;
             });
-            this.updateTableOptions({ columns: generatedColumns });
+            this.updateTableOptions({
+                // Force TanStack to detect a data update because a columns's accessor is
+                // referenced when creating a new row model.
+                data: [...this.table.options.data],
+                columns: generatedColumns
+            });
         }
     }
     __decorate$1([
@@ -28322,6 +28591,9 @@
     __decorate$1([
         observable
     ], Table.prototype, "canRenderRows", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "firstSortedColumn", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
         template: template$4,
@@ -28370,13 +28642,15 @@
      */
     class TableColumnText extends TableColumn {
         constructor() {
-            super(...arguments);
+            super();
             this.cellRecordFieldNames = ['value'];
             this.cellStyles = cellStyles;
             this.cellTemplate = cellTemplate;
+            this.sortOperation = TableColumnSortOperation.localeAwareCaseSensitive;
         }
         fieldNameChanged() {
             this.dataRecordFieldNames = [this.fieldName];
+            this.operandDataRecordFieldName = this.fieldName;
         }
         placeholderChanged() {
             this.columnConfig = { placeholder: this.placeholder ?? '' };