@ni/ok-components 1.13.0 → 1.15.0

package/dist/all-components-bundle.js

@@ -14980,7 +14980,7 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$1r = html `<slot></slot>`;
+  const template$1s = html `<slot></slot>`;
 
   const styles$1H = css `
     ${display$2('contents')}
@@ -15110,7 +15110,7 @@
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
       styles: styles$1H,
-      template: template$1r
+      template: template$1s
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16863,7 +16863,7 @@
     }
 `;
 
-  const template$1q = (_context, definition) => html `${
+  const template$1r = (_context, definition) => html `${
 /* top-container div is necessary because setting contenteditable directly on the native anchor instead
    leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.
 */ ''}<div
@@ -16966,7 +16966,7 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$1q,
+      template: template$1r,
       styles: styles$1G,
       shadowOptions: {
           delegatesFocus: true
@@ -17381,7 +17381,7 @@
     }
 `;
 
-  const template$1p = (context, definition) => html `
+  const template$1q = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17463,7 +17463,7 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$1p,
+      template: template$1q,
       styles: styles$1E,
       shadowOptions: {
           delegatesFocus: true
@@ -17555,7 +17555,7 @@
     }
 `;
 
-  const template$1o = (context, definition) => html `
+  const template$1p = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17656,7 +17656,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$1o,
+      template: template$1p,
       styles: styles$1D,
       shadowOptions: {
           delegatesFocus: true
@@ -19568,7 +19568,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$1n = html `<div
+  const template$1o = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -19637,7 +19637,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const registerIconSvg = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$1n,
+          template: template$1o,
           styles: styles$1z
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19762,7 +19762,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
    */
   const StepperOrientation = Orientation;
 
-  const template$1m = (context, definition) => html `
+  const template$1n = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -19909,7 +19909,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   ], AnchorStep.prototype, "tabIndex", void 0);
   const nimbleAnchorStep = AnchorStep.compose({
       baseName: 'anchor-step',
-      template: template$1m,
+      template: template$1n,
       styles: styles$1A,
       shadowOptions: {
           delegatesFocus: true
@@ -20034,7 +20034,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$1l = (context, definition) => html `
+  const template$1m = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -20086,7 +20086,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$1l,
+      template: template$1m,
       styles: styles$1y,
       shadowOptions: {
           delegatesFocus: true
@@ -20139,7 +20139,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$1k = (context, definition) => html `
+  const template$1l = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -20230,7 +20230,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$1k,
+      template: template$1l,
       styles: styles$1w,
       shadowOptions: {
           delegatesFocus: true
@@ -20265,7 +20265,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   registerIconSvg('icon-arrow-expander-right', IconArrowExpanderRight);
   const iconArrowExpanderRightTag = 'nimble-icon-arrow-expander-right';
 
-  const template$1j = (context, definition) => html `
+  const template$1k = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -20566,7 +20566,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$1j,
+      template: template$1k,
       styles: styles$1x,
       shadowOptions: {
           delegatesFocus: false
@@ -20679,7 +20679,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$1i = (context, definition) => html `
+  const template$1j = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -20816,7 +20816,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$1i,
+      template: template$1j,
       styles: styles$1v,
       shadowOptions: {
           delegatesFocus: true
@@ -21038,7 +21038,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       information: 'information'
   };
 
-  const template$1h = html `
+  const template$1i = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -21156,7 +21156,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$1h,
+      template: template$1i,
       styles: styles$1t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -21435,7 +21435,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$1g = html `
+  const template$1h = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -21450,7 +21450,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$1g,
+      template: template$1h,
       styles: styles$1q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
@@ -21797,7 +21797,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$1f = (_context, definition) => html `
+  const template$1g = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -21894,7 +21894,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$1f,
+      template: template$1g,
       styles: styles$1n,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
@@ -21968,7 +21968,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$1e = (context, definition) => html `
+  const template$1f = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <span
         class="content"
@@ -22054,7 +22054,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Chip, StartEnd);
   const nimbleChip = Chip.compose({
       baseName: 'chip',
-      template: template$1e,
+      template: template$1f,
       styles: styles$1m,
       shadowOptions: {
           delegatesFocus: true
@@ -22111,7 +22111,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$1d = (context, definition) => html `
+  const template$1e = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -22206,7 +22206,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$1d,
+      template: template$1e,
       styles: styles$1l,
       shadowOptions: {
           delegatesFocus: true
@@ -22685,7 +22685,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  const template$1c = (context, definition) => html `
+  const template$1d = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -23460,7 +23460,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$1c,
+      template: template$1d,
       styles: styles$1i,
       shadowOptions: {
           delegatesFocus: true
@@ -23598,7 +23598,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$1b = html `
+  const template$1c = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -23746,7 +23746,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$1b,
+      template: template$1c,
       styles: styles$1h,
       baseClass: Dialog
   });
@@ -23895,7 +23895,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$1a = html `
+  const template$1b = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -24037,7 +24037,7 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$1a,
+      template: template$1b,
       styles: styles$1g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -27336,7 +27336,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$19 = (context, definition) => html `
+  const template$1a = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -27438,7 +27438,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$19,
+      template: template$1a,
       styles: styles$1e
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
@@ -27506,7 +27506,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$18 = html `
+  const template$19 = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -27648,7 +27648,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$18,
+      template: template$19,
       styles: styles$1d
   });
   DesignSystem.getOrCreate()
@@ -27676,7 +27676,7 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$17 = html `<template slot="mapping"></template>`;
+  const template$18 = html `<template slot="mapping"></template>`;
 
   const styles$1c = css `
     ${display$2('none')}
@@ -27694,7 +27694,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$17,
+      template: template$18,
       styles: styles$1c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
@@ -27765,7 +27765,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$17,
+      template: template$18,
       styles: styles$1c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
@@ -27789,7 +27789,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$17,
+      template: template$18,
       styles: styles$1c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
@@ -27806,7 +27806,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$17,
+      template: template$18,
       styles: styles$1c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
@@ -28109,7 +28109,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  const template$16 = () => html `
+  const template$17 = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -28197,7 +28197,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$16,
+      template: template$17,
       styles: styles$1b
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
@@ -28233,7 +28233,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$15 = html `
+  const template$16 = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -28483,7 +28483,7 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$15,
+      template: template$16,
       styles: styles$1a,
       shadowOptions: {
           delegatesFocus: true
@@ -28839,7 +28839,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$14 = (context, definition) => html `
+  const template$15 = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -28993,7 +28993,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$14,
+      template: template$15,
       styles: styles$18,
       shadowOptions: {
           delegatesFocus: true
@@ -29184,7 +29184,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$13 = html `
+  const template$14 = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -29224,7 +29224,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$13,
+      template: template$14,
       styles: styles$16,
       shadowOptions: {
           delegatesFocus: true
@@ -50241,7 +50241,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$12 = html `
+  const template$13 = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -50529,7 +50529,7 @@ img.ProseMirror-separator {
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$12,
+      template: template$13,
       styles: styles$14
   });
   DesignSystem.getOrCreate()
@@ -50537,7 +50537,7 @@ img.ProseMirror-separator {
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  const template$11 = html `
+  const template$12 = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -69512,7 +69512,7 @@ img.ProseMirror-separator {
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$11,
+      template: template$12,
       styles: styles$13,
       shadowOptions: {
           delegatesFocus: true
@@ -69522,7 +69522,7 @@ img.ProseMirror-separator {
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$10 = html `
+  const template$11 = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
@@ -69641,7 +69641,7 @@ img.ProseMirror-separator {
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$10,
+      template: template$11,
       styles: styles$12
   });
   DesignSystem.getOrCreate()
@@ -69984,7 +69984,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const template$$ = html `
+  const template$10 = html `
     <template role="progressbar">
         ${''
 /**
@@ -70031,7 +70031,7 @@ img.ProseMirror-separator {
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$$,
+      template: template$10,
       styles: styles$10
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
@@ -70048,7 +70048,7 @@ img.ProseMirror-separator {
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$_ = (context, definition) => html `
+  const template$$ = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -71260,7 +71260,7 @@ img.ProseMirror-separator {
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$_,
+      template: template$$,
       styles: styles$11,
       indicator: arrowExpanderDown16X16.data,
       end: html `
@@ -71286,7 +71286,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$Z = (context, definition) => html `
+  const template$_ = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -71408,7 +71408,7 @@ img.ProseMirror-separator {
   ], Step.prototype, "tabIndex", void 0);
   const nimbleStep = Step.compose({
       baseName: 'step',
-      template: template$Z,
+      template: template$_,
       styles: styles$$,
       shadowOptions: {
           delegatesFocus: true
@@ -71487,7 +71487,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$Y = html `
+  const template$Z = html `
     ${when(x => x.showScrollButtons, html `
         <${buttonTag}
             content-hidden
@@ -71632,7 +71632,7 @@ img.ProseMirror-separator {
   ], Stepper.prototype, "steps", void 0);
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
-      template: template$Y,
+      template: template$Z,
       styles: styles$_
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
@@ -71867,7 +71867,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const template$X = html `
+  const template$Y = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -71911,7 +71911,7 @@ img.ProseMirror-separator {
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$X,
+      template: template$Y,
       styles: styles$Z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
@@ -76064,7 +76064,7 @@ focus outline in that case.
     }
 `;
 
-  const template$W = html `
+  const template$X = html `
     <template role="columnheader"
         class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
@@ -76150,7 +76150,7 @@ focus outline in that case.
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$W,
+      template: template$X,
       styles: styles$V
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
@@ -76474,7 +76474,7 @@ focus outline in that case.
     }
 `;
 
-  const template$V = html `
+  const template$W = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
         @blur="${x => x.onCellBlur()}"
@@ -76571,7 +76571,7 @@ focus outline in that case.
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$V,
+      template: template$W,
       styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
@@ -76608,7 +76608,7 @@ focus outline in that case.
         `)}
     </${tableCellTag}>
 `;
-  const template$U = html `
+  const template$V = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -76984,7 +76984,7 @@ focus outline in that case.
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$U,
+      template: template$V,
       styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
@@ -77165,7 +77165,7 @@ focus outline in that case.
             }
         `));
 
-  const template$T = html `
+  const template$U = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -77341,7 +77341,7 @@ focus outline in that case.
   ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$T,
+      template: template$U,
       styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
@@ -77362,7 +77362,7 @@ focus outline in that case.
         <slot name="${x => x.slot}"></slot>
     </${tableHeaderTag}>
 `;
-  const template$S = html `
+  const template$T = html `
     <template
         role="treegrid"
         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
@@ -82735,7 +82735,7 @@ focus outline in that case.
   ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
-      template: template$S,
+      template: template$T,
       styles: styles$W
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
@@ -82752,7 +82752,7 @@ focus outline in that case.
 
   // Avoiding a wrapping <template> and be careful about starting and ending whitspace
   // so the template can be composed into other column header templates
-  const template$R = html `<span
+  const template$S = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -82848,7 +82848,7 @@ focus outline in that case.
     }
 `;
 
-  const template$Q = html `
+  const template$R = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -82940,7 +82940,7 @@ focus outline in that case.
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$Q,
+      template: template$R,
       styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
@@ -83018,7 +83018,7 @@ focus outline in that case.
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$P = html `
+  const template$Q = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -83051,7 +83051,7 @@ focus outline in that case.
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$P,
+      template: template$Q,
       styles: styles$O
   });
   DesignSystem.getOrCreate()
@@ -83296,7 +83296,7 @@ focus outline in that case.
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$R,
+      template: template$S,
       styles: styles$Q
   });
   DesignSystem.getOrCreate()
@@ -83335,7 +83335,7 @@ focus outline in that case.
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$P,
+      template: template$Q,
       styles: styles$O
   });
   DesignSystem.getOrCreate()
@@ -83343,7 +83343,7 @@ focus outline in that case.
       .register(tableColumnDateTextGroupHeaderView());
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
-  const template$O = html `
+  const template$P = html `
     <template
         class="
             ${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}
@@ -83461,7 +83461,7 @@ focus outline in that case.
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$O,
+      template: template$P,
       styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
@@ -83796,7 +83796,7 @@ focus outline in that case.
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$R,
+      template: template$S,
       styles: styles$Q
   });
   DesignSystem.getOrCreate()
@@ -83813,7 +83813,7 @@ focus outline in that case.
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$O,
+      template: template$P,
       styles: styles$N
   });
   DesignSystem.getOrCreate()
@@ -83915,7 +83915,7 @@ focus outline in that case.
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$P,
+      template: template$Q,
       styles: styles$O
   });
   DesignSystem.getOrCreate()
@@ -83968,7 +83968,7 @@ focus outline in that case.
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$R,
+      template: template$S,
       styles: styles$Q
   });
   DesignSystem.getOrCreate()
@@ -84085,7 +84085,7 @@ focus outline in that case.
     }
 `;
 
-  const template$N = html `${template$R}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$O = html `${template$S}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
@@ -84212,7 +84212,7 @@ focus outline in that case.
     }
 `;
 
-  const template$M = html `
+  const template$N = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -84356,7 +84356,7 @@ focus outline in that case.
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
-      template: template$M,
+      template: template$N,
       styles: styles$L
   });
   DesignSystem.getOrCreate()
@@ -84388,7 +84388,7 @@ focus outline in that case.
     }
 `;
 
-  const template$L = html `
+  const template$M = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -84475,7 +84475,7 @@ focus outline in that case.
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
-      template: template$L,
+      template: template$M,
       styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
@@ -84559,23 +84559,23 @@ focus outline in that case.
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
-      template: template$N,
+      template: template$O,
       styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnMapping());
 
-  const template$K = html `
+  const template$L = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$R}</template
+        >${template$S}</template
     >
 `;
 
   /** @internal */
   const cellViewMenuSlotName = 'menu-button-menu';
 
-  const template$J = html `
+  const template$K = html `
     ${when(x => x.showMenuButton, html `
         <${menuButtonTag}
             ${ref('menuButton')}
@@ -84669,7 +84669,7 @@ focus outline in that case.
   ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
-      template: template$J,
+      template: template$K,
       styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
@@ -84725,7 +84725,7 @@ focus outline in that case.
   ], TableColumnMenuButton.prototype, "menuSlot", void 0);
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
-      template: template$K,
+      template: template$L,
       styles: styles$Q
   });
   DesignSystem.getOrCreate()
@@ -84734,7 +84734,7 @@ focus outline in that case.
 
   // Avoiding a wrapping <template> and be careful about starting and ending whitespace
   // so the template can be composed into other column header templates
-  const template$I = html `<span
+  const template$J = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -84753,7 +84753,7 @@ focus outline in that case.
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$P,
+      template: template$Q,
       styles: styles$O
   });
   DesignSystem.getOrCreate()
@@ -84775,7 +84775,7 @@ focus outline in that case.
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$O,
+      template: template$P,
       styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
@@ -85316,7 +85316,7 @@ focus outline in that case.
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$I,
+      template: template$J,
       styles: styles$Q
   });
   DesignSystem.getOrCreate()
@@ -85335,7 +85335,7 @@ focus outline in that case.
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$O,
+      template: template$P,
       styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
@@ -85390,7 +85390,7 @@ focus outline in that case.
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$R,
+      template: template$S,
       styles: styles$Q
   });
   DesignSystem.getOrCreate()
@@ -85479,7 +85479,7 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$1j,
+      template: template$1k,
       styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
@@ -85516,7 +85516,7 @@ focus outline in that case.
     }
 `;
 
-  const template$H = (context, definition) => html `
+  const template$I = (context, definition) => html `
     <template slot="end">
         ${when(x => x.defaultSlottedElements.length > 0, html `
             <div class="separator"></div>
@@ -85548,7 +85548,7 @@ focus outline in that case.
   ], TabsToolbar.prototype, "defaultSlottedElements", void 0);
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
-      template: template$H,
+      template: template$I,
       styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
@@ -85757,7 +85757,7 @@ focus outline in that case.
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
 `);
-  const template$G = () => html `
+  const template$H = () => html `
     ${labelTemplate$1}
     <div class="container">
         <textarea
@@ -85905,7 +85905,7 @@ focus outline in that case.
   const nimbleTextArea = TextArea.compose({
       baseName: 'text-area',
       baseClass: TextArea$1,
-      template: template$G,
+      template: template$H,
       styles: styles$G,
       shadowOptions: {
           delegatesFocus: true
@@ -86203,7 +86203,7 @@ focus outline in that case.
    * The template for the {@link @ni/fast-foundation#(TextField:class)} component.
    * @public
    */
-  const template$F = (context, definition) => html `
+  const template$G = (context, definition) => html `
     <template
         class="
             ${x => (x.readOnly ? 'readonly' : '')}
@@ -86292,7 +86292,7 @@ focus outline in that case.
   const nimbleTextField = TextField.compose({
       baseName: 'text-field',
       baseClass: TextField$1,
-      template: template$F,
+      template: template$G,
       styles: styles$F,
       shadowOptions: {
           delegatesFocus: true
@@ -86396,7 +86396,7 @@ focus outline in that case.
             }
         `));
 
-  const template$E = html `
+  const template$F = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
                 class="anchored-region"
@@ -86448,7 +86448,7 @@ focus outline in that case.
   const nimbleTooltip = Tooltip.compose({
       baseName: 'tooltip',
       baseClass: Tooltip$1,
-      template: template$E,
+      template: template$F,
       styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
@@ -86774,7 +86774,7 @@ focus outline in that case.
     }
 `;
 
-  const template$D = html `
+  const template$E = html `
     <template
         role="tree"
         ${ref('treeView')}
@@ -86870,7 +86870,7 @@ focus outline in that case.
   const nimbleTreeView = TreeView.compose({
       baseName: 'tree-view',
       baseClass: TreeView$1,
-      template: template$D,
+      template: template$E,
       styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
@@ -86987,7 +86987,7 @@ focus outline in that case.
   }
   const unitScaleByte = new UnitScaleByte();
 
-  const template$C = html `<template slot="unit"></template>`;
+  const template$D = html `<template slot="unit"></template>`;
 
   const styles$B = css `
     ${display$2('none')}
@@ -87017,7 +87017,7 @@ focus outline in that case.
   ], UnitByte.prototype, "binary", void 0);
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
-      template: template$C,
+      template: template$D,
       styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
@@ -87070,7 +87070,7 @@ focus outline in that case.
   }
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
-      template: template$C,
+      template: template$D,
       styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
@@ -102115,7 +102115,7 @@ focus outline in that case.
       return new Table(reader.readAll());
   }
 
-  const template$B = html `
+  const template$C = html `
     <div class="wafer-map-container">
         <svg class="svg-root">
             <g ${ref('zoomContainer')} transform=${x => x.transform.toString()}>
@@ -105173,7 +105173,7 @@ focus outline in that case.
   ], WaferMap.prototype, "colorScale", void 0);
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
-      template: template$B,
+      template: template$C,
       styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
@@ -105276,7 +105276,7 @@ focus outline in that case.
     }
 `;
 
-  const template$A = html `
+  const template$B = html `
 <div class="toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}">
     <slot name="toolbar" ${slotted({ property: 'slottedToolbarElements' })}></slot>
 </div>
@@ -105676,7 +105676,7 @@ focus outline in that case.
   ], ChatConversation.prototype, "slottedEndElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
-      template: template$A,
+      template: template$B,
       styles: styles$z
   });
   DesignSystem.getOrCreate()
@@ -105843,7 +105843,7 @@ focus outline in that case.
       cssCustomPropertyName: null
   }).withDefault(chatLabelDefaults.chatStopLabel);
 
-  const template$z = html `
+  const template$A = html `
 <div class="container">
     <section class="attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}">
         <slot
@@ -106089,7 +106089,7 @@ focus outline in that case.
   ], ChatInput.prototype, "slottedAttachmentsElements", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
-      template: template$z,
+      template: template$A,
       styles: styles$y,
       shadowOptions: {
           delegatesFocus: true
@@ -106182,7 +106182,7 @@ focus outline in that case.
     }
 `;
 
-  const template$y = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -106231,7 +106231,7 @@ focus outline in that case.
   applyMixins(ChatMessage, StartEnd);
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
-      template: template$y,
+      template: template$z,
       styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
@@ -106298,7 +106298,7 @@ focus outline in that case.
     }
 `;
 
-  const template$x = (context, definition) => html `
+  const template$y = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -106338,7 +106338,7 @@ focus outline in that case.
   applyMixins(ChatMessageInbound, StartEnd);
   const sprightChatMessageInbound = ChatMessageInbound.compose({
       baseName: 'chat-message-inbound',
-      template: template$x,
+      template: template$y,
       styles: styles$w
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
@@ -106378,7 +106378,7 @@ focus outline in that case.
     }
 `;
 
-  const template$w = () => html `
+  const template$x = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -106400,7 +106400,7 @@ focus outline in that case.
   }
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
-      template: template$w,
+      template: template$x,
       styles: styles$v
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
@@ -106436,7 +106436,7 @@ focus outline in that case.
     }
 `;
 
-  const template$v = () => html `
+  const template$w = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -106456,7 +106456,7 @@ focus outline in that case.
   }
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',
-      template: template$v,
+      template: template$w,
       styles: styles$u
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
@@ -106572,7 +106572,7 @@ focus outline in that case.
   <path class="nigel-chat-dark-0" d="M11.36,7.6l-.03.02c-1.12.61-2.04,1.53-2.65,2.65l-.02.03c-.1.18-.35.18-.45,0l-.02-.03c-.61-1.12-1.53-2.04-2.65-2.65l-.03-.02c-.18-.1-.18-.35,0-.45l.03-.02c1.12-.61,2.04-1.53,2.65-2.65l.02-.03c.1-.18.35-.18.45,0l.02.03c.61,1.12,1.53,2.04,2.65,2.65l.03.02c.18.1.18.35,0,.45Z"/>
 </svg>`;
 
-  const template$u = html `
+  const template$v = html `
     <div class="icon light-icon" aria-hidden="true" :innerHTML="${() => nigelChatLightData}"></div>
     <div class="icon dark-icon" aria-hidden="true" :innerHTML="${() => nigelChatDarkData}"></div>
 `;
@@ -106601,7 +106601,7 @@ focus outline in that case.
   }
   const sprightIconNigelChat = IconNigelChat.compose({
       baseName: 'icon-nigel-chat',
-      template: template$u,
+      template: template$v,
       styles: styles$s
   });
   DesignSystem.getOrCreate()
@@ -106609,7 +106609,7 @@ focus outline in that case.
       .register(sprightIconNigelChat());
   const iconNigelChatTag = 'spright-icon-nigel-chat';
 
-  const template$t = () => html `
+  const template$u = () => html `
     <div class="container">
         <div class="brand-icon">
             <slot name="brand-icon">
@@ -106655,7 +106655,7 @@ focus outline in that case.
   ], ChatMessageWelcome.prototype, "subtitleIsEmpty", void 0);
   const sprightChatMessageWelcome = ChatMessageWelcome.compose({
       baseName: 'chat-message-welcome',
-      template: template$t,
+      template: template$u,
       styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());
@@ -106677,12 +106677,12 @@ focus outline in that case.
    */
   class IconBreakpointConditional extends Icon {
   }
-  const template$s = html `
+  const template$t = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$6}"></div>
 `;
   const sprightIconBreakpointConditional = IconBreakpointConditional.compose({
       baseName: 'icon-breakpoint-conditional',
-      template: template$s,
+      template: template$t,
       styles: styles$1z
   });
   DesignSystem.getOrCreate()
@@ -106708,12 +106708,12 @@ focus outline in that case.
    */
   class IconBreakpointDisabled extends Icon {
   }
-  const template$r = html `
+  const template$s = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$5}"></div>
 `;
   const sprightIconBreakpointDisabled = IconBreakpointDisabled.compose({
       baseName: 'icon-breakpoint-disabled',
-      template: template$r,
+      template: template$s,
       styles: styles$1z
   });
   DesignSystem.getOrCreate()
@@ -106738,12 +106738,12 @@ focus outline in that case.
    */
   class IconBreakpointEnabled extends Icon {
   }
-  const template$q = html `
+  const template$r = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$4}"></div>
 `;
   const sprightIconBreakpointEnabled = IconBreakpointEnabled.compose({
       baseName: 'icon-breakpoint-enabled',
-      template: template$q,
+      template: template$r,
       styles: styles$1z
   });
   DesignSystem.getOrCreate()
@@ -106768,12 +106768,12 @@ focus outline in that case.
    */
   class IconBreakpointExecutionPointer extends Icon {
   }
-  const template$p = html `
+  const template$q = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$3}"></div>
 `;
   const sprightIconBreakpointExecutionPointer = IconBreakpointExecutionPointer.compose({
       baseName: 'icon-breakpoint-execution-pointer',
-      template: template$p,
+      template: template$q,
       styles: styles$1z
   });
   DesignSystem.getOrCreate()
@@ -106802,12 +106802,12 @@ focus outline in that case.
    */
   class IconBreakpointHitDisabled extends Icon {
   }
-  const template$o = html `
+  const template$p = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$2}"></div>
 `;
   const sprightIconBreakpointHitDisabled = IconBreakpointHitDisabled.compose({
       baseName: 'icon-breakpoint-hit-disabled',
-      template: template$o,
+      template: template$p,
       styles: styles$1z
   });
   DesignSystem.getOrCreate()
@@ -106837,12 +106837,12 @@ focus outline in that case.
    */
   class IconBreakpointHit extends Icon {
   }
-  const template$n = html `
+  const template$o = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$1}"></div>
 `;
   const sprightIconBreakpointHit = IconBreakpointHit.compose({
       baseName: 'icon-breakpoint-hit',
-      template: template$n,
+      template: template$o,
       styles: styles$1z
   });
   DesignSystem.getOrCreate()
@@ -106868,12 +106868,12 @@ focus outline in that case.
    */
   class IconBreakpointHover extends Icon {
   }
-  const template$m = html `
+  const template$n = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData}"></div>
 `;
   const sprightIconBreakpointHover = IconBreakpointHover.compose({
       baseName: 'icon-breakpoint-hover',
-      template: template$m,
+      template: template$n,
       styles: styles$1z
   });
   DesignSystem.getOrCreate()
@@ -106899,7 +106899,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
-      template: template$1n,
+      template: template$1o,
       styles: styles$r
   });
   DesignSystem.getOrCreate()
@@ -106924,7 +106924,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
-      template: template$1n,
+      template: template$1o,
       styles: styles$q
   });
   DesignSystem.getOrCreate()
@@ -106949,7 +106949,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
-      template: template$1n,
+      template: template$1o,
       styles: styles$p
   });
   DesignSystem.getOrCreate()
@@ -106974,7 +106974,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
-      template: template$1n,
+      template: template$1o,
       styles: styles$o
   });
   DesignSystem.getOrCreate()
@@ -106999,7 +106999,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemSquareListCog = IconWorkItemSquareListCog.compose({
       baseName: 'icon-work-item-square-list-cog',
-      template: template$1n,
+      template: template$1o,
       styles: styles$n
   });
   DesignSystem.getOrCreate()
@@ -107024,7 +107024,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemUserHelmetSafety = IconWorkItemUserHelmetSafety.compose({
       baseName: 'icon-work-item-user-helmet-safety',
-      template: template$1n,
+      template: template$1o,
       styles: styles$m
   });
   DesignSystem.getOrCreate()
@@ -107049,7 +107049,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemWrenchHammer = IconWorkItemWrenchHammer.compose({
       baseName: 'icon-work-item-wrench-hammer',
-      template: template$1n,
+      template: template$1o,
       styles: styles$l
   });
   DesignSystem.getOrCreate()
@@ -107108,7 +107108,7 @@ focus outline in that case.
     }
 `;
 
-  const template$l = html `<slot></slot>`;
+  const template$m = html `<slot></slot>`;
 
   /**
    * A Spright demo component (not for production use)
@@ -107117,7 +107117,7 @@ focus outline in that case.
   }
   const sprightRectangle = Rectangle.compose({
       baseName: 'rectangle',
-      template: template$l,
+      template: template$m,
       styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightRectangle());
@@ -107251,7 +107251,7 @@ focus outline in that case.
             }
         `));
 
-  const template$k = html `
+  const template$l = html `
     <details
         class="accordion-item-details"
         ?open="${x => x.expanded}"
@@ -107302,7 +107302,7 @@ focus outline in that case.
   ], FvAccordionItem.prototype, "appearance", void 0);
   const okFvAccordionItem = FvAccordionItem.compose({
       baseName: 'fv-accordion-item',
-      template: template$k,
+      template: template$l,
       styles: styles$j
   });
   DesignSystem.getOrCreate()
@@ -107669,7 +107669,7 @@ focus outline in that case.
         </div>
     </div>
 `;
-  const template$j = html `
+  const template$k = html `
     ${when(x => x.interactionMode === FvCardInteractionMode.card, html `
             <${cardButtonTag}
                 class="card-shell card-button-shell"
@@ -107817,7 +107817,7 @@ focus outline in that case.
   ], FvCard.prototype, "hasFooterEndContent", void 0);
   const okFvCard = FvCard.compose({
       baseName: 'fv-card',
-      template: template$j,
+      template: template$k,
       styles: styles$i
   });
   DesignSystem.getOrCreate()
@@ -107904,7 +107904,7 @@ focus outline in that case.
     }
 `;
 
-  const template$i = html `
+  const template$j = html `
     <div class="field">
         <span class="marker" aria-hidden="true"></span>
         <div class="content">
@@ -108050,7 +108050,7 @@ focus outline in that case.
   ], FvBulkEditField.prototype, "controls", void 0);
   const okFvBulkEditField = FvBulkEditField.compose({
       baseName: 'fv-bulk-edit-field',
-      template: template$i,
+      template: template$j,
       styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvBulkEditField());
@@ -108303,7 +108303,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$h = html `
+  const template$i = html `
     <div class="chip-selector">
         ${when(x => x.label.length > 0, html `
                 <label id="${x => x.labelId}" class="label" for="${x => x.inputId}">
@@ -108793,7 +108793,7 @@ focus outline in that case.
   ], FvChipSelector.prototype, "field", void 0);
   const okFvChipSelector = FvChipSelector.compose({
       baseName: 'fv-chip-selector',
-      template: template$h,
+      template: template$i,
       styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvChipSelector());
@@ -108850,7 +108850,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$g = html `
+  const template$h = html `
     <button
         id="${x => x.tooltipAnchorId}"
         class="context-help-trigger"
@@ -108898,7 +108898,7 @@ focus outline in that case.
   ], FvContextHelp.prototype, "iconVisible", void 0);
   const okFvContextHelp = FvContextHelp.compose({
       baseName: 'fv-context-help',
-      template: template$g,
+      template: template$h,
       styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvContextHelp());
@@ -108965,7 +108965,7 @@ focus outline in that case.
     }
 `;
 
-  const template$f = html `
+  const template$g = html `
     ${when(x => x.message !== undefined, html `
             <${bannerTag}
                 :open="${x => x.message !== undefined}"
@@ -109086,7 +109086,7 @@ focus outline in that case.
   ], FvEditCommitBar.prototype, "summary", null);
   const okFvEditCommitBar = FvEditCommitBar.compose({
       baseName: 'fv-edit-commit-bar',
-      template: template$f,
+      template: template$g,
       styles: styles$e
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvEditCommitBar());
@@ -109208,7 +109208,7 @@ focus outline in that case.
 `;
 
   const queryTokenTemplate = html `${when(x => x.kind === 'predicate', html `<span class="query-expression"><b>${x => (x.kind === 'predicate' ? x.field : '')}</b> ${x => (x.kind === 'predicate' ? x.operator : '')}<b>${x => (x.kind === 'predicate' ? x.value : '')}</b></span>`)}${when(x => x.kind === 'logic', html `<span class="logical-operator">${x => (x.kind === 'logic' ? x.text : '')}</span>`)}${when(x => x.kind === 'group', html `<span class="compound-expression-container">${x => (x.kind === 'group' ? x.text : '')}</span>`)}`;
-  const template$e = html `
+  const template$f = html `
     <div class="filter-bar" role="group" aria-label="${x => x.label}">
         <button
             ${ref('editButton')}
@@ -109347,7 +109347,7 @@ focus outline in that case.
   ], FvFilterBar.prototype, "queryTokens", null);
   const okFvFilterBar = FvFilterBar.compose({
       baseName: 'fv-filter-bar',
-      template: template$e,
+      template: template$f,
       styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvFilterBar());
@@ -109449,7 +109449,7 @@ focus outline in that case.
     }
 `;
 
-  const template$d = html `
+  const template$e = html `
     <div class="item" part="item">
         <div class="text" part="text">
             <div class="title" part="title">${x => x.titleText}</div>
@@ -109550,7 +109550,7 @@ focus outline in that case.
   ], FvMasterDetailListItem.prototype, "hasStatusSlotContent", void 0);
   const okFvMasterDetailListItem = FvMasterDetailListItem.compose({
       baseName: 'fv-master-detail-list-item',
-      template: template$d,
+      template: template$e,
       styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailListItem());
@@ -109621,7 +109621,7 @@ focus outline in that case.
     }
 `;
 
-  const template$c = html `
+  const template$d = html `
     <div class="master-detail-list">
         <div class="filter-row">
             <input
@@ -109815,7 +109815,7 @@ focus outline in that case.
   ], FvMasterDetailList.prototype, "items", void 0);
   const okFvMasterDetailList = FvMasterDetailList.compose({
       baseName: 'fv-master-detail-list',
-      template: template$c,
+      template: template$d,
       styles: styles$b,
       shadowOptions: {
           delegatesFocus: true
@@ -109931,9 +109931,32 @@ focus outline in that case.
         }
 
         .split-button-primary {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             padding: 0 ${standardPadding};
             padding-inline-end: ${mediumPadding};
             white-space: nowrap;
+            text-decoration: none;
+        }
+
+        slot[name='start']::slotted(*),
+        slot[name='end']::slotted(*) {
+            flex-shrink: 0;
+            color: currentColor;
+            ${iconColor.cssCustomProperty}: currentColor;
+        }
+
+        slot[name='start']::slotted(*) {
+            margin-inline-end: ${smallPadding};
+        }
+
+        slot[name='end']::slotted(*) {
+            margin-inline-start: ${smallPadding};
+        }
+
+        .split-button-primary-disabled {
+            cursor: default;
         }
 
         .split-button-toggle {
@@ -109967,21 +109990,21 @@ focus outline in that case.
     }
 
     @layer hover {
-        .split-button-primary:enabled:hover,
+        .split-button-primary:is(:enabled, [href]):hover,
         .split-button-toggle:enabled:hover {
             border-color: ${borderHoverColor};
             box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
             z-index: 1;
         }
 
-        .split-button-primary:enabled:hover + .split-button-toggle::after,
+        .split-button-primary:is(:enabled, [href]):hover + .split-button-toggle::after,
         .split-button-toggle:enabled:hover::after {
             visibility: hidden;
         }
     }
 
     @layer focusVisible {
-        .split-button-primary:enabled:focus-visible,
+        .split-button-primary:is(:enabled, [href]):focus-visible,
         .split-button-toggle:enabled:focus-visible {
             border-color: ${borderHoverColor};
             box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
@@ -110000,7 +110023,7 @@ focus outline in that case.
     }
 
     @layer active {
-        .split-button-primary:enabled:active,
+        .split-button-primary:is(:enabled, [href]):active,
         .split-button-toggle:enabled:active,
         :host([open]) .split-button-toggle {
             border-color: ${borderHoverColor};
@@ -110018,7 +110041,7 @@ focus outline in that case.
             visibility: hidden;
         }
 
-        :host([appearance='block']) .split-button-primary:enabled:active,
+        :host([appearance='block']) .split-button-primary:is(:enabled, [href]):active,
         :host([appearance='block']) .split-button-toggle:enabled:active,
         :host([appearance='block'][open]) .split-button-toggle {
             background-color: ${applicationBackgroundColor};
@@ -110036,6 +110059,14 @@ focus outline in that case.
             --ni-private-ok-fv-split-button-color: ${buttonLabelDisabledFontColor};
         }
 
+        :host([disabled][appearance='block']) {
+            --ni-private-ok-fv-split-button-background-image: linear-gradient(
+                rgba(${borderRgbPartialColor}, 0.1),
+                rgba(${borderRgbPartialColor}, 0.1)
+            );
+            --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.1);
+        }
+
         :host([disabled][appearance='outline']) {
             --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.3);
         }
@@ -110044,6 +110075,15 @@ focus outline in that case.
         :host([disabled]) .split-button-toggle {
             cursor: default;
             box-shadow: none;
+            background-image: none;
+            background-size: 100% 100%;
+        }
+
+        :host([disabled]) slot[name='start']::slotted(*),
+        :host([disabled]) slot[name='end']::slotted(*),
+        :host([disabled]) .split-button-toggle > * {
+            opacity: 0.3;
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
 
         :host([disabled][appearance='ghost']) .split-button-primary,
@@ -110055,7 +110095,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$b = html `
+  const template$c = html `
     <div
         class="split-button-container"
     >
@@ -110068,7 +110108,9 @@ focus outline in that case.
     return true;
 }}"
         >
-            ${x => x.label}
+            <slot name="start"></slot>
+            <span>${x => x.label}</span>
+            <slot name="end"></slot>
         </button>
         <button
             class="split-button-toggle"
@@ -110227,240 +110269,19 @@ focus outline in that case.
   ], FvSplitButton.prototype, "region", void 0);
   const okFvSplitButton = FvSplitButton.compose({
       baseName: 'fv-split-button',
-      template: template$b,
+      template: template$c,
       styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButton());
 
-  const styles$9 = css `
-    @layer base, hover, focusVisible, active, disabled, top;
-
-    @layer base {
-        ${display('inline-block')}
-
-        :host {
-            --ni-private-ok-fv-split-button-anchor-background-image: none;
-            --ni-private-ok-fv-split-button-anchor-background-size: 100% 100%;
-            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: 100% 100%;
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${actionRgbPartialColor}, 0.3);
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelFontColor};
-            position: relative;
-            height: ${controlHeight};
-            vertical-align: middle;
-        }
-
-        :host([appearance='ghost']) {
-            --ni-private-ok-fv-split-button-anchor-border: transparent;
-        }
-
-        :host([appearance='block']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                rgba(${borderRgbPartialColor}, 0.1),
-                rgba(${borderRgbPartialColor}, 0.1)
-            );
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.1);
-            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);
-        }
-
-        :host([appearance='outline'][appearance-variant='primary']) {
-            --ni-private-ok-fv-split-button-anchor-border: rgb(${actionRgbPartialColor});
-        }
-
-        :host([appearance='outline'][appearance-variant='accent']) {
-            --ni-private-ok-fv-split-button-anchor-border: ${buttonBorderAccentOutlineColor};
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentOutlineFontColor};
-        }
-
-        :host([appearance='block'][appearance-variant='primary']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                ${buttonFillPrimaryColor},
-                ${buttonFillPrimaryColor}
-            );
-            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillPrimaryColor};
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonPrimaryFontColor};
-        }
-
-        :host([appearance='block'][appearance-variant='accent']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                ${buttonFillAccentColor},
-                ${buttonFillAccentColor}
-            );
-            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillAccentColor};
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentBlockFontColor};
-        }
-
-        .split-button-container {
-            position: relative;
-            display: inline-flex;
-            align-items: stretch;
-            height: 100%;
-        }
-
-        .split-button-primary,
-        .split-button-toggle {
-            appearance: none;
-            position: relative;
-            z-index: 0;
-            height: 100%;
-            box-sizing: border-box;
-            margin: 0;
-            border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-anchor-border);
-            background-color: transparent;
-            background-image: var(--ni-private-ok-fv-split-button-anchor-background-image);
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size);
-            color: var(--ni-private-ok-fv-split-button-anchor-color);
-            fill: currentcolor;
-            font: ${buttonLabelFont};
-            cursor: pointer;
-            outline: none;
-            transition:
-                box-shadow ${smallDelay} ease-in-out,
-                border-color ${smallDelay} ease-in-out,
-                background-size ${smallDelay} ease-in-out;
-        }
-
-        .split-button-primary {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0 ${standardPadding};
-            border-inline-end-color: transparent;
-            white-space: nowrap;
-            text-decoration: none;
-        }
-
-        .split-button-primary::before,
-        .split-button-toggle::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            pointer-events: none;
-            outline: 0px solid transparent;
-            outline-offset: -3px;
-            transition: outline ${smallDelay} ease-in-out;
-        }
-
-        .split-button-toggle {
-            width: ${controlHeight};
-            min-width: ${controlHeight};
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            border-inline-start-color: var(--ni-private-ok-fv-split-button-anchor-border);
-            margin-inline-start: calc(-1 * ${borderWidth});
-        }
-
-        .split-button-toggle > * {
-            color: currentColor;
-            ${iconColor.cssCustomProperty}: currentColor;
-        }
-
-        .split-button-primary-disabled {
-            cursor: default;
-        }
-
-        :host([appearance='ghost']) .split-button-primary,
-        :host([appearance='ghost']) .split-button-toggle {
-            border-color: transparent;
-            box-shadow: none;
-        }
-
-        slot[name='menu']::slotted(*) {
-            min-width: 100%;
-            margin: 4px 0 0;
-        }
-    }
-
-    @layer hover {
-        .split-button-primary:hover,
-        .split-button-toggle:hover {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);
-            z-index: 1;
-        }
-
-        :host([appearance='ghost']) .split-button-primary:hover,
-        :host([appearance='ghost']) .split-button-toggle:hover {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-        }
-    }
-
-    @layer focusVisible {
-        .split-button-primary:focus-visible,
-        .split-button-toggle:focus-visible {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);
-            z-index: 1;
-        }
-
-        .split-button-primary:focus-visible::before,
-        .split-button-toggle:focus-visible::before {
-            outline: ${borderWidth} solid ${borderHoverColor};
-        }
-
-        :host([appearance='ghost']) .split-button-primary:focus-visible,
-        :host([appearance='ghost']) .split-button-toggle:focus-visible {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-        }
-    }
-
-    @layer active {
-        .split-button-primary:active,
-        .split-button-toggle:active,
-        :host([open]) .split-button-toggle {
-            border-color: ${borderHoverColor};
-            box-shadow: none;
-            background-image: linear-gradient(${fillSelectedColor}, ${fillSelectedColor});
-            background-size: calc(100% - 2px) calc(100% - 2px);
-        }
-
-        :host([appearance='block']) .split-button-primary:active,
-        :host([appearance='block']) .split-button-toggle:active,
-        :host([appearance='block'][open]) .split-button-toggle {
-            background-size: calc(100% - 4px) calc(100% - 4px);
-        }
-
-        :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,
-        :host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,
-        :host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {
-            color: ${buttonAccentOutlineFontColor};
-        }
-    }
-
-    @layer disabled {
-        :host([disabled]) {
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelDisabledFontColor};
-        }
-
-        :host([disabled][appearance='outline']) {
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.3);
-        }
-
-        :host([disabled]) .split-button-primary,
-        :host([disabled]) .split-button-toggle {
-            cursor: default;
-            box-shadow: none;
-        }
-
-        :host([disabled][appearance='ghost']) .split-button-primary,
-        :host([disabled][appearance='ghost']) .split-button-toggle {
-            border-color: transparent;
-        }
-    }
-
-    @layer top {}
+  const primaryContent = html `
+    <slot name="start"></slot>
+    <span>${x => x.label}</span>
+    <slot name="end"></slot>
 `;
-
-  const template$a = html `
+  const template$b = html `
     <div
         class="split-button-container"
-        ${ref('splitButtonContainer')}
     >
         ${when(x => !x.disabled && x.href.length > 0, html `
                 <a
@@ -110474,7 +110295,7 @@ focus outline in that case.
     return true;
 }}"
                 >
-                    ${x => x.label}
+                    ${primaryContent}
                 </a>
             `)}
         ${when(x => x.disabled || x.href.length === 0, html `
@@ -110482,11 +110303,12 @@ focus outline in that case.
                     class="split-button-primary split-button-primary-disabled"
                     aria-disabled="${x => x.disabled}"
                 >
-                    ${x => x.label}
+                    ${primaryContent}
                 </span>
             `)}
         <button
             class="split-button-toggle"
+            ${ref('toggleButton')}
             type="button"
             ?disabled="${x => x.disabled}"
             aria-label="${x => `More actions for ${x.label}`}"
@@ -110506,9 +110328,9 @@ focus outline in that case.
                 auto-update-mode="auto"
                 horizontal-inset
                 horizontal-positioning-mode="dynamic"
+                horizontal-default-position="end"
                 vertical-positioning-mode="locktodefault"
                 vertical-default-position="bottom"
-                horizontal-scaling="anchor"
                 ${ref('region')}
             >
                 <span part="menu">
@@ -110600,14 +110422,14 @@ focus outline in that case.
               prev.removeEventListener('change', this.menuChangeHandler);
           }
           if (this.region) {
-              this.region.anchorElement = this.splitButtonContainer ?? this;
+              this.region.anchorElement = this.toggleButton ?? this;
               this.region.addEventListener('change', this.menuChangeHandler, { capture: true });
           }
       }
       /** @internal */
-      splitButtonContainerChanged() {
+      toggleButtonChanged() {
           if (this.region) {
-              this.region.anchorElement = this.splitButtonContainer ?? this;
+              this.region.anchorElement = this.toggleButton ?? this;
           }
       }
       setOpen(nextOpen) {
@@ -110651,18 +110473,18 @@ focus outline in that case.
   ], FvSplitButtonAnchor.prototype, "appearanceVariant", void 0);
   __decorate([
       observable
-  ], FvSplitButtonAnchor.prototype, "splitButtonContainer", void 0);
+  ], FvSplitButtonAnchor.prototype, "toggleButton", void 0);
   __decorate([
       observable
   ], FvSplitButtonAnchor.prototype, "region", void 0);
   const okFvSplitButtonAnchor = FvSplitButtonAnchor.compose({
       baseName: 'fv-split-button-anchor',
-      template: template$a,
-      styles: styles$9
+      template: template$b,
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButtonAnchor());
 
-  const styles$8 = css `
+  const styles$9 = css `
     ${display('block')}
 
     .sticky-header {
@@ -110681,7 +110503,7 @@ focus outline in that case.
     }
 `;
 
-  const template$9 = html `
+  const template$a = html `
     <div class="header" part="header">
         <slot
             name="header"
@@ -110781,12 +110603,12 @@ focus outline in that case.
   ], FvStickyHeader.prototype, "showStickyHeader", void 0);
   const okFvStickyHeader = FvStickyHeader.compose({
       baseName: 'fv-sticky-header',
-      template: template$9,
-      styles: styles$8
+      template: template$a,
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvStickyHeader());
 
-  const styles$7 = css `
+  const styles$8 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -110854,7 +110676,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$8 = html `
+  const template$9 = html `
     <section class="summary-panel" part="panel">
         <div
             ${ref('summaryItems')}
@@ -110998,12 +110820,12 @@ focus outline in that case.
   ], FvSummaryPanel.prototype, "editItemsButtonLabel", void 0);
   const okFvSummaryPanel = FvSummaryPanel.compose({
       baseName: 'fv-summary-panel',
-      template: template$8,
-      styles: styles$7
+      template: template$9,
+      styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanel());
 
-  const styles$6 = css `
+  const styles$7 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -111161,7 +110983,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$7 = html `
+  const template$8 = html `
     <${cardButtonTag}
         class="summary-panel-tile"
         ?selected="${x => x.selected}"
@@ -111227,12 +111049,12 @@ focus outline in that case.
   ], FvSummaryPanelTile.prototype, "textPosition", void 0);
   const okFvSummaryPanelTile = FvSummaryPanelTile.compose({
       baseName: 'fv-summary-panel-tile',
-      template: template$7,
-      styles: styles$6
+      template: template$8,
+      styles: styles$7
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanelTile());
 
-  const styles$5 = css `
+  const styles$6 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -111410,7 +111232,7 @@ focus outline in that case.
     }
 `;
 
-  const template$6 = html `
+  const template$7 = html `
     <div class="search-input-container">
         <span class="search-input-icon" aria-hidden="true">
             <${iconMagnifyingGlassTag}></${iconMagnifyingGlassTag}>
@@ -111481,15 +111303,15 @@ focus outline in that case.
   const okFvSearchInput = FvSearchInput.compose({
       baseName: 'fv-search-input',
       baseClass: TextField$1,
-      template: template$6,
-      styles: styles$5,
+      template: template$7,
+      styles: styles$6,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSearchInput());
 
-  const styles$4 = css `
+  const styles$5 = css `
     @layer base, hover, focusVisible, active;
 
     @layer base {
@@ -111548,7 +111370,7 @@ focus outline in that case.
     }
 `;
 
-  const template$5 = html `
+  const template$6 = html `
     <div
         class="splitter"
         @pointerdown="${(x, c) => x.handlePointerDown(c.event)}"
@@ -111811,8 +111633,8 @@ focus outline in that case.
   ], FvSplitter.prototype, "resizing", void 0);
   const okFvSplitter = FvSplitter.compose({
       baseName: 'fv-splitter',
-      template: template$5,
-      styles: styles$4,
+      template: template$6,
+      styles: styles$5,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -111820,7 +111642,7 @@ focus outline in that case.
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitter());
   const fvSplitterTag = 'ok-fv-splitter';
 
-  const styles$3 = css `
+  const styles$4 = css `
     ${display('block')}
 
     :host {
@@ -111860,7 +111682,7 @@ focus outline in that case.
     }
 `;
 
-  const template$4 = html `
+  const template$5 = html `
     <div class="layout" style="grid-template-columns: ${x => x.gridTemplateColumns}">
         <div class="pane primary" id="${x => x.primaryPaneId}">
             <slot name="primary"></slot>
@@ -112066,10 +111888,326 @@ focus outline in that case.
   ], FvSplitLayout.prototype, "gridTemplateColumns", null);
   const okFvSplitLayout = FvSplitLayout.compose({
       baseName: 'fv-split-layout',
+      template: template$5,
+      styles: styles$4
+  });
+  DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitLayout());
+
+  const styles$3 = css `
+    ${styles$15}
+
+    :host {
+        display: block;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .positioning-region {
+        position: relative;
+        overflow-x: auto;
+    }
+
+    .unreserved {
+        position: absolute;
+        inset-inline-end: 0;
+    }
+
+    [part='start'],
+    [part='end'],
+    nimble-menu-button,
+    ::slotted(*) {
+        flex-shrink: 0;
+    }
+
+    [part='start'] {
+        margin: 0;
+        margin-inline-end: auto;
+    }
+
+    [part='end'] {
+        margin: 0;
+        margin-inline-start: auto;
+    }
+`;
+
+  const template$4 = (context, definition) => html `
+    <template
+        role="toolbar"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-orientation="horizontal"
+        @mousedown="${(x, c) => x.mouseDownHandler(c.event)}"
+        @focusin="${(x, c) => x.focusinHandler(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        ${children$1({ property: 'childItems', attributeFilter: ['disabled', 'hidden'], filter: elements(), subtree: true })}
+    >
+        <div class="positioning-region" part="positioning-region">
+            ${startSlotTemplate(context, definition)}
+            <slot ${slotted({ property: 'slottedItems', filter: elements() })}></slot>
+            ${endSlotTemplate(context, definition)}
+            <${menuButtonTag}
+                ${ref('overflowButton')}
+                hidden
+                appearance="ghost"
+                content-hidden
+                @keydown="${(x, c) => {
+    if (x.overflowButton.open) {
+        c.event.stopPropagation();
+    }
+    return true;
+}}"
+            >
+                <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
+                ${x => x.overflowLabel}
+                <${menuTag} slot="menu" ${ref('overflowMenu')}></${menuTag}>
+            </${menuButtonTag}>
+        </div>
+    </template>
+`;
+
+  /**
+   * A Nimble toolbar that automatically collapses declaratively configured actions.
+   */
+  class FvToolbar extends Toolbar {
+      constructor() {
+          super(...arguments);
+          this.overflowLabel = 'More actions';
+          /** @internal */
+          this.hasOverflow = false;
+          this.items = new Map();
+          this.resizeObserver = new ResizeObserver(() => this.scheduleLayout());
+          this.mutationObserver = new MutationObserver(records => {
+              for (const record of records) {
+                  const item = record.target instanceof Button ? this.items.get(record.target) : undefined;
+                  if (item && record.attributeName === 'hidden') {
+                      item.hidden = item.button.hidden;
+                  }
+                  if (item && record.attributeName === 'content-hidden') {
+                      item.contentHidden = item.button.contentHidden;
+                  }
+              }
+              this.scheduleLayout();
+          });
+          this.observedChildren = new Set();
+          this.frame = 0;
+          this.scheduleLayout = () => {
+              if (!this.isConnected || this.frame !== 0) {
+                  return;
+              }
+              this.frame = requestAnimationFrame(() => {
+                  this.frame = 0;
+                  this.updateLayout();
+              });
+          };
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          this.resizeObserver.observe(this);
+          this.observeMutations();
+          this.ownerDocument.fonts.addEventListener('loadingdone', this.scheduleLayout);
+          this.scheduleLayout();
+      }
+      disconnectedCallback() {
+          this.resizeObserver.disconnect();
+          this.mutationObserver.disconnect();
+          this.ownerDocument.fonts.removeEventListener('loadingdone', this.scheduleLayout);
+          cancelAnimationFrame(this.frame);
+          this.frame = 0;
+          for (const item of this.items.values()) {
+              this.restoreItem(item);
+          }
+          this.items.clear();
+          this.observedChildren.clear();
+          super.disconnectedCallback();
+      }
+      get allSlottedItems() {
+          return [
+              ...super.allSlottedItems,
+              ...(this.hasOverflow ? [this.overflowButton] : [])
+          ];
+      }
+      observeMutations() {
+          this.mutationObserver.observe(this, {
+              subtree: true,
+              childList: true,
+              characterData: true,
+              attributes: true,
+              attributeFilter: [
+                  'data-responsive', 'data-priority', 'disabled', 'hidden',
+                  'content-hidden', 'aria-label', 'slot', 'class', 'style'
+              ]
+          });
+      }
+      restoreItem(item) {
+          item.button.hidden = item.hidden;
+          item.button.toggleAttribute('content-hidden', item.contentHidden);
+          item.menuItem.remove();
+      }
+      syncItems() {
+          const buttons = Array.from(this.children).filter((child) => child instanceof Button && child.hasAttribute('data-responsive'));
+          for (const [button, item] of this.items) {
+              if (!buttons.includes(button)) {
+                  this.restoreItem(item);
+                  this.items.delete(button);
+              }
+          }
+          for (const button of buttons) {
+              const value = button.getAttribute('data-responsive')?.trim() ?? '';
+              const tokens = value.split(/\s+/);
+              const stages = ['label', 'icon', 'overflow'].filter(stage => tokens.includes(stage));
+              const priority = Number(button.getAttribute('data-priority') ?? 0);
+              if (stages.length === 0 || tokens.some(token => !stages.some(stage => stage === token))
+                  || !Number.isFinite(priority)
+                  || (stages.includes('icon') && !button.querySelector(':scope > [slot="start"]'))) {
+                  throw new Error('ok-fv-toolbar requires valid data-responsive stages, a finite data-priority, and a direct start-slot icon for icon-only actions.');
+              }
+              let item = this.items.get(button);
+              if (!item) {
+                  const menuItem = this.ownerDocument.createElement(menuItemTag);
+                  menuItem.addEventListener('change', () => {
+                      if (!button.disabled) {
+                          button.click();
+                      }
+                  });
+                  item = {
+                      button,
+                      stages,
+                      priority,
+                      hidden: button.hidden,
+                      contentHidden: button.contentHidden,
+                      menuItem
+                  };
+                  this.items.set(button, item);
+              }
+              item.stages = stages;
+              item.priority = priority;
+              item.menuItem.disabled = button.disabled;
+              const label = (button.getAttribute('aria-label')
+                  ?? Array.from(button.childNodes)
+                      .filter(node => node.nodeType === Node.TEXT_NODE
+                      || (node instanceof Element && !node.hasAttribute('slot')))
+                      .map(node => node.textContent).join('')).trim();
+              if (!label) {
+                  throw new Error('ok-fv-toolbar responsive actions require a text label or aria-label.');
+              }
+              if (item.menuItem.textContent !== label) {
+                  item.menuItem.textContent = label;
+              }
+          }
+          return buttons.map(button => this.items.get(button));
+      }
+      updateLayout() {
+          // Ignore our own presentation mutations, not application changes.
+          this.mutationObserver.disconnect();
+          try {
+              const menuFocus = this.shadowRoot?.activeElement;
+              const menuHadFocus = menuFocus && this.overflowButton.contains(menuFocus);
+              const previousMenuItems = Array.from(this.overflowMenu.children);
+              const items = this.syncItems();
+              const root = this.getRootNode();
+              const activeElement = root instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;
+              const focusedItem = items.find(item => item.button === activeElement);
+              for (const child of this.observedChildren) {
+                  if (child.parentElement !== this) {
+                      this.resizeObserver.unobserve(child);
+                      this.observedChildren.delete(child);
+                  }
+              }
+              for (const child of this.children) {
+                  if (!this.observedChildren.has(child)) {
+                      this.resizeObserver.observe(child);
+                      this.observedChildren.add(child);
+                  }
+              }
+              const overflow = new Set();
+              for (const item of items) {
+                  item.button.hidden = item.hidden;
+                  item.button.toggleAttribute('content-hidden', item.stages[0] === 'icon');
+                  if (!item.hidden && item.stages[0] === 'overflow') {
+                      overflow.add(item);
+                      item.button.hidden = true;
+                  }
+              }
+              this.showOverflow(overflow.size > 0);
+              const ordered = items.filter(item => !item.hidden).reverse()
+                  .sort((a, b) => a.priority - b.priority);
+              // ponytail: measure each transition; cache widths only if large toolbars make this costly.
+              for (const stage of ['icon', 'overflow']) {
+                  for (const item of ordered) {
+                      if (this.fits()) {
+                          break;
+                      }
+                      if (overflow.has(item) || !item.stages.includes(stage)) {
+                          continue;
+                      }
+                      if (stage === 'icon') {
+                          item.button.toggleAttribute('content-hidden', true);
+                      }
+                      else {
+                          item.button.hidden = true;
+                          overflow.add(item);
+                          this.showOverflow(true);
+                      }
+                  }
+              }
+              const overflowItems = items.filter(item => overflow.has(item));
+              const nextMenuItems = overflowItems.map(item => item.menuItem);
+              if (nextMenuItems.length !== previousMenuItems.length
+                  || nextMenuItems.some((item, index) => previousMenuItems[index] !== item)) {
+                  this.overflowButton.open = false;
+                  this.overflowMenu.replaceChildren(...nextMenuItems);
+              }
+              if (!this.hasOverflow) {
+                  this.overflowButton.open = false;
+              }
+              this.overflowButton.hidden = !this.hasOverflow;
+              this.overflowButton.classList.remove('unreserved');
+              this.reduceFocusableElements();
+              if (focusedItem && overflow.has(focusedItem)) {
+                  this.overflowButton.focus();
+              }
+              else if (menuHadFocus) {
+                  if (this.hasOverflow) {
+                      if (this.overflowButton.open && menuFocus instanceof HTMLElement && menuFocus.isConnected) {
+                          menuFocus.focus();
+                      }
+                      else {
+                          this.overflowButton.focus();
+                      }
+                  }
+                  else {
+                      Array.from(this.querySelectorAll('[tabindex="0"]'))
+                          .find(control => !control.closest('[hidden], [disabled]'))?.focus();
+                  }
+              }
+          }
+          finally {
+              this.observeMutations();
+          }
+      }
+      showOverflow(show) {
+          this.hasOverflow = show;
+          // Remove the trigger from width calculations without hiding its focused menu.
+          this.overflowButton.classList.toggle('unreserved', !show);
+          this.overflowButton.hidden = false;
+      }
+      fits() {
+          const region = this.shadowRoot.querySelector('.positioning-region');
+          return region.scrollWidth <= region.clientWidth;
+      }
+  }
+  __decorate([
+      attr({ attribute: 'overflow-label' })
+  ], FvToolbar.prototype, "overflowLabel", void 0);
+  __decorate([
+      observable
+  ], FvToolbar.prototype, "hasOverflow", void 0);
+  const okFvToolbar = FvToolbar.compose({
+      baseName: 'fv-toolbar',
       template: template$4,
       styles: styles$3
   });
-  DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitLayout());
+  DesignSystem.getOrCreate().withPrefix('ok').register(okFvToolbar());
 
   const styles$2 = css `
     ${display('inline-block')}
@@ -112620,7 +112758,7 @@ focus outline in that case.
 
   const template = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$R}</template
+        >${template$S}</template
     >
 `;