@ni/nimble-components 18.6.4 → 18.8.0

package/dist/all-components-bundle.js

@@ -16807,9 +16807,9 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$k = html `<slot></slot>`;
+    const template$l = html `<slot></slot>`;
 
-    const styles$J = css `
+    const styles$K = css `
     :host {
         display: contents;
     }
@@ -16865,8 +16865,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$J,
-        template: template$k
+        styles: styles$K,
+        template: template$l
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -17050,7 +17050,7 @@
         }
     }
 
-    const styles$I = css `
+    const styles$J = css `
     ${display('inline')}
 
     :host {
@@ -17133,7 +17133,7 @@
 `;
 
     // prettier-ignore
-    const template$j = (context, definition) => html `
+    const template$k = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17206,8 +17206,8 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$j,
-        styles: styles$I,
+        template: template$k,
+        styles: styles$J,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17293,7 +17293,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$H = css `
+    const styles$I = css `
     ${display('inline-flex')}
 
     :host {
@@ -17574,8 +17574,8 @@
             }
         `));
 
-    const styles$G = css `
-    ${styles$H}
+    const styles$H = css `
+    ${styles$I}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17583,7 +17583,7 @@
     }
 `;
 
-    const template$i = (context, definition) => html `
+    const template$j = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17665,8 +17665,8 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$i,
-        styles: styles$G,
+        template: template$j,
+        styles: styles$H,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17674,6 +17674,214 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
     DesignSystem.tagFor(AnchorButton);
 
+    const styles$G = css `
+    ${display('grid')}
+
+    :host {
+        font: ${bodyFont};
+    }
+
+    :host(:focus-within:not(:active)) {
+        outline: 2px solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
+    :host(:hover) {
+        background: ${fillHoverColor};
+    }
+
+    :host(:active) {
+        background: ${fillSelectedColor};
+    }
+
+    :host([disabled]) {
+        background: transparent;
+    }
+
+    a {
+        display: grid;
+        contain: layout;
+        overflow: visible;
+        box-sizing: border-box;
+        height: ${controlHeight};
+        grid-template-columns: 1fr;
+        column-gap: 8px;
+        grid-template-rows: 1fr;
+        justify-items: start;
+        align-items: center;
+        margin: 0 0;
+        white-space: nowrap;
+        color: ${bodyFontColor};
+        fill: currentcolor;
+        cursor: pointer;
+        text-decoration: none;
+        outline: none;
+    }
+
+    :host([disabled]) a {
+        color: ${bodyDisabledFontColor};
+        fill: currentcolor;
+        cursor: default;
+    }
+
+    :host(.indent-1) a {
+        grid-template-columns: ${iconSize} 1fr;
+    }
+
+    [part='start'] {
+        display: contents;
+    }
+
+    slot[name='start']::slotted(*) {
+        fill: currentcolor;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    :host(.indent-1) .start {
+        grid-column: 1;
+    }
+
+    :host(.indent-1) .content {
+        grid-column: 2;
+    }
+
+    [part='end'] {
+        display: none;
+    }
+`;
+
+    const template$i = (context, definition) => html `
+    <template
+        role="menuitem"
+        class="${x => (typeof x.startColumnCount === 'number'
+    ? `indent-${x.startColumnCount}`
+    : '')}"
+        aria-disabled="${x => x.disabled}"
+    >
+        <a
+            ${ref('anchor')}
+            download="${x => x.download}"
+            href=${x => (x.disabled ? null : x.href)}
+            hreflang="${x => x.hreflang}"
+            ping="${x => x.ping}"
+            referrerpolicy="${x => x.referrerpolicy}"
+            rel="${x => x.rel}"
+            target="${x => x.target}"
+            type="${x => x.type}"
+            @click="${(x, c) => x.clickHandler(c.event)}"
+            @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        >
+            ${startSlotTemplate(context, definition)}
+            <span class="content" part="content">
+                <slot></slot>
+            </span>
+            ${endSlotTemplate(context, definition)}
+        </a>
+    </template>
+`;
+
+    /**
+     * A nimble-styled anchor menu-item
+     */
+    class AnchorMenuItem extends AnchorBase {
+        constructor() {
+            super(...arguments);
+            this.disabled = false;
+            /**
+             * There is an assumption that this component is styled using a grid display, and this property
+             * controls which grid column contains the menu item text (i.e. the indentation of the text).
+             * The parent menu sets this value on all its child menu items so their indentations align.
+             * @internal
+             */
+            this.startColumnCount = 0;
+        }
+        // The following two handlers are workarounds for issues with anchor menu items in submenus.
+        // Events can bubble up the DOM and get handled by the menu item in the parent menu. When that happens,
+        // the menu item's handlers (FAST) return false and prevent the default action, i.e. navigation.
+        // FAST has this issue about supporting links in menus: https://github.com/microsoft/fast/issues/5415
+        /**
+         * @internal
+         */
+        clickHandler(e) {
+            e.stopImmediatePropagation();
+            return true;
+        }
+        /**
+         * @internal
+         */
+        keydownHandler(e) {
+            if (e.defaultPrevented) {
+                return false;
+            }
+            switch (e.key) {
+                case keyEnter:
+                    e.stopImmediatePropagation();
+                    break;
+            }
+            return true;
+        }
+        // The FAST Menu manages the `tabindex` of its menu items. Because of a bug in Chromium
+        // (https://bugs.chromium.org/p/chromium/issues/detail?id=1346606), setting the tabindex on an element
+        // with `delegatesFocus=true` causes the element to lose focus. This causes the menu to close, preventing
+        // arrowing through the items or navigating to the url. As a workaround, we intercept attempts to
+        // set the tabindex on the host and instead set it on the inner anchor.
+        // The referenced Chromium bug is actually fixed, but it hasn't been pulled into Edge yet (it is in
+        // Chrome). Issue https://github.com/ni/nimble/issues/1118 tracks removal of this workaround.
+        setAttribute(qualifiedName, value) {
+            if (qualifiedName === 'tabindex') {
+                this.anchor.setAttribute(qualifiedName, value);
+            }
+            else {
+                super.setAttribute(qualifiedName, value);
+            }
+        }
+        // This is part of the bug workaround described above (in setAttribute)
+        get tabIndex() {
+            return this.anchor.tabIndex;
+        }
+        // This is part of the bug workaround described above (in setAttribute)
+        set tabIndex(value) {
+            this.anchor.tabIndex = value;
+        }
+    }
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], AnchorMenuItem.prototype, "disabled", void 0);
+    __decorate$1([
+        observable
+    ], AnchorMenuItem.prototype, "anchor", void 0);
+    __decorate$1([
+        observable
+    ], AnchorMenuItem.prototype, "startColumnCount", void 0);
+    const nimbleAnchorMenuItem = AnchorMenuItem.compose({
+        baseName: 'anchor-menu-item',
+        template: template$i,
+        styles: styles$G,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    applyMixins(AnchorMenuItem, StartEnd);
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleAnchorMenuItem());
+    DesignSystem.tagFor(AnchorMenuItem);
+    // This is a workaround for the fact that FAST's menu uses `instanceof MenuItem`
+    // in their logic for indenting menu items. Since our AnchorMenuItem derives from
+    // AnchorBase and not FAST's MenuItem, we need to change their MenuItem's definition
+    // of `hasInstance` so that it includes our AnchorMenuItem, too.
+    //
+    // If/when we change FAST to test for the presence of `startColumnCount` instead
+    // of using `instanceof MenuItem`, we can remove this workaround. Here is the
+    // PR into FAST: https://github.com/microsoft/fast/pull/6667
+    const originalInstanceOf = MenuItem$1[Symbol.hasInstance].bind(MenuItem$1);
+    Object.defineProperty(MenuItem$1, Symbol.hasInstance, {
+        value(instance) {
+            return (originalInstanceOf(instance) || instance instanceof AnchorMenuItem);
+        }
+    });
+
     const styles$F = css `
     ${display('inline-flex')}
 
@@ -18088,7 +18296,7 @@
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleAnchoredRegion());
-    DesignSystem.tagFor(AnchoredRegion);
+    const anchoredRegionTag = DesignSystem.tagFor(AnchoredRegion);
 
     /**
      * Subscription for {@link ThemeStyleSheetBehavior}
@@ -18322,7 +18530,7 @@
         `));
 
     const styles$A = css `
-    ${styles$H}
+    ${styles$I}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18374,7 +18582,7 @@
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
-    DesignSystem.tagFor(Button);
+    const buttonTag = DesignSystem.tagFor(Button);
 
     /* 🤖 this file was generated by svg-to-ts */
     const add16X16 = {
@@ -19066,7 +19274,7 @@
         }
     }
     registerIcon('icon-exclamation-mark', IconExclamationMark);
-    DesignSystem.tagFor(IconExclamationMark);
+    const iconExclamationMarkTag = DesignSystem.tagFor(IconExclamationMark);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -19078,7 +19286,7 @@
         }
     }
     registerIcon('icon-info', IconInfo);
-    DesignSystem.tagFor(IconInfo);
+    const iconInfoTag = DesignSystem.tagFor(IconInfo);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -19090,7 +19298,7 @@
         }
     }
     registerIcon('icon-triangle-filled', IconTriangleFilled);
-    DesignSystem.tagFor(IconTriangleFilled);
+    const iconTriangleFilledTag = DesignSystem.tagFor(IconTriangleFilled);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -19102,7 +19310,7 @@
         }
     }
     registerIcon('icon-xmark', IconXmark);
-    DesignSystem.tagFor(IconXmark);
+    const iconXmarkTag = DesignSystem.tagFor(IconXmark);
 
     /**
      * Severities of banners.
@@ -19142,13 +19350,13 @@
     >
         <div class="icon">
             ${when(x => x.severity === BannerSeverity.error, html `
-                <${DesignSystem.tagFor(IconExclamationMark)}></${DesignSystem.tagFor(IconExclamationMark)}>
+                <${iconExclamationMarkTag}></${iconExclamationMarkTag}>
             `)}
             ${when(x => x.severity === BannerSeverity.warning, html `
-                <${DesignSystem.tagFor(IconTriangleFilled)}></${DesignSystem.tagFor(IconTriangleFilled)}>
+                <${iconTriangleFilledTag}></${iconTriangleFilledTag}>
             `)}
             ${when(x => x.severity === BannerSeverity.information, html `
-                <${DesignSystem.tagFor(IconInfo)}></${DesignSystem.tagFor(IconInfo)}>
+                <${iconInfoTag}></${iconInfoTag}>
             `)}
         </div>
         <div class="text">
@@ -19159,10 +19367,10 @@
             <slot name="action"></slot>
             <div class="dismiss">
                 ${when(x => !x.preventDismiss, html `
-                    <${DesignSystem.tagFor(Button)} appearance="ghost" content-hidden @click="${x => x.dismissBanner()}">
-                        <${DesignSystem.tagFor(IconXmark)} slot="start"></${DesignSystem.tagFor(IconXmark)}>
+                    <${buttonTag} appearance="ghost" content-hidden @click="${x => x.dismissBanner()}">
+                        <${iconXmarkTag} slot="start"></${iconXmarkTag}>
                         ${x => x.dismissButtonLabel ?? 'Close'}
-                    </${DesignSystem.tagFor(Button)}>
+                    </${buttonTag}>
                 `)}
             </div>
         </div>
@@ -19664,7 +19872,7 @@
     DesignSystem.tagFor(Checkbox);
 
     const styles$u = css `
-    ${styles$H}
+    ${styles$I}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -19772,7 +19980,7 @@
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
-    DesignSystem.tagFor(ToggleButton);
+    const toggleButtonTag = DesignSystem.tagFor(ToggleButton);
 
     const errorTextTemplate = html `
     <div class="error-text" title="${x => x.errorText}" aria-live="polite">
@@ -19790,7 +19998,7 @@
         }
     }
     registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
-    DesignSystem.tagFor(IconArrowExpanderDown);
+    const iconArrowExpanderDownTag = DesignSystem.tagFor(IconArrowExpanderDown);
 
     const DropdownAppearance = {
         underline: 'underline',
@@ -20316,12 +20524,12 @@
         },
         end: html `
         <div class="end-slot-container">
-            <${DesignSystem.tagFor(IconExclamationMark)}
+            <${iconExclamationMarkTag}
                 severity="error"
                 class="error-icon"
-            ></${DesignSystem.tagFor(IconExclamationMark)}>
+            ></${iconExclamationMarkTag}>
             <div class="separator"></div>
-            <${DesignSystem.tagFor(ToggleButton)}
+            <${toggleButtonTag}
                 ${ref('dropdownButton')}
                 appearance="ghost"
                 ?checked="${x => x.open}"
@@ -20336,12 +20544,12 @@
                 aria-expanded="${x => x.open}"
                 tabindex="-1"
             >
-                <${DesignSystem.tagFor(IconArrowExpanderDown)}
+                <${iconArrowExpanderDownTag}
                     slot="start"
                     class="dropdown-icon"
                 >
-                </${DesignSystem.tagFor(IconArrowExpanderDown)}>
-            </${DesignSystem.tagFor(ToggleButton)}>
+                </${iconArrowExpanderDownTag}>
+            </${toggleButtonTag}>
         </div>
         ${errorTextTemplate}
     `
@@ -20887,7 +21095,7 @@
         }
     }
     registerIcon('icon-add', IconAdd);
-    DesignSystem.tagFor(IconAdd);
+    const iconAddTag = DesignSystem.tagFor(IconAdd);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -20899,7 +21107,7 @@
         }
     }
     registerIcon('icon-arrow-down', IconArrowDown);
-    DesignSystem.tagFor(IconArrowDown);
+    const iconArrowDownTag = DesignSystem.tagFor(IconArrowDown);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -21019,7 +21227,7 @@
         }
     }
     registerIcon('icon-arrow-up', IconArrowUp);
-    DesignSystem.tagFor(IconArrowUp);
+    const iconArrowUpTag = DesignSystem.tagFor(IconArrowUp);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -22123,7 +22331,7 @@
         }
     }
     registerIcon('icon-minus-wide', IconMinusWide);
-    DesignSystem.tagFor(IconMinusWide);
+    const iconMinusWideTag = DesignSystem.tagFor(IconMinusWide);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -22423,7 +22631,7 @@
         }
     }
     registerIcon('icon-three-dots-line', IconThreeDotsLine);
-    DesignSystem.tagFor(IconThreeDotsLine);
+    const iconThreeDotsLineTag = DesignSystem.tagFor(IconThreeDotsLine);
 
     // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
     /**
@@ -22834,7 +23042,7 @@
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
     >
-        <${DesignSystem.tagFor(ToggleButton)}
+        <${toggleButtonTag}
             part="button"
             appearance="${x => x.appearance}"
             ?content-hidden="${x => x.contentHidden}"
@@ -22851,9 +23059,9 @@
             <slot slot="start" name="start"></slot>
             <slot></slot>
             <slot slot="end" name="end"></slot>
-        </${DesignSystem.tagFor(ToggleButton)}>
+        </${toggleButtonTag}>
         ${when(x => x.open, html `
-            <${DesignSystem.tagFor(AnchoredRegion)}
+            <${anchoredRegionTag}
                 fixed-placement="true"
                 auto-update-mode="auto"
                 horizontal-inset="true"
@@ -22867,7 +23075,7 @@
                 <span part="menu">
                     <slot name="menu" ${slotted({ property: 'slottedMenus' })}></slot>
                 </span>
-            </${DesignSystem.tagFor(AnchoredRegion)}>
+            </${anchoredRegionTag}>
         `)}
     </template>
 `;
@@ -23091,7 +23299,7 @@
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
-    DesignSystem.tagFor(MenuButton);
+    const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
     const styles$l = css `
     ${display('grid')}
@@ -23427,37 +23635,37 @@
             delegatesFocus: true
         },
         stepDownGlyph: html `
-        <${DesignSystem.tagFor(Button)}
+        <${buttonTag}
             class="step-up-down-button"
             appearance="ghost"
             content-hidden
             tabindex="-1"
         >
             "Decrement"
-            <${DesignSystem.tagFor(IconMinusWide)}
+            <${iconMinusWideTag}
                 slot="start"
             >
-            </${DesignSystem.tagFor(IconMinusWide)}>
-        </${DesignSystem.tagFor(Button)}>
+            </${iconMinusWideTag}>
+        </${buttonTag}>
     `,
         stepUpGlyph: html `
-        <${DesignSystem.tagFor(Button)}
+        <${buttonTag}
             class="step-up-down-button"
             appearance="ghost"
             content-hidden
             tabindex="-1"
         >
             "Increment"
-            <${DesignSystem.tagFor(IconAdd)}
+            <${iconAddTag}
                 slot="start">
-            </${DesignSystem.tagFor(IconAdd)}>
-        </${DesignSystem.tagFor(Button)}>
+            </${iconAddTag}>
+        </${buttonTag}>
     `,
         end: html `
-        <${DesignSystem.tagFor(IconExclamationMark)}
+        <${iconExclamationMarkTag}
             severity="error"
             class="error-icon"
-        ></${DesignSystem.tagFor(IconExclamationMark)}>
+        ></${iconExclamationMarkTag}>
         ${errorTextTemplate}
     `
     });
@@ -23694,10 +23902,10 @@
         styles: styles$h,
         indicator: arrowExpanderDown16X16.data,
         end: html `
-        <${DesignSystem.tagFor(IconExclamationMark)}
+        <${iconExclamationMarkTag}
             severity="error"
             class="error-icon"
-        ></${DesignSystem.tagFor(IconExclamationMark)}>
+        ></${iconExclamationMarkTag}>
         ${errorTextTemplate}
     `
     });
@@ -27487,10 +27695,10 @@
 
         <span class="sort-indicator" aria-hidden="true">
             ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
-                <${DesignSystem.tagFor(IconArrowUp)}></${DesignSystem.tagFor(IconArrowUp)}>
+                <${iconArrowUpTag}></${iconArrowUpTag}>
             `)}
             ${when(x => x.sortDirection === TableColumnSortDirection.descending, html `
-                <${DesignSystem.tagFor(IconArrowDown)}></${DesignSystem.tagFor(IconArrowDown)}>
+                <${iconArrowDownTag}></${iconArrowDownTag}>
             `)}
         </span>
     </template>
@@ -27537,6 +27745,7 @@
         styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
+    const tableHeaderTag = DesignSystem.tagFor(TableHeader);
 
     const styles$b = css `
     ${display('grid')}
@@ -27593,17 +27802,17 @@
         <div ${ref('cellContentContainer')} class="cell-content-container"></div>
 
         ${when(x => x.hasActionMenu, html `
-            <${DesignSystem.tagFor(MenuButton)}
+            <${menuButtonTag}
                 content-hidden
                 appearance="${ButtonAppearance.ghost}"
                 @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
                 @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
                 class="action-menu"
             >
-                <${DesignSystem.tagFor(IconThreeDotsLine)} slot="start"></${DesignSystem.tagFor(IconThreeDotsLine)}>
+                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
                 ${x => x.actionMenuLabel}
                 <slot name="cellActionMenu" slot="menu"></slot>
-            </${DesignSystem.tagFor(MenuButton)}>
+            </${menuButtonTag}>
         `)}
     </template>
 `;
@@ -27678,13 +27887,14 @@
         styles: styles$a
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
+    const tableCellTag = DesignSystem.tagFor(TableCell);
 
     // prettier-ignore
     const template$5 = html `
     <template role="row">
         ${repeat(x => x.columnStates, html `
             ${when(x => !x.column.columnHidden, html `
-                <${DesignSystem.tagFor(TableCell)}
+                <${tableCellTag}
                     class="cell"
                     :cellTemplate="${x => x.column.cellTemplate}"
                     :cellStyles="${x => x.column.cellStyles}"
@@ -27701,7 +27911,7 @@
                             slot="cellActionMenu"
                         ></slot>
                     `)}
-                </${DesignSystem.tagFor(TableCell)}>
+                </${tableCellTag}>
             `)}
         `)}
     </template>
@@ -27784,6 +27994,7 @@
         styles: styles$b
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
+    const tableRowTag = DesignSystem.tagFor(TableRow);
 
     // prettier-ignore
     const template$4 = html `
@@ -27799,13 +28010,13 @@
                 <div class="header-row" role="row">
                     ${repeat(x => x.columns, html `
                         ${when(x => !x.columnHidden, html `
-                            <${DesignSystem.tagFor(TableHeader)}
+                            <${tableHeaderTag}
                                 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)}>
+                            </${tableHeaderTag}>
                         `)}
                     `)}
                     <div class="header-scrollbar-spacer"></div>
@@ -27817,7 +28028,7 @@
                      role="rowgroup">
                     ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                         ${repeat(x => x.virtualizer.visibleItems, html `
-                            <${DesignSystem.tagFor(TableRow)}
+                            <${tableRowTag}
                                 class="row"
                                 record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
                                 :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
@@ -27833,7 +28044,7 @@
                                     </slot>
                                 `)}
                             `)}                        
-                            </${DesignSystem.tagFor(TableRow)}>
+                            </${tableRowTag}>
                         `)}
                     `)}
                 </div>
@@ -29660,10 +29871,10 @@
             delegatesFocus: true
         },
         end: html `
-        <${DesignSystem.tagFor(IconExclamationMark)}
+        <${iconExclamationMarkTag}
             severity="error"
             class="error-icon"
-        ></${DesignSystem.tagFor(IconExclamationMark)}>
+        ></${iconExclamationMarkTag}>
         <span part="actions">
             <slot name="actions"></slot>
         </span>
@@ -29806,7 +30017,7 @@
     // prettier-ignore
     const template$1 = html `
             ${when(x => x.tooltipVisible, html `
-            <${DesignSystem.tagFor(AnchoredRegion)}
+            <${anchoredRegionTag}
                 class="anchored-region"
                 fixed-placement="true"
                 auto-update-mode="${x => x.autoUpdateMode}"
@@ -29824,17 +30035,17 @@
                 ${ref('region')}
             >
                 <div class="tooltip" part="tooltip" role="tooltip">
-                    <${DesignSystem.tagFor(IconExclamationMark)}
+                    <${iconExclamationMarkTag}
                         severity="error"
                         class="status-icon"
-                    ></${DesignSystem.tagFor(IconExclamationMark)}>
-                    <${DesignSystem.tagFor(IconInfo)}
+                    ></${iconExclamationMarkTag}>
+                    <${iconInfoTag}
                         severity="information"
                         class="status-icon"
-                    ></${DesignSystem.tagFor(IconInfo)}>
+                    ></${iconInfoTag}>
                     <slot></slot>
                 </div>
-            </${DesignSystem.tagFor(AnchoredRegion)}>
+            </${anchoredRegionTag}>
         `)}
 `;
 
@@ -30072,12 +30283,6 @@
         height: ${iconSize};
     }
 
-    ${
-/*
-Cannot call DesignSystem.tagFor(TreeItem) as this string is evaluated
-before the registration of the element itself; the style is self-referencing.
-Instead styling against the role which is more general and likely a better approach.
-*/ ''}
     ::slotted([role='treeitem']) {
         --ni-private-tree-item-nested-width: 1em;
         --ni-private-expand-collapse-button-nested-width: calc(