@ni/nimble-components 15.5.0 → 15.5.2

package/dist/all-components-bundle.js

@@ -2597,6 +2597,506 @@
         }
     }
 
+    /** @internal */
+    function newSplice(index, removed, addedCount) {
+        return {
+            index: index,
+            removed: removed,
+            addedCount: addedCount,
+        };
+    }
+    const EDIT_LEAVE = 0;
+    const EDIT_UPDATE = 1;
+    const EDIT_ADD = 2;
+    const EDIT_DELETE = 3;
+    // Note: This function is *based* on the computation of the Levenshtein
+    // "edit" distance. The one change is that "updates" are treated as two
+    // edits - not one. With Array splices, an update is really a delete
+    // followed by an add. By retaining this, we optimize for "keeping" the
+    // maximum array items in the original array. For example:
+    //
+    //   'xxxx123' -> '123yyyy'
+    //
+    // With 1-edit updates, the shortest path would be just to update all seven
+    // characters. With 2-edit updates, we delete 4, leave 3, and add 4. This
+    // leaves the substring '123' intact.
+    function calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+        // "Deletion" columns
+        const rowCount = oldEnd - oldStart + 1;
+        const columnCount = currentEnd - currentStart + 1;
+        const distances = new Array(rowCount);
+        let north;
+        let west;
+        // "Addition" rows. Initialize null column.
+        for (let i = 0; i < rowCount; ++i) {
+            distances[i] = new Array(columnCount);
+            distances[i][0] = i;
+        }
+        // Initialize null row
+        for (let j = 0; j < columnCount; ++j) {
+            distances[0][j] = j;
+        }
+        for (let i = 1; i < rowCount; ++i) {
+            for (let j = 1; j < columnCount; ++j) {
+                if (current[currentStart + j - 1] === old[oldStart + i - 1]) {
+                    distances[i][j] = distances[i - 1][j - 1];
+                }
+                else {
+                    north = distances[i - 1][j] + 1;
+                    west = distances[i][j - 1] + 1;
+                    distances[i][j] = north < west ? north : west;
+                }
+            }
+        }
+        return distances;
+    }
+    // This starts at the final weight, and walks "backward" by finding
+    // the minimum previous weight recursively until the origin of the weight
+    // matrix.
+    function spliceOperationsFromEditDistances(distances) {
+        let i = distances.length - 1;
+        let j = distances[0].length - 1;
+        let current = distances[i][j];
+        const edits = [];
+        while (i > 0 || j > 0) {
+            if (i === 0) {
+                edits.push(EDIT_ADD);
+                j--;
+                continue;
+            }
+            if (j === 0) {
+                edits.push(EDIT_DELETE);
+                i--;
+                continue;
+            }
+            const northWest = distances[i - 1][j - 1];
+            const west = distances[i - 1][j];
+            const north = distances[i][j - 1];
+            let min;
+            if (west < north) {
+                min = west < northWest ? west : northWest;
+            }
+            else {
+                min = north < northWest ? north : northWest;
+            }
+            if (min === northWest) {
+                if (northWest === current) {
+                    edits.push(EDIT_LEAVE);
+                }
+                else {
+                    edits.push(EDIT_UPDATE);
+                    current = northWest;
+                }
+                i--;
+                j--;
+            }
+            else if (min === west) {
+                edits.push(EDIT_DELETE);
+                i--;
+                current = west;
+            }
+            else {
+                edits.push(EDIT_ADD);
+                j--;
+                current = north;
+            }
+        }
+        edits.reverse();
+        return edits;
+    }
+    function sharedPrefix(current, old, searchLength) {
+        for (let i = 0; i < searchLength; ++i) {
+            if (current[i] !== old[i]) {
+                return i;
+            }
+        }
+        return searchLength;
+    }
+    function sharedSuffix(current, old, searchLength) {
+        let index1 = current.length;
+        let index2 = old.length;
+        let count = 0;
+        while (count < searchLength && current[--index1] === old[--index2]) {
+            count++;
+        }
+        return count;
+    }
+    function intersect(start1, end1, start2, end2) {
+        // Disjoint
+        if (end1 < start2 || end2 < start1) {
+            return -1;
+        }
+        // Adjacent
+        if (end1 === start2 || end2 === start1) {
+            return 0;
+        }
+        // Non-zero intersect, span1 first
+        if (start1 < start2) {
+            if (end1 < end2) {
+                return end1 - start2; // Overlap
+            }
+            return end2 - start2; // Contained
+        }
+        // Non-zero intersect, span2 first
+        if (end2 < end1) {
+            return end2 - start1; // Overlap
+        }
+        return end1 - start1; // Contained
+    }
+    /**
+     * Splice Projection functions:
+     *
+     * A splice map is a representation of how a previous array of items
+     * was transformed into a new array of items. Conceptually it is a list of
+     * tuples of
+     *
+     *   <index, removed, addedCount>
+     *
+     * which are kept in ascending index order of. The tuple represents that at
+     * the |index|, |removed| sequence of items were removed, and counting forward
+     * from |index|, |addedCount| items were added.
+     */
+    /**
+     * @internal
+     * @remarks
+     * Lacking individual splice mutation information, the minimal set of
+     * splices can be synthesized given the previous state and final state of an
+     * array. The basic approach is to calculate the edit distance matrix and
+     * choose the shortest path through it.
+     *
+     * Complexity: O(l * p)
+     *   l: The length of the current array
+     *   p: The length of the old array
+     */
+    function calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+        let prefixCount = 0;
+        let suffixCount = 0;
+        const minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);
+        if (currentStart === 0 && oldStart === 0) {
+            prefixCount = sharedPrefix(current, old, minLength);
+        }
+        if (currentEnd === current.length && oldEnd === old.length) {
+            suffixCount = sharedSuffix(current, old, minLength - prefixCount);
+        }
+        currentStart += prefixCount;
+        oldStart += prefixCount;
+        currentEnd -= suffixCount;
+        oldEnd -= suffixCount;
+        if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {
+            return emptyArray;
+        }
+        if (currentStart === currentEnd) {
+            const splice = newSplice(currentStart, [], 0);
+            while (oldStart < oldEnd) {
+                splice.removed.push(old[oldStart++]);
+            }
+            return [splice];
+        }
+        else if (oldStart === oldEnd) {
+            return [newSplice(currentStart, [], currentEnd - currentStart)];
+        }
+        const ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));
+        const splices = [];
+        let splice = void 0;
+        let index = currentStart;
+        let oldIndex = oldStart;
+        for (let i = 0; i < ops.length; ++i) {
+            switch (ops[i]) {
+                case EDIT_LEAVE:
+                    if (splice !== void 0) {
+                        splices.push(splice);
+                        splice = void 0;
+                    }
+                    index++;
+                    oldIndex++;
+                    break;
+                case EDIT_UPDATE:
+                    if (splice === void 0) {
+                        splice = newSplice(index, [], 0);
+                    }
+                    splice.addedCount++;
+                    index++;
+                    splice.removed.push(old[oldIndex]);
+                    oldIndex++;
+                    break;
+                case EDIT_ADD:
+                    if (splice === void 0) {
+                        splice = newSplice(index, [], 0);
+                    }
+                    splice.addedCount++;
+                    index++;
+                    break;
+                case EDIT_DELETE:
+                    if (splice === void 0) {
+                        splice = newSplice(index, [], 0);
+                    }
+                    splice.removed.push(old[oldIndex]);
+                    oldIndex++;
+                    break;
+                // no default
+            }
+        }
+        if (splice !== void 0) {
+            splices.push(splice);
+        }
+        return splices;
+    }
+    const $push = Array.prototype.push;
+    function mergeSplice(splices, index, removed, addedCount) {
+        const splice = newSplice(index, removed, addedCount);
+        let inserted = false;
+        let insertionOffset = 0;
+        for (let i = 0; i < splices.length; i++) {
+            const current = splices[i];
+            current.index += insertionOffset;
+            if (inserted) {
+                continue;
+            }
+            const intersectCount = intersect(splice.index, splice.index + splice.removed.length, current.index, current.index + current.addedCount);
+            if (intersectCount >= 0) {
+                // Merge the two splices
+                splices.splice(i, 1);
+                i--;
+                insertionOffset -= current.addedCount - current.removed.length;
+                splice.addedCount += current.addedCount - intersectCount;
+                const deleteCount = splice.removed.length + current.removed.length - intersectCount;
+                if (!splice.addedCount && !deleteCount) {
+                    // merged splice is a noop. discard.
+                    inserted = true;
+                }
+                else {
+                    let currentRemoved = current.removed;
+                    if (splice.index < current.index) {
+                        // some prefix of splice.removed is prepended to current.removed.
+                        const prepend = splice.removed.slice(0, current.index - splice.index);
+                        $push.apply(prepend, currentRemoved);
+                        currentRemoved = prepend;
+                    }
+                    if (splice.index + splice.removed.length >
+                        current.index + current.addedCount) {
+                        // some suffix of splice.removed is appended to current.removed.
+                        const append = splice.removed.slice(current.index + current.addedCount - splice.index);
+                        $push.apply(currentRemoved, append);
+                    }
+                    splice.removed = currentRemoved;
+                    if (current.index < splice.index) {
+                        splice.index = current.index;
+                    }
+                }
+            }
+            else if (splice.index < current.index) {
+                // Insert splice here.
+                inserted = true;
+                splices.splice(i, 0, splice);
+                i++;
+                const offset = splice.addedCount - splice.removed.length;
+                current.index += offset;
+                insertionOffset += offset;
+            }
+        }
+        if (!inserted) {
+            splices.push(splice);
+        }
+    }
+    function createInitialSplices(changeRecords) {
+        const splices = [];
+        for (let i = 0, ii = changeRecords.length; i < ii; i++) {
+            const record = changeRecords[i];
+            mergeSplice(splices, record.index, record.removed, record.addedCount);
+        }
+        return splices;
+    }
+    /** @internal */
+    function projectArraySplices(array, changeRecords) {
+        let splices = [];
+        const initialSplices = createInitialSplices(changeRecords);
+        for (let i = 0, ii = initialSplices.length; i < ii; ++i) {
+            const splice = initialSplices[i];
+            if (splice.addedCount === 1 && splice.removed.length === 1) {
+                if (splice.removed[0] !== array[splice.index]) {
+                    splices.push(splice);
+                }
+                continue;
+            }
+            splices = splices.concat(calcSplices(array, splice.index, splice.index + splice.addedCount, splice.removed, 0, splice.removed.length));
+        }
+        return splices;
+    }
+
+    let arrayObservationEnabled = false;
+    function adjustIndex(changeRecord, array) {
+        let index = changeRecord.index;
+        const arrayLength = array.length;
+        if (index > arrayLength) {
+            index = arrayLength - changeRecord.addedCount;
+        }
+        else if (index < 0) {
+            index =
+                arrayLength + changeRecord.removed.length + index - changeRecord.addedCount;
+        }
+        if (index < 0) {
+            index = 0;
+        }
+        changeRecord.index = index;
+        return changeRecord;
+    }
+    class ArrayObserver extends SubscriberSet {
+        constructor(source) {
+            super(source);
+            this.oldCollection = void 0;
+            this.splices = void 0;
+            this.needsQueue = true;
+            this.call = this.flush;
+            Reflect.defineProperty(source, "$fastController", {
+                value: this,
+                enumerable: false,
+            });
+        }
+        subscribe(subscriber) {
+            this.flush();
+            super.subscribe(subscriber);
+        }
+        addSplice(splice) {
+            if (this.splices === void 0) {
+                this.splices = [splice];
+            }
+            else {
+                this.splices.push(splice);
+            }
+            if (this.needsQueue) {
+                this.needsQueue = false;
+                DOM.queueUpdate(this);
+            }
+        }
+        reset(oldCollection) {
+            this.oldCollection = oldCollection;
+            if (this.needsQueue) {
+                this.needsQueue = false;
+                DOM.queueUpdate(this);
+            }
+        }
+        flush() {
+            const splices = this.splices;
+            const oldCollection = this.oldCollection;
+            if (splices === void 0 && oldCollection === void 0) {
+                return;
+            }
+            this.needsQueue = true;
+            this.splices = void 0;
+            this.oldCollection = void 0;
+            const finalSplices = oldCollection === void 0
+                ? projectArraySplices(this.source, splices)
+                : calcSplices(this.source, 0, this.source.length, oldCollection, 0, oldCollection.length);
+            this.notify(finalSplices);
+        }
+    }
+    /* eslint-disable prefer-rest-params */
+    /* eslint-disable @typescript-eslint/explicit-function-return-type */
+    /**
+     * Enables the array observation mechanism.
+     * @remarks
+     * Array observation is enabled automatically when using the
+     * {@link RepeatDirective}, so calling this API manually is
+     * not typically necessary.
+     * @public
+     */
+    function enableArrayObservation() {
+        if (arrayObservationEnabled) {
+            return;
+        }
+        arrayObservationEnabled = true;
+        Observable.setArrayObserverFactory((collection) => {
+            return new ArrayObserver(collection);
+        });
+        const proto = Array.prototype;
+        // Don't patch Array if it has already been patched
+        // by another copy of fast-element.
+        if (proto.$fastPatch) {
+            return;
+        }
+        Reflect.defineProperty(proto, "$fastPatch", {
+            value: 1,
+            enumerable: false,
+        });
+        const pop = proto.pop;
+        const push = proto.push;
+        const reverse = proto.reverse;
+        const shift = proto.shift;
+        const sort = proto.sort;
+        const splice = proto.splice;
+        const unshift = proto.unshift;
+        proto.pop = function () {
+            const notEmpty = this.length > 0;
+            const methodCallResult = pop.apply(this, arguments);
+            const o = this.$fastController;
+            if (o !== void 0 && notEmpty) {
+                o.addSplice(newSplice(this.length, [methodCallResult], 0));
+            }
+            return methodCallResult;
+        };
+        proto.push = function () {
+            const methodCallResult = push.apply(this, arguments);
+            const o = this.$fastController;
+            if (o !== void 0) {
+                o.addSplice(adjustIndex(newSplice(this.length - arguments.length, [], arguments.length), this));
+            }
+            return methodCallResult;
+        };
+        proto.reverse = function () {
+            let oldArray;
+            const o = this.$fastController;
+            if (o !== void 0) {
+                o.flush();
+                oldArray = this.slice();
+            }
+            const methodCallResult = reverse.apply(this, arguments);
+            if (o !== void 0) {
+                o.reset(oldArray);
+            }
+            return methodCallResult;
+        };
+        proto.shift = function () {
+            const notEmpty = this.length > 0;
+            const methodCallResult = shift.apply(this, arguments);
+            const o = this.$fastController;
+            if (o !== void 0 && notEmpty) {
+                o.addSplice(newSplice(0, [methodCallResult], 0));
+            }
+            return methodCallResult;
+        };
+        proto.sort = function () {
+            let oldArray;
+            const o = this.$fastController;
+            if (o !== void 0) {
+                o.flush();
+                oldArray = this.slice();
+            }
+            const methodCallResult = sort.apply(this, arguments);
+            if (o !== void 0) {
+                o.reset(oldArray);
+            }
+            return methodCallResult;
+        };
+        proto.splice = function () {
+            const methodCallResult = splice.apply(this, arguments);
+            const o = this.$fastController;
+            if (o !== void 0) {
+                o.addSplice(adjustIndex(newSplice(+arguments[0], methodCallResult, arguments.length > 2 ? arguments.length - 2 : 0), this));
+            }
+            return methodCallResult;
+        };
+        proto.unshift = function () {
+            const methodCallResult = unshift.apply(this, arguments);
+            const o = this.$fastController;
+            if (o !== void 0) {
+                o.addSplice(adjustIndex(newSplice(0, [], arguments.length), this));
+            }
+            return methodCallResult;
+        };
+    }
+    /* eslint-enable prefer-rest-params */
+    /* eslint-enable @typescript-eslint/explicit-function-return-type */
+
     /**
      * The runtime behavior for template references.
      * @public
@@ -2649,6 +3149,267 @@
         return (source, context) => binding(source, context) ? getTemplate(source, context) : null;
     }
 
+    const defaultRepeatOptions = Object.freeze({
+        positioning: false,
+        recycle: true,
+    });
+    function bindWithoutPositioning(view, items, index, context) {
+        view.bind(items[index], context);
+    }
+    function bindWithPositioning(view, items, index, context) {
+        const childContext = Object.create(context);
+        childContext.index = index;
+        childContext.length = items.length;
+        view.bind(items[index], childContext);
+    }
+    /**
+     * A behavior that renders a template for each item in an array.
+     * @public
+     */
+    class RepeatBehavior {
+        /**
+         * Creates an instance of RepeatBehavior.
+         * @param location - The location in the DOM to render the repeat.
+         * @param itemsBinding - The array to render.
+         * @param isItemsBindingVolatile - Indicates whether the items binding has volatile dependencies.
+         * @param templateBinding - The template to render for each item.
+         * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
+         * @param options - Options used to turn on special repeat features.
+         */
+        constructor(location, itemsBinding, isItemsBindingVolatile, templateBinding, isTemplateBindingVolatile, options) {
+            this.location = location;
+            this.itemsBinding = itemsBinding;
+            this.templateBinding = templateBinding;
+            this.options = options;
+            this.source = null;
+            this.views = [];
+            this.items = null;
+            this.itemsObserver = null;
+            this.originalContext = void 0;
+            this.childContext = void 0;
+            this.bindView = bindWithoutPositioning;
+            this.itemsBindingObserver = Observable.binding(itemsBinding, this, isItemsBindingVolatile);
+            this.templateBindingObserver = Observable.binding(templateBinding, this, isTemplateBindingVolatile);
+            if (options.positioning) {
+                this.bindView = bindWithPositioning;
+            }
+        }
+        /**
+         * Bind this behavior to the source.
+         * @param source - The source to bind to.
+         * @param context - The execution context that the binding is operating within.
+         */
+        bind(source, context) {
+            this.source = source;
+            this.originalContext = context;
+            this.childContext = Object.create(context);
+            this.childContext.parent = source;
+            this.childContext.parentContext = this.originalContext;
+            this.items = this.itemsBindingObserver.observe(source, this.originalContext);
+            this.template = this.templateBindingObserver.observe(source, this.originalContext);
+            this.observeItems(true);
+            this.refreshAllViews();
+        }
+        /**
+         * Unbinds this behavior from the source.
+         * @param source - The source to unbind from.
+         */
+        unbind() {
+            this.source = null;
+            this.items = null;
+            if (this.itemsObserver !== null) {
+                this.itemsObserver.unsubscribe(this);
+            }
+            this.unbindAllViews();
+            this.itemsBindingObserver.disconnect();
+            this.templateBindingObserver.disconnect();
+        }
+        /** @internal */
+        handleChange(source, args) {
+            if (source === this.itemsBinding) {
+                this.items = this.itemsBindingObserver.observe(this.source, this.originalContext);
+                this.observeItems();
+                this.refreshAllViews();
+            }
+            else if (source === this.templateBinding) {
+                this.template = this.templateBindingObserver.observe(this.source, this.originalContext);
+                this.refreshAllViews(true);
+            }
+            else {
+                this.updateViews(args);
+            }
+        }
+        observeItems(force = false) {
+            if (!this.items) {
+                this.items = emptyArray;
+                return;
+            }
+            const oldObserver = this.itemsObserver;
+            const newObserver = (this.itemsObserver = Observable.getNotifier(this.items));
+            const hasNewObserver = oldObserver !== newObserver;
+            if (hasNewObserver && oldObserver !== null) {
+                oldObserver.unsubscribe(this);
+            }
+            if (hasNewObserver || force) {
+                newObserver.subscribe(this);
+            }
+        }
+        updateViews(splices) {
+            const childContext = this.childContext;
+            const views = this.views;
+            const bindView = this.bindView;
+            const items = this.items;
+            const template = this.template;
+            const recycle = this.options.recycle;
+            const leftoverViews = [];
+            let leftoverIndex = 0;
+            let availableViews = 0;
+            for (let i = 0, ii = splices.length; i < ii; ++i) {
+                const splice = splices[i];
+                const removed = splice.removed;
+                let removeIndex = 0;
+                let addIndex = splice.index;
+                const end = addIndex + splice.addedCount;
+                const removedViews = views.splice(splice.index, removed.length);
+                const totalAvailableViews = (availableViews =
+                    leftoverViews.length + removedViews.length);
+                for (; addIndex < end; ++addIndex) {
+                    const neighbor = views[addIndex];
+                    const location = neighbor ? neighbor.firstChild : this.location;
+                    let view;
+                    if (recycle && availableViews > 0) {
+                        if (removeIndex <= totalAvailableViews && removedViews.length > 0) {
+                            view = removedViews[removeIndex];
+                            removeIndex++;
+                        }
+                        else {
+                            view = leftoverViews[leftoverIndex];
+                            leftoverIndex++;
+                        }
+                        availableViews--;
+                    }
+                    else {
+                        view = template.create();
+                    }
+                    views.splice(addIndex, 0, view);
+                    bindView(view, items, addIndex, childContext);
+                    view.insertBefore(location);
+                }
+                if (removedViews[removeIndex]) {
+                    leftoverViews.push(...removedViews.slice(removeIndex));
+                }
+            }
+            for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {
+                leftoverViews[i].dispose();
+            }
+            if (this.options.positioning) {
+                for (let i = 0, ii = views.length; i < ii; ++i) {
+                    const currentContext = views[i].context;
+                    currentContext.length = ii;
+                    currentContext.index = i;
+                }
+            }
+        }
+        refreshAllViews(templateChanged = false) {
+            const items = this.items;
+            const childContext = this.childContext;
+            const template = this.template;
+            const location = this.location;
+            const bindView = this.bindView;
+            let itemsLength = items.length;
+            let views = this.views;
+            let viewsLength = views.length;
+            if (itemsLength === 0 || templateChanged || !this.options.recycle) {
+                // all views need to be removed
+                HTMLView.disposeContiguousBatch(views);
+                viewsLength = 0;
+            }
+            if (viewsLength === 0) {
+                // all views need to be created
+                this.views = views = new Array(itemsLength);
+                for (let i = 0; i < itemsLength; ++i) {
+                    const view = template.create();
+                    bindView(view, items, i, childContext);
+                    views[i] = view;
+                    view.insertBefore(location);
+                }
+            }
+            else {
+                // attempt to reuse existing views with new data
+                let i = 0;
+                for (; i < itemsLength; ++i) {
+                    if (i < viewsLength) {
+                        const view = views[i];
+                        bindView(view, items, i, childContext);
+                    }
+                    else {
+                        const view = template.create();
+                        bindView(view, items, i, childContext);
+                        views.push(view);
+                        view.insertBefore(location);
+                    }
+                }
+                const removed = views.splice(i, viewsLength - i);
+                for (i = 0, itemsLength = removed.length; i < itemsLength; ++i) {
+                    removed[i].dispose();
+                }
+            }
+        }
+        unbindAllViews() {
+            const views = this.views;
+            for (let i = 0, ii = views.length; i < ii; ++i) {
+                views[i].unbind();
+            }
+        }
+    }
+    /**
+     * A directive that configures list rendering.
+     * @public
+     */
+    class RepeatDirective extends HTMLDirective {
+        /**
+         * Creates an instance of RepeatDirective.
+         * @param itemsBinding - The binding that provides the array to render.
+         * @param templateBinding - The template binding used to obtain a template to render for each item in the array.
+         * @param options - Options used to turn on special repeat features.
+         */
+        constructor(itemsBinding, templateBinding, options) {
+            super();
+            this.itemsBinding = itemsBinding;
+            this.templateBinding = templateBinding;
+            this.options = options;
+            /**
+             * Creates a placeholder string based on the directive's index within the template.
+             * @param index - The index of the directive within the template.
+             */
+            this.createPlaceholder = DOM.createBlockPlaceholder;
+            enableArrayObservation();
+            this.isItemsBindingVolatile = Observable.isVolatileBinding(itemsBinding);
+            this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
+        }
+        /**
+         * Creates a behavior for the provided target node.
+         * @param target - The node instance to create the behavior for.
+         */
+        createBehavior(target) {
+            return new RepeatBehavior(target, this.itemsBinding, this.isItemsBindingVolatile, this.templateBinding, this.isTemplateBindingVolatile, this.options);
+        }
+    }
+    /**
+     * A directive that enables list rendering.
+     * @param itemsBinding - The array to render.
+     * @param templateOrTemplateBinding - The template or a template binding used obtain a template
+     * to render for each item in the array.
+     * @param options - Options used to turn on special repeat features.
+     * @public
+     */
+    function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
+        const templateBinding = typeof templateOrTemplateBinding === "function"
+            ? templateOrTemplateBinding
+            : () => templateOrTemplateBinding;
+        return new RepeatDirective(itemsBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
+    }
+
     /**
      * Creates a function that can be used to filter a Node array, selecting only elements.
      * @param selector - An optional selector to restrict the filter to.
@@ -14537,7 +15298,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$y = css `
+    const styles$z = css `
     :host {
         contain: layout;
         display: block;
@@ -14561,7 +15322,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$y
+        styles: styles$z
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -14927,9 +15688,9 @@
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-    const template$9 = html `<slot></slot>`;
+    const template$a = html `<slot></slot>`;
 
-    const styles$x = css `
+    const styles$y = css `
     :host {
         display: contents;
     }
@@ -14985,8 +15746,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$x,
-        template: template$9
+        styles: styles$y,
+        template: template$a
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -15210,7 +15971,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$w = css `
+    const styles$x = css `
     ${display('inline-block')}
 
     :host {
@@ -15273,7 +16034,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$w
+        styles: styles$x
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -15891,7 +16652,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$v = css `
+    const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -15971,7 +16732,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$v,
+        styles: styles$w,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -16056,7 +16817,7 @@
         block: 'block'
     };
 
-    const styles$u = css `
+    const styles$v = css `
     ${display('inline-flex')}
 
     :host {
@@ -16260,7 +17021,7 @@
             }
         `));
 
-    const styles$t = styles$u.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+    const styles$u = styles$v.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
             :host([appearance-variant='primary']) .control {
                 box-shadow: 0px 0px 0px ${borderWidth}
                     rgba(${actionRgbPartialColor}, 0.3) inset;
@@ -16380,14 +17141,14 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$t,
+        styles: styles$u,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
-    const styles$s = css `
+    const styles$t = css `
     ${display('inline-flex')}
 
     :host {
@@ -16546,14 +17307,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$s,
+        styles: styles$t,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$r = css `
+    const styles$s = css `
     ${display('inline-flex')}
 
     :host {
@@ -16671,14 +17432,14 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$r,
+        styles: styles$s,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
-    const styles$q = css `
-    ${styles$u}
+    const styles$r = css `
+    ${styles$v}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -16704,7 +17465,7 @@
     }
 `;
 
-    const template$8 = (context, definition) => html `
+    const template$9 = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -16779,8 +17540,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$8,
-        styles: styles$q,
+        template: template$9,
+        styles: styles$r,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -16793,13 +17554,13 @@
     </div>
 `;
 
-    const template$7 = html `
+    const template$8 = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('inline-flex')}
 
     :host {
@@ -16852,8 +17613,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$7,
-            styles: styles$p,
+            template: template$8,
+            styles: styles$q,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -16887,7 +17648,7 @@
         block: 'block'
     };
 
-    const styles$o = css `
+    const styles$p = css `
     ${display('inline-flex')}
 
     :host {
@@ -17115,7 +17876,7 @@
             }
         `));
 
-    const styles$n = css `
+    const styles$o = css `
     .error-icon {
         display: none;
     }
@@ -17153,9 +17914,9 @@
     }
 `;
 
-    const styles$m = css `
+    const styles$n = css `
+    ${styles$p}
     ${styles$o}
-    ${styles$n}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -17391,7 +18152,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$m,
+        styles: styles$n,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -17435,7 +18196,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('grid')}
 
     dialog {
@@ -17551,7 +18312,7 @@
             }
         `));
 
-    const template$6 = html `
+    const template$7 = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -17677,13 +18438,13 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$6,
-        styles: styles$l,
+        template: template$7,
+        styles: styles$m,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('block')}
 
     :host {
@@ -17838,7 +18599,7 @@
             }
         `));
 
-    const template$5 = html `
+    const template$6 = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -17952,8 +18713,8 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$5,
-        styles: styles$k
+        template: template$6,
+        styles: styles$l
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -19585,7 +20346,7 @@
     }
     registerIcon('icon-xmark-check', IconXmarkCheck);
 
-    const styles$j = css `
+    const styles$k = css `
     ${display('flex')}
 
     :host {
@@ -19665,11 +20426,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$j
+        styles: styles$k
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$i = css `
+    const styles$j = css `
     ${display('grid')}
 
     :host {
@@ -19724,11 +20485,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$i
+        styles: styles$j
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$h = css `
+    const styles$i = css `
     ${display('inline-block')}
 
     :host {
@@ -19747,7 +20508,7 @@
 `;
 
     // prettier-ignore
-    const template$4 = html `
+    const template$5 = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -19955,15 +20716,15 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$4,
-        styles: styles$h,
+        template: template$5,
+        styles: styles$i,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('grid')}
 
     :host {
@@ -20061,7 +20822,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$g,
+        styles: styles$h,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -20075,9 +20836,9 @@
         block: 'block'
     };
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('inline-block')}
-    ${styles$n}
+    ${styles$o}
 
     :host {
         font: ${bodyFont};
@@ -20291,7 +21052,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$f,
+        styles: styles$g,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -20332,7 +21093,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('inline-flex')}
 
     :host {
@@ -20432,12 +21193,12 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$e,
+        styles: styles$f,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-    const styles$d = css `
+    const styles$e = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -20472,16 +21233,16 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$d,
+        styles: styles$e,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
 
-    const styles$c = css `
+    const styles$d = css `
+    ${styles$p}
     ${styles$o}
-    ${styles$n}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -20557,7 +21318,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$c,
+        styles: styles$d,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${DesignSystem.tagFor(IconExclamationMark)}
@@ -20569,7 +21330,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-    const styles$b = css `
+    const styles$c = css `
     ${display('inline-flex')}
 
     :host {
@@ -20732,7 +21493,7 @@
         `));
 
     // prettier-ignore
-    const template$3 = html `
+    const template$4 = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -20776,12 +21537,12 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$3,
-        styles: styles$b
+        template: template$4,
+        styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-    const styles$a = css `
+    const styles$b = css `
     ${display('inline-flex')}
 
     :host {
@@ -20885,11 +21646,11 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$a
+        styles: styles$b
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-    const styles$9 = css `
+    const styles$a = css `
     ${display('block')}
 
     :host {
@@ -20909,10 +21670,28 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$9
+        styles: styles$a
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
+    const styles$9 = css `
+    ${display('flex')}
+`;
+
+    const template$3 = html ` <template> Nimble table here </template> `;
+
+    /**
+     * A nimble-styled table.
+     */
+    class Table extends FoundationElement {
+    }
+    const nimbleTable = Table.compose({
+        baseName: 'table',
+        template: template$3,
+        styles: styles$9
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
+
     const styles$8 = css `
     ${display('grid')}
 
@@ -21153,7 +21932,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$n}
+    ${styles$o}
 
     :host {
         font: ${bodyFont};
@@ -22047,7 +22826,17 @@ Instead styling against the role which is more general and likely a better appro
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
-    const template = html ``;
+    // prettier-ignore
+    const template = html `
+    <div>
+        <ul>
+            ${repeat(x => x.dies, html ` <li>
+                    ${x => html `dieX: ${x.x}, dieY: ${x.y}, value:
+                        ${x.value}%`}
+                </li>`)}
+        </ul>
+    </div>
+`;
 
     const styles = css ``;