@ni/ok-components 1.10.2 → 1.11.0

package/dist/all-components-bundle.js

@@ -14916,6 +14916,7 @@
       linkActiveProminentFont: 'link-active-prominent-font',
       placeholderFont: 'placeholder-font',
       bodyFont: 'body-font',
+      codeFont: 'code-font',
       bodyEmphasizedFont: 'body-emphasized-font',
       bodyPlus1Font: 'body-plus-1-font',
       bodyPlus1EmphasizedFont: 'body-plus-1-emphasized-font',
@@ -14980,9 +14981,9 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$1n = html `<slot></slot>`;
+  const template$1q = html `<slot></slot>`;
 
-  const styles$1D = css `
+  const styles$1G = css `
     ${display$2('contents')}
 
     :host {
@@ -15109,8 +15110,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$1D,
-      template: template$1n
+      styles: styles$1G,
+      template: template$1q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16324,6 +16325,8 @@
   const ControlLabel1Weight = "600";
   const BodyFamily = "Source Sans Pro";
   const BodyWeight = "400";
+  const CodeFamily = "Noto Sans Mono";
+  const CodeWeight = "400";
   const Body2Family = "Source Sans Pro";
   const Body2Weight = "400";
   const GroupLabel1Family = "Source Sans Pro";
@@ -16359,6 +16362,7 @@
   const Title2Size = "22px";
   const ControlLabel1Size = "11px";
   const BodySize = "14px";
+  const CodeSize = "13px";
   const Body2Size = "16px";
   const GroupLabel1Size = "11px";
   const ButtonLabel1Size = "14px";
@@ -16537,6 +16541,7 @@
       ...createFont('linkActiveProminent', createThemeColor(DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.75)), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight),
       ...createFont('placeholder', hexToRgbaCssThemeColor(alias.defaultFontColor, 0.6, 0.6, 0.6), hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight),
       ...createFont('body', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight),
+      ...createFont('code', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), CodeFamily, CodeWeight, CodeSize, BodyLineHeight),
       ...createFont('bodyEmphasized', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight),
       ...createFont('bodyPlus1', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), Body2Family, Body2Weight, Body2Size, Body2LineHeight),
       ...createFont('bodyPlus1Emphasized', alias.defaultFontColor, hexToRgbaCssThemeColor(alias.defaultFontColor, 0.3, 0.3, 0.3), BodyEmphasized2Family, BodyEmphasized2Weight, BodyEmphasized2Size, BodyEmphasized2LineHeight),
@@ -16683,7 +16688,7 @@
   const mediumPadding = createStringToken(tokenNames.mediumPadding, tokenValues.mediumPadding);
   const standardPadding = createStringToken(tokenNames.standardPadding, tokenValues.standardPadding);
   const largePadding = createStringToken(tokenNames.largePadding, tokenValues.largePadding);
-  createStringToken(tokenNames.labelHeight, tokenValues.labelHeight);
+  const labelHeight = createStringToken(tokenNames.labelHeight, tokenValues.labelHeight);
   const borderWidth = createStringToken(tokenNames.borderWidth, tokenValues.borderWidth);
   const dividerWidth = createStringToken(tokenNames.dividerWidth, tokenValues.dividerWidth);
   const iconSize = createStringToken(tokenNames.iconSize, tokenValues.iconSize);
@@ -16720,6 +16725,7 @@
   const [linkActiveProminentFont, linkActiveProminentFontColor] = createFontTokens(tokenNames.linkActiveProminentFont, tokenValues.linkActiveProminentFont, tokenValues.linkActiveProminentFontColor, tokenValues.linkActiveProminentDisabledFontColor, tokenValues.linkActiveProminentFontFamily, tokenValues.linkActiveProminentFontWeight, tokenValues.linkActiveProminentFontSize, tokenValues.linkActiveProminentFontLineHeight);
   const [placeholderFont, placeholderFontColor] = createFontTokens(tokenNames.placeholderFont, tokenValues.placeholderFont, tokenValues.placeholderFontColor, tokenValues.placeholderDisabledFontColor, tokenValues.placeholderFontFamily, tokenValues.placeholderFontWeight, tokenValues.placeholderFontSize, tokenValues.placeholderFontLineHeight);
   const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight] = createFontTokens(tokenNames.bodyFont, tokenValues.bodyFont, tokenValues.bodyFontColor, tokenValues.bodyDisabledFontColor, tokenValues.bodyFontFamily, tokenValues.bodyFontWeight, tokenValues.bodyFontSize, tokenValues.bodyFontLineHeight);
+  createFontTokens(tokenNames.codeFont, tokenValues.codeFont, tokenValues.codeFontColor, tokenValues.codeDisabledFontColor, tokenValues.codeFontFamily, tokenValues.codeFontWeight, tokenValues.codeFontSize, tokenValues.codeFontLineHeight);
   const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight] = createFontTokens(tokenNames.bodyEmphasizedFont, tokenValues.bodyEmphasizedFont, tokenValues.bodyEmphasizedFontColor, tokenValues.bodyEmphasizedDisabledFontColor, tokenValues.bodyEmphasizedFontFamily, tokenValues.bodyEmphasizedFontWeight, tokenValues.bodyEmphasizedFontSize, tokenValues.bodyEmphasizedFontLineHeight);
   createFontTokens(tokenNames.bodyPlus1Font, tokenValues.bodyPlus1Font, tokenValues.bodyPlus1FontColor, tokenValues.bodyPlus1DisabledFontColor, tokenValues.bodyPlus1FontFamily, tokenValues.bodyPlus1FontWeight, tokenValues.bodyPlus1FontSize, tokenValues.bodyPlus1FontLineHeight);
   const [bodyPlus1EmphasizedFont, bodyPlus1EmphasizedFontColor] = createFontTokens(tokenNames.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFontColor, tokenValues.bodyPlus1EmphasizedDisabledFontColor, tokenValues.bodyPlus1EmphasizedFontFamily, tokenValues.bodyPlus1EmphasizedFontWeight, tokenValues.bodyPlus1EmphasizedFontSize, tokenValues.bodyPlus1EmphasizedFontLineHeight);
@@ -16780,7 +16786,7 @@
   }
   // #endregion
 
-  const styles$1C = css `
+  const styles$1F = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -16858,7 +16864,7 @@
     }
 `;
 
-  const template$1m = (_context, definition) => html `${
+  const template$1p = (_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
@@ -16961,8 +16967,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$1m,
-      styles: styles$1C,
+      template: template$1p,
+      styles: styles$1F,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17071,7 +17077,7 @@
     padding: 0;
 `;
 
-  const styles$1B = css `
+  const styles$1E = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17355,8 +17361,8 @@
             }
         `));
 
-  const styles$1A = css `
-    ${styles$1B}
+  const styles$1D = css `
+    ${styles$1E}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17376,7 +17382,7 @@
     }
 `;
 
-  const template$1l = (context, definition) => html `
+  const template$1o = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17458,8 +17464,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$1l,
-      styles: styles$1A,
+      template: template$1o,
+      styles: styles$1D,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17467,7 +17473,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$1z = css `
+  const styles$1C = css `
     ${display$2('grid')}
 
     :host {
@@ -17550,7 +17556,7 @@
     }
 `;
 
-  const template$1k = (context, definition) => html `
+  const template$1n = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17651,8 +17657,8 @@
   // 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$1k,
-      styles: styles$1z,
+      template: template$1n,
+      styles: styles$1C,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17664,7 +17670,7 @@
 
   // These styles end up inside a @layer block so must use the
   // cssPartial tag instead of the css tag
-  const styles$1y = cssPartial `
+  const styles$1B = cssPartial `
     .severity-text {
         display: none;
         font: ${errorTextFont};
@@ -17774,12 +17780,12 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$1x = css `
+  const styles$1A = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$2('inline-flex')}
-        ${styles$1y}
+        ${styles$1B}
         :host {
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
@@ -18459,8 +18465,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             }
         `));
 
-  const styles$1w = css `
-    ${styles$1x}
+  const styles$1z = css `
+    ${styles$1A}
     ${'' /* Anchor specific styles */}
     @layer base {
         .control {
@@ -19547,13 +19553,13 @@ 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$1j = html `<div
+  const template$1m = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$1v = css `
+  const styles$1y = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19616,8 +19622,8 @@ 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$1j,
-          styles: styles$1v
+          template: template$1m,
+          styles: styles$1y
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19741,7 +19747,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
    */
   const StepperOrientation = Orientation;
 
-  const template$1i = (context, definition) => html `
+  const template$1l = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -19888,15 +19894,15 @@ 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$1i,
-      styles: styles$1w,
+      template: template$1l,
+      styles: styles$1z,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
 
-  const styles$1u = css `
+  const styles$1x = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20013,7 +20019,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$1h = (context, definition) => html `
+  const template$1k = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -20065,15 +20071,15 @@ 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$1h,
-      styles: styles$1u,
+      template: template$1k,
+      styles: styles$1x,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$1t = css `
+  const styles$1w = css `
     ${display$2('flex')}
 
     :host {
@@ -20113,12 +20119,12 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const styles$1s = css `
-    ${styles$1B}
+  const styles$1v = css `
+    ${styles$1E}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$1g = (context, definition) => html `
+  const template$1j = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -20209,8 +20215,8 @@ 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$1g,
-      styles: styles$1s,
+      template: template$1j,
+      styles: styles$1v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20244,7 +20250,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$1f = (context, definition) => html `
+  const template$1i = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -20545,15 +20551,15 @@ 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$1f,
-      styles: styles$1t,
+      template: template$1i,
+      styles: styles$1w,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$1r = css `
+  const styles$1u = css `
     ${display$2('block')}
 
     :host {
@@ -20658,7 +20664,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$1e = (context, definition) => html `
+  const template$1h = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -20795,8 +20801,8 @@ 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$1e,
-      styles: styles$1r,
+      template: template$1h,
+      styles: styles$1u,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20812,7 +20818,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       zIndex1000: '1000'
   };
 
-  const styles$1q = css `
+  const styles$1t = css `
     ${display$2('block')}
 
     :host {
@@ -20843,14 +20849,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$1q
+      styles: styles$1t
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  const styles$1p = css `
+  const styles$1s = css `
     ${display$2('flex')}
 
     :host {
@@ -21017,7 +21023,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       information: 'information'
   };
 
-  const template$1d = html `
+  const template$1g = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -21135,10 +21141,11 @@ 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$1d,
-      styles: styles$1p
+      template: template$1g,
+      styles: styles$1s
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
+  const bannerTag = 'nimble-banner';
 
   /**
    * The template for the {@link @ni/fast-foundation#Breadcrumb} component.
@@ -21177,7 +21184,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     </template>
 `;
 
-  const styles$1o = css `
+  const styles$1r = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21281,11 +21288,11 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$1o
+      styles: styles$1r
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$1n = css `
+  const styles$1q = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -21382,14 +21389,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$1n,
+      styles: styles$1q,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$1m = css `
+  const styles$1p = css `
     ${display$2('flex')}
 
     :host {
@@ -21413,7 +21420,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$1c = html `
+  const template$1f = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -21428,12 +21435,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$1c,
-      styles: styles$1m
+      template: template$1f,
+      styles: styles$1p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$1l = css `
+  const styles$1o = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21591,7 +21598,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$1l,
+      styles: styles$1o,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21599,7 +21606,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   const cardButtonTag = 'nimble-card-button';
 
-  const styles$1k = css `
+  const styles$1n = css `
     .error-icon {
         display: none;
     }
@@ -21633,9 +21640,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$1j = css `
+  const styles$1m = css `
     ${display$2('inline-grid')}
-    ${styles$1k}
+    ${styles$1n}
 
     :host {
         font: ${bodyFont};
@@ -21775,7 +21782,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$1b = (_context, definition) => html `
+  const template$1e = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -21872,8 +21879,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$1b,
-      styles: styles$1j,
+      template: template$1e,
+      styles: styles$1m,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
@@ -21885,7 +21892,7 @@ so this becomes the fallback color for the slot */ ''}
       block: 'block'
   };
 
-  const styles$1i = css `
+  const styles$1l = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21946,7 +21953,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$1a = (context, definition) => html `
+  const template$1d = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <span
         class="content"
@@ -22032,8 +22039,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Chip, StartEnd);
   const nimbleChip = Chip.compose({
       baseName: 'chip',
-      template: template$1a,
-      styles: styles$1i,
+      template: template$1d,
+      styles: styles$1l,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -22041,8 +22048,8 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleChip());
   const chipTag = 'nimble-chip';
 
-  const styles$1h = css `
-    ${styles$1B}
+  const styles$1k = css `
+    ${styles$1E}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -22089,7 +22096,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$19 = (context, definition) => html `
+  const template$1c = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -22184,8 +22191,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$19,
-      styles: styles$1h,
+      template: template$1c,
+      styles: styles$1k,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -22215,7 +22222,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$1g = css `
+  const styles$1j = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -22505,7 +22512,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$1f = css `
+  const styles$1i = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -22532,10 +22539,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$1e = css `
-    ${styles$1g}
-    ${styles$1k}
-    ${styles$1f}
+  const styles$1h = css `
+    ${styles$1j}
+    ${styles$1n}
+    ${styles$1i}
 
     :host {
         field-sizing: fixed;
@@ -22663,7 +22670,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  const template$18 = (context, definition) => html `
+  const template$1b = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -23438,8 +23445,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$18,
-      styles: styles$1e,
+      template: template$1b,
+      styles: styles$1h,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -23483,7 +23490,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$1d = css `
+  const styles$1g = css `
     ${display$2('grid')}
 
     dialog {
@@ -23576,7 +23583,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$17 = html `
+  const template$1a = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -23724,13 +23731,13 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$17,
-      styles: styles$1d,
+      template: template$1a,
+      styles: styles$1g,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$1c = css `
+  const styles$1f = css `
     ${display$2('block')}
 
     :host {
@@ -23873,7 +23880,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$16 = html `
+  const template$19 = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -24015,8 +24022,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$16,
-      styles: styles$1c
+      template: template$19,
+      styles: styles$1f
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -24166,6 +24173,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
   registerIconSvg('icon-arrow-partial-rotate-left', IconArrowPartialRotateLeft);
+  const iconArrowPartialRotateLeftTag = 'nimble-icon-arrow-partial-rotate-left';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -25346,6 +25354,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
   registerIconSvg('icon-floppy-disk', IconFloppyDisk);
+  const iconFloppyDiskTag = 'nimble-icon-floppy-disk';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -26940,7 +26949,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$1b = css `
+  const styles$1e = css `
     ${display$2('none')}
 `;
 
@@ -27013,7 +27022,7 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderCore.prototype, "itemRemove", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$1b
+      styles: styles$1e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -27180,13 +27189,13 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$1b
+      styles: styles$1e
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$1a = css `
+  const styles$1d = css `
     ${display$2('flex')}
 
     :host {
@@ -27262,7 +27271,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$15 = (context, definition) => html `
+  const template$18 = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -27364,13 +27373,13 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$15,
-      styles: styles$1a
+      template: template$18,
+      styles: styles$1d
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$19 = css `
+  const styles$1c = css `
     ${display$2('flex')}
 
     :host {
@@ -27432,7 +27441,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$14 = html `
+  const template$17 = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -27574,8 +27583,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$14,
-      styles: styles$19
+      template: template$17,
+      styles: styles$1c
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -27602,9 +27611,9 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$13 = html `<template slot="mapping"></template>`;
+  const template$16 = html `<template slot="mapping"></template>`;
 
-  const styles$18 = css `
+  const styles$1b = css `
     ${display$2('none')}
 `;
 
@@ -27620,8 +27629,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$13,
-      styles: styles$18
+      template: template$16,
+      styles: styles$1b
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -27691,8 +27700,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$13,
-      styles: styles$18
+      template: template$16,
+      styles: styles$1b
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -27715,8 +27724,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$13,
-      styles: styles$18
+      template: template$16,
+      styles: styles$1b
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -27732,8 +27741,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$13,
-      styles: styles$18
+      template: template$16,
+      styles: styles$1b
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -28035,7 +28044,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  const template$12 = () => html `
+  const template$15 = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -28052,7 +28061,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$17 = css `
+  const styles$1a = css `
     ${display$2('grid')}
 
     :host {
@@ -28123,8 +28132,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$12,
-      styles: styles$17
+      template: template$15,
+      styles: styles$1a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   const menuTag = 'nimble-menu';
@@ -28141,7 +28150,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$16 = css `
+  const styles$19 = css `
     ${display$2('inline-block')}
 
     :host {
@@ -28159,7 +28168,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$11 = html `
+  const template$14 = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -28409,8 +28418,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$11,
-      styles: styles$16,
+      template: template$14,
+      styles: styles$19,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -28418,7 +28427,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$15 = css `
+  const styles$18 = css `
     ${display$2('grid')}
 
     :host {
@@ -28515,7 +28524,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$15,
+      styles: styles$18,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -28531,10 +28540,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$14 = css `
+  const styles$17 = css `
     ${display$2('inline-block')}
-    ${styles$1k}
-    ${styles$1f}
+    ${styles$1n}
+    ${styles$1i}
 
     :host {
         font: ${bodyFont};
@@ -28765,7 +28774,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$10 = (context, definition) => html `
+  const template$13 = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -28919,8 +28928,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$10,
-      styles: styles$14,
+      template: template$13,
+      styles: styles$17,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -28963,7 +28972,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$13 = css `
+  const styles$16 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -29063,15 +29072,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$13,
+      styles: styles$16,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$12 = css `
+  const styles$15 = css `
     ${display$2('inline-block')}
-    ${styles$1k}
-    ${styles$1f}
+    ${styles$1n}
+    ${styles$1i}
 
     .positioning-region {
         display: flex;
@@ -29110,7 +29119,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$$ = html `
+  const template$12 = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -29150,8 +29159,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$$,
-      styles: styles$12,
+      template: template$12,
+      styles: styles$15,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -49666,7 +49675,7 @@ img.ProseMirror-separator {
   //#region src/index.ts
   var src_default$7 = HardBreak;
 
-  const styles$11 = css `
+  const styles$14 = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -49703,7 +49712,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$11
+      styles: styles$14
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -49732,8 +49741,8 @@ img.ProseMirror-separator {
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$10 = css `
-    ${styles$1g}
+  const styles$13 = css `
+    ${styles$1j}
 
     :host {
         height: auto;
@@ -49751,7 +49760,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$_ = html `
+  const template$11 = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -50039,15 +50048,15 @@ img.ProseMirror-separator {
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$_,
-      styles: styles$10
+      template: template$11,
+      styles: styles$13
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  const template$Z = html `
+  const template$10 = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -50149,9 +50158,9 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$$ = css `
+  const styles$12 = css `
     ${display$2('inline-flex')}
-    ${styles$1k}
+    ${styles$1n}
 
     :host {
         font: ${bodyFont};
@@ -68844,8 +68853,8 @@ img.ProseMirror-separator {
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$Z,
-      styles: styles$$,
+      template: template$10,
+      styles: styles$12,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -68854,13 +68863,13 @@ img.ProseMirror-separator {
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$Y = html `
+  const template$$ = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
 `;
 
-  const styles$_ = css `
+  const styles$11 = css `
     ${display$2('flex')}
 
     :host {
@@ -68973,17 +68982,17 @@ img.ProseMirror-separator {
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$Y,
-      styles: styles$_
+      template: template$$,
+      styles: styles$11
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$Z = css `
-    ${styles$1g}
-    ${styles$1k}
-    ${styles$1f}
+  const styles$10 = css `
+    ${styles$1j}
+    ${styles$1n}
+    ${styles$1i}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -69146,7 +69155,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$Y = css `
+  const styles$$ = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -69316,7 +69325,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const template$X = html `
+  const template$_ = html `
     <template role="progressbar">
         ${''
 /**
@@ -69363,8 +69372,8 @@ img.ProseMirror-separator {
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$X,
-      styles: styles$Y
+      template: template$_,
+      styles: styles$$
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -69380,7 +69389,7 @@ img.ProseMirror-separator {
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$W = (context, definition) => html `
+  const template$Z = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -70592,8 +70601,8 @@ img.ProseMirror-separator {
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$W,
-      styles: styles$Z,
+      template: template$Z,
+      styles: styles$10,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -70606,8 +70615,8 @@ img.ProseMirror-separator {
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$X = css `
-    ${styles$1x}
+  const styles$_ = css `
+    ${styles$1A}
     ${'' /* Button specific styles */}
     @layer base {
         .control {
@@ -70618,7 +70627,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$V = (context, definition) => html `
+  const template$Y = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -70740,15 +70749,15 @@ img.ProseMirror-separator {
   ], Step.prototype, "tabIndex", void 0);
   const nimbleStep = Step.compose({
       baseName: 'step',
-      template: template$V,
-      styles: styles$X,
+      template: template$Y,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
 
-  const styles$W = css `
+  const styles$Z = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -70819,7 +70828,7 @@ img.ProseMirror-separator {
     }
 `;
 
-  const template$U = html `
+  const template$X = html `
     ${when(x => x.showScrollButtons, html `
         <${buttonTag}
             content-hidden
@@ -70964,12 +70973,12 @@ img.ProseMirror-separator {
   ], Stepper.prototype, "steps", void 0);
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
-      template: template$U,
-      styles: styles$W
+      template: template$X,
+      styles: styles$Z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
 
-  const styles$V = css `
+  const styles$Y = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -71199,7 +71208,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const template$T = html `
+  const template$W = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -71243,12 +71252,12 @@ img.ProseMirror-separator {
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$T,
-      styles: styles$V
+      template: template$W,
+      styles: styles$Y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$U = css `
+  const styles$X = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -71359,11 +71368,11 @@ img.ProseMirror-separator {
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$U
+      styles: styles$X
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$T = css `
+  const styles$W = css `
     ${display$2('block')}
 
     :host {
@@ -71382,7 +71391,7 @@ img.ProseMirror-separator {
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$T
+      styles: styles$W
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -75125,7 +75134,7 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$S = css `
+  const styles$V = css `
     ${display$2('flex')}
 
     :host {
@@ -75363,7 +75372,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$R = css `
+  const styles$U = css `
     ${display$2('flex')}
 
     :host {
@@ -75396,7 +75405,7 @@ focus outline in that case.
     }
 `;
 
-  const template$S = html `
+  const template$V = html `
     <template role="columnheader"
         class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
@@ -75482,13 +75491,13 @@ focus outline in that case.
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$S,
-      styles: styles$R
+      template: template$V,
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$Q = css `
+  const styles$T = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -75513,9 +75522,9 @@ focus outline in that case.
     }
 `;
 
-  const styles$P = css `
+  const styles$S = css `
     ${display$2('flex')}
-    ${styles$Q}
+    ${styles$T}
 
     :host {
         width: fit-content;
@@ -75761,7 +75770,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$O = css `
+  const styles$R = css `
     ${display$2('flex')}
 
     :host {
@@ -75806,7 +75815,7 @@ focus outline in that case.
     }
 `;
 
-  const template$R = html `
+  const template$U = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
         @blur="${x => x.onCellBlur()}"
@@ -75903,8 +75912,8 @@ focus outline in that case.
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$R,
-      styles: styles$O
+      template: template$U,
+      styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
@@ -75940,7 +75949,7 @@ focus outline in that case.
         `)}
     </${tableCellTag}>
 `;
-  const template$Q = html `
+  const template$T = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -76316,15 +76325,15 @@ focus outline in that case.
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$Q,
-      styles: styles$P
+      template: template$T,
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$N = css `
+  const styles$Q = css `
     ${display$2('grid')}
-    ${styles$Q}
+    ${styles$T}
 
     :host {
         align-items: center;
@@ -76497,7 +76506,7 @@ focus outline in that case.
             }
         `));
 
-  const template$P = html `
+  const template$S = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -76673,8 +76682,8 @@ focus outline in that case.
   ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$P,
-      styles: styles$N
+      template: template$S,
+      styles: styles$Q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
@@ -76694,7 +76703,7 @@ focus outline in that case.
         <slot name="${x => x.slot}"></slot>
     </${tableHeaderTag}>
 `;
-  const template$O = html `
+  const template$R = html `
     <template
         role="treegrid"
         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
@@ -81566,12 +81575,12 @@ focus outline in that case.
   ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
-      template: template$O,
-      styles: styles$S
+      template: template$R,
+      styles: styles$V
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$M = css `
+  const styles$P = css `
     ${display$2('contents')}
 
     .header-content {
@@ -81583,7 +81592,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$N = html `<span
+  const template$Q = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -81648,7 +81657,7 @@ focus outline in that case.
       return ColumnWithPlaceholder;
   }
 
-  const styles$L = css `
+  const styles$O = css `
     ${display$2('flex')}
 
     :host {
@@ -81679,7 +81688,7 @@ focus outline in that case.
     }
 `;
 
-  const template$M = html `
+  const template$P = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -81771,8 +81780,8 @@ focus outline in that case.
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$M,
-      styles: styles$L
+      template: template$P,
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -81849,7 +81858,7 @@ focus outline in that case.
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$L = html `
+  const template$O = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -81858,7 +81867,7 @@ focus outline in that case.
     </span>
 `;
 
-  const styles$K = css `
+  const styles$N = css `
     ${display$2('flex')}
 
     span {
@@ -81882,8 +81891,8 @@ focus outline in that case.
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$L,
-      styles: styles$K
+      template: template$O,
+      styles: styles$N
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -82127,8 +82136,8 @@ focus outline in that case.
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$N,
-      styles: styles$M
+      template: template$Q,
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -82166,15 +82175,15 @@ focus outline in that case.
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$L,
-      styles: styles$K
+      template: template$O,
+      styles: styles$N
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(tableColumnDateTextGroupHeaderView());
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
-  const template$K = html `
+  const template$N = html `
     <template
         class="
             ${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}
@@ -82190,7 +82199,7 @@ focus outline in that case.
     </template>
 `;
 
-  const styles$J = css `
+  const styles$M = css `
     ${display$2('flex')}
 
     :host {
@@ -82292,8 +82301,8 @@ focus outline in that case.
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$K,
-      styles: styles$J
+      template: template$N,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -82627,8 +82636,8 @@ focus outline in that case.
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$N,
-      styles: styles$M
+      template: template$Q,
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -82644,8 +82653,8 @@ focus outline in that case.
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$K,
-      styles: styles$J
+      template: template$N,
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -82746,8 +82755,8 @@ focus outline in that case.
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$L,
-      styles: styles$K
+      template: template$O,
+      styles: styles$N
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -82799,8 +82808,8 @@ focus outline in that case.
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$N,
-      styles: styles$M
+      template: template$Q,
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -82908,15 +82917,15 @@ focus outline in that case.
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$I = css `
-    ${styles$M}
+  const styles$L = css `
+    ${styles$P}
 
     slot[name='mapping'] {
         display: none;
     }
 `;
 
-  const template$J = html `${template$N}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$M = html `${template$Q}<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
@@ -83019,7 +83028,7 @@ focus outline in that case.
       }
   }
 
-  const styles$H = css `
+  const styles$K = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -83043,7 +83052,7 @@ focus outline in that case.
     }
 `;
 
-  const template$I = html `
+  const template$L = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -83187,15 +83196,15 @@ focus outline in that case.
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
-      template: template$I,
-      styles: styles$H
+      template: template$L,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$G = css `
+  const styles$J = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -83219,7 +83228,7 @@ focus outline in that case.
     }
 `;
 
-  const template$H = html `
+  const template$K = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -83306,8 +83315,8 @@ focus outline in that case.
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
-      template: template$H,
-      styles: styles$G
+      template: template$K,
+      styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -83390,23 +83399,23 @@ focus outline in that case.
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
-      template: template$J,
-      styles: styles$I
+      template: template$M,
+      styles: styles$L
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnMapping());
 
-  const template$G = html `
+  const template$J = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$N}</template
+        >${template$Q}</template
     >
 `;
 
   /** @internal */
   const cellViewMenuSlotName = 'menu-button-menu';
 
-  const template$F = html `
+  const template$I = html `
     ${when(x => x.showMenuButton, html `
         <${menuButtonTag}
             ${ref('menuButton')}
@@ -83425,7 +83434,7 @@ focus outline in that case.
     `)}
 `;
 
-  const styles$F = css `
+  const styles$I = css `
     :host {
         align-self: center;
         width: 100%;
@@ -83500,8 +83509,8 @@ focus outline in that case.
   ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
-      template: template$F,
-      styles: styles$F
+      template: template$I,
+      styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
   const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
@@ -83556,8 +83565,8 @@ focus outline in that case.
   ], TableColumnMenuButton.prototype, "menuSlot", void 0);
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
-      template: template$G,
-      styles: styles$M
+      template: template$J,
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -83565,7 +83574,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$E = html `<span
+  const template$H = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -83584,8 +83593,8 @@ focus outline in that case.
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$L,
-      styles: styles$K
+      template: template$O,
+      styles: styles$N
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -83606,8 +83615,8 @@ focus outline in that case.
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$K,
-      styles: styles$J
+      template: template$N,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -84147,8 +84156,8 @@ focus outline in that case.
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$E,
-      styles: styles$M
+      template: template$H,
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -84166,8 +84175,8 @@ focus outline in that case.
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$K,
-      styles: styles$J
+      template: template$N,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -84221,15 +84230,15 @@ focus outline in that case.
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$N,
-      styles: styles$M
+      template: template$Q,
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$E = css `
-    ${styles$1t}
+  const styles$H = css `
+    ${styles$1w}
 
     .tabpanel {
         overflow: auto;
@@ -84310,12 +84319,12 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$1f,
-      styles: styles$E
+      template: template$1i,
+      styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$D = css `
+  const styles$G = css `
     ${display$2('flex')}
 
     :host {
@@ -84347,7 +84356,7 @@ focus outline in that case.
     }
 `;
 
-  const template$D = (context, definition) => html `
+  const template$G = (context, definition) => html `
     <template slot="end">
         ${when(x => x.defaultSlottedElements.length > 0, html `
             <div class="separator"></div>
@@ -84379,8 +84388,8 @@ focus outline in that case.
   ], TabsToolbar.prototype, "defaultSlottedElements", void 0);
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
-      template: template$D,
-      styles: styles$D
+      template: template$G,
+      styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
   applyMixins(TabsToolbar, StartEnd);
@@ -84390,10 +84399,10 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$C = css `
+  const styles$F = css `
     ${display$2('inline-flex')}
-    ${styles$1k}
-    ${styles$1f}
+    ${styles$1n}
+    ${styles$1i}
 
     :host {
         font: ${bodyFont};
@@ -84588,7 +84597,7 @@ focus outline in that case.
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
 `);
-  const template$C = () => html `
+  const template$F = () => html `
     ${labelTemplate$1}
     <div class="container">
         <textarea
@@ -84736,8 +84745,8 @@ focus outline in that case.
   const nimbleTextArea = TextArea.compose({
       baseName: 'text-area',
       baseClass: TextArea$1,
-      template: template$C,
-      styles: styles$C,
+      template: template$F,
+      styles: styles$F,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -84754,10 +84763,10 @@ focus outline in that case.
       frameless: 'frameless'
   };
 
-  const styles$B = css `
+  const styles$E = css `
     ${display$2('inline-block')}
-    ${styles$1k}
-    ${styles$1f}
+    ${styles$1n}
+    ${styles$1i}
 
     :host {
         font: ${bodyFont};
@@ -85034,7 +85043,7 @@ focus outline in that case.
    * The template for the {@link @ni/fast-foundation#(TextField:class)} component.
    * @public
    */
-  const template$B = (context, definition) => html `
+  const template$E = (context, definition) => html `
     <template
         class="
             ${x => (x.readOnly ? 'readonly' : '')}
@@ -85123,8 +85132,8 @@ focus outline in that case.
   const nimbleTextField = TextField.compose({
       baseName: 'text-field',
       baseClass: TextField$1,
-      template: template$B,
-      styles: styles$B,
+      template: template$E,
+      styles: styles$E,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -85141,7 +85150,7 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$A = css `
+  const styles$D = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -85227,7 +85236,7 @@ focus outline in that case.
             }
         `));
 
-  const template$A = html `
+  const template$D = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
                 class="anchored-region"
@@ -85279,8 +85288,8 @@ focus outline in that case.
   const nimbleTooltip = Tooltip.compose({
       baseName: 'tooltip',
       baseClass: Tooltip$1,
-      template: template$A,
-      styles: styles$A
+      template: template$D,
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
   const tooltipTag = 'nimble-tooltip';
@@ -85369,7 +85378,7 @@ focus outline in that case.
       }
   }
 
-  const styles$z = css `
+  const styles$C = css `
     ${display$2('block')}
 
     :host {
@@ -85586,12 +85595,12 @@ focus outline in that case.
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$z,
+      styles: styles$C,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$y = css `
+  const styles$B = css `
     ${display$2('flex')}
 
     :host {
@@ -85605,7 +85614,7 @@ focus outline in that case.
     }
 `;
 
-  const template$z = html `
+  const template$C = html `
     <template
         role="tree"
         ${ref('treeView')}
@@ -85701,8 +85710,8 @@ focus outline in that case.
   const nimbleTreeView = TreeView.compose({
       baseName: 'tree-view',
       baseClass: TreeView$1,
-      template: template$z,
-      styles: styles$y
+      template: template$C,
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -85818,9 +85827,9 @@ focus outline in that case.
   }
   const unitScaleByte = new UnitScaleByte();
 
-  const template$y = html `<template slot="unit"></template>`;
+  const template$B = html `<template slot="unit"></template>`;
 
-  const styles$x = css `
+  const styles$A = css `
     ${display$2('none')}
 `;
 
@@ -85848,8 +85857,8 @@ focus outline in that case.
   ], UnitByte.prototype, "binary", void 0);
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
-      template: template$y,
-      styles: styles$x
+      template: template$B,
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -85901,8 +85910,8 @@ focus outline in that case.
   }
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
-      template: template$y,
-      styles: styles$x
+      template: template$B,
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -100946,7 +100955,7 @@ focus outline in that case.
       return new Table(reader.readAll());
   }
 
-  const template$x = html `
+  const template$A = html `
     <div class="wafer-map-container">
         <svg class="svg-root">
             <g ${ref('zoomContainer')} transform=${x => x.transform.toString()}>
@@ -100979,7 +100988,7 @@ focus outline in that case.
     </div>
 `;
 
-  const styles$w = css `
+  const styles$z = css `
     ${display$2('inline-block')}
 
     :host {
@@ -104004,8 +104013,8 @@ focus outline in that case.
   ], WaferMap.prototype, "colorScale", void 0);
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
-      template: template$x,
-      styles: styles$w
+      template: template$A,
+      styles: styles$z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
@@ -104017,7 +104026,7 @@ focus outline in that case.
    */
   const display$1 = (displayValue) => `${display$3(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 
-  const styles$v = css `
+  const styles$y = css `
     ${display$1('flex')}
 
     :host {
@@ -104107,7 +104116,7 @@ focus outline in that case.
     }
 `;
 
-  const template$w = html `
+  const template$z = html `
 <div class="toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}">
     <slot name="toolbar" ${slotted({ property: 'slottedToolbarElements' })}></slot>
 </div>
@@ -104507,16 +104516,16 @@ focus outline in that case.
   ], ChatConversation.prototype, "slottedEndElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
-      template: template$w,
-      styles: styles$v
+      template: template$z,
+      styles: styles$y
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightChatConversation());
 
-  const styles$u = css `
+  const styles$x = css `
     ${display$1('flex')}
-    ${styles$1k}
+    ${styles$1n}
 
     :host {
         width: 100%;
@@ -104660,7 +104669,7 @@ focus outline in that case.
     }
 `;
 
-  const template$v = html `
+  const template$y = html `
 <div class="container">
     <section class="attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}">
         <slot
@@ -104912,8 +104921,8 @@ focus outline in that case.
   ], ChatInput.prototype, "slottedAttachmentsElements", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
-      template: template$v,
-      styles: styles$u,
+      template: template$y,
+      styles: styles$x,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -104931,7 +104940,7 @@ focus outline in that case.
       inbound: 'inbound'
   };
 
-  const styles$t = css `
+  const styles$w = css `
     ${display$1('flex')}
 
     :host {
@@ -105005,7 +105014,7 @@ focus outline in that case.
     }
 `;
 
-  const template$u = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -105054,12 +105063,12 @@ focus outline in that case.
   applyMixins(ChatMessage, StartEnd);
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
-      template: template$u,
-      styles: styles$t
+      template: template$x,
+      styles: styles$w
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
 
-  const styles$s = css `
+  const styles$v = css `
     ${display$1('flex')}
 
     :host {
@@ -105121,7 +105130,7 @@ focus outline in that case.
     }
 `;
 
-  const template$t = (context, definition) => html `
+  const template$w = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -105161,12 +105170,12 @@ focus outline in that case.
   applyMixins(ChatMessageInbound, StartEnd);
   const sprightChatMessageInbound = ChatMessageInbound.compose({
       baseName: 'chat-message-inbound',
-      template: template$t,
-      styles: styles$s
+      template: template$w,
+      styles: styles$v
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
 
-  const styles$r = css `
+  const styles$u = css `
     ${display$1('flex')}
 
     :host {
@@ -105201,7 +105210,7 @@ focus outline in that case.
     }
 `;
 
-  const template$s = () => html `
+  const template$v = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -105223,12 +105232,12 @@ focus outline in that case.
   }
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
-      template: template$s,
-      styles: styles$r
+      template: template$v,
+      styles: styles$u
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
 
-  const styles$q = css `
+  const styles$t = css `
     ${display$1('flex')}
 
     :host {
@@ -105259,7 +105268,7 @@ focus outline in that case.
     }
 `;
 
-  const template$r = () => html `
+  const template$u = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -105279,12 +105288,12 @@ focus outline in that case.
   }
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',
-      template: template$r,
-      styles: styles$q
+      template: template$u,
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
 
-  const styles$p = css `
+  const styles$s = css `
     ${display$1('flex')}
 
     :host {
@@ -105390,13 +105399,13 @@ 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$q = html `
+  const template$t = html `
     <div class="icon light-icon" aria-hidden="true" :innerHTML="${() => nigelChatLightData}"></div>
     <div class="icon dark-icon" aria-hidden="true" :innerHTML="${() => nigelChatDarkData}"></div>
 `;
 
-  const styles$o = css `
-    ${styles$1v}
+  const styles$r = css `
+    ${styles$1y}
 
     .dark-icon {
         display: none;
@@ -105419,15 +105428,15 @@ focus outline in that case.
   }
   const sprightIconNigelChat = IconNigelChat.compose({
       baseName: 'icon-nigel-chat',
-      template: template$q,
-      styles: styles$o
+      template: template$t,
+      styles: styles$r
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconNigelChat());
   const iconNigelChatTag = 'spright-icon-nigel-chat';
 
-  const template$p = () => html `
+  const template$s = () => html `
     <div class="container">
         <div class="brand-icon">
             <slot name="brand-icon">
@@ -105459,8 +105468,8 @@ focus outline in that case.
   ], ChatMessageWelcome.prototype, "subtitle", void 0);
   const sprightChatMessageWelcome = ChatMessageWelcome.compose({
       baseName: 'chat-message-welcome',
-      template: template$p,
-      styles: styles$p
+      template: template$s,
+      styles: styles$s
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());
 
@@ -105481,13 +105490,13 @@ focus outline in that case.
    */
   class IconBreakpointConditional extends Icon {
   }
-  const template$o = html `
+  const template$r = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$6}"></div>
 `;
   const sprightIconBreakpointConditional = IconBreakpointConditional.compose({
       baseName: 'icon-breakpoint-conditional',
-      template: template$o,
-      styles: styles$1v
+      template: template$r,
+      styles: styles$1y
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -105512,13 +105521,13 @@ focus outline in that case.
    */
   class IconBreakpointDisabled extends Icon {
   }
-  const template$n = html `
+  const template$q = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$5}"></div>
 `;
   const sprightIconBreakpointDisabled = IconBreakpointDisabled.compose({
       baseName: 'icon-breakpoint-disabled',
-      template: template$n,
-      styles: styles$1v
+      template: template$q,
+      styles: styles$1y
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -105542,13 +105551,13 @@ focus outline in that case.
    */
   class IconBreakpointEnabled extends Icon {
   }
-  const template$m = html `
+  const template$p = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$4}"></div>
 `;
   const sprightIconBreakpointEnabled = IconBreakpointEnabled.compose({
       baseName: 'icon-breakpoint-enabled',
-      template: template$m,
-      styles: styles$1v
+      template: template$p,
+      styles: styles$1y
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -105572,13 +105581,13 @@ focus outline in that case.
    */
   class IconBreakpointExecutionPointer extends Icon {
   }
-  const template$l = html `
+  const template$o = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$3}"></div>
 `;
   const sprightIconBreakpointExecutionPointer = IconBreakpointExecutionPointer.compose({
       baseName: 'icon-breakpoint-execution-pointer',
-      template: template$l,
-      styles: styles$1v
+      template: template$o,
+      styles: styles$1y
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -105606,13 +105615,13 @@ focus outline in that case.
    */
   class IconBreakpointHitDisabled extends Icon {
   }
-  const template$k = html `
+  const template$n = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$2}"></div>
 `;
   const sprightIconBreakpointHitDisabled = IconBreakpointHitDisabled.compose({
       baseName: 'icon-breakpoint-hit-disabled',
-      template: template$k,
-      styles: styles$1v
+      template: template$n,
+      styles: styles$1y
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -105641,13 +105650,13 @@ focus outline in that case.
    */
   class IconBreakpointHit extends Icon {
   }
-  const template$j = html `
+  const template$m = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$1}"></div>
 `;
   const sprightIconBreakpointHit = IconBreakpointHit.compose({
       baseName: 'icon-breakpoint-hit',
-      template: template$j,
-      styles: styles$1v
+      template: template$m,
+      styles: styles$1y
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -105672,21 +105681,21 @@ focus outline in that case.
    */
   class IconBreakpointHover extends Icon {
   }
-  const template$i = html `
+  const template$l = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData}"></div>
 `;
   const sprightIconBreakpointHover = IconBreakpointHover.compose({
       baseName: 'icon-breakpoint-hover',
-      template: template$i,
-      styles: styles$1v
+      template: template$l,
+      styles: styles$1y
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointHover());
   const iconBreakpointHoverTag = 'spright-icon-breakpoint-hover';
 
-  const styles$n = css `
-    ${styles$1v}
+  const styles$q = css `
+    ${styles$1y}
 
     .icon svg {
         fill: ${calendarEventBorderReservationColor};
@@ -105703,15 +105712,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
-      template: template$1j,
-      styles: styles$n
+      template: template$1m,
+      styles: styles$q
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalendarWeek());
 
-  const styles$m = css `
-    ${styles$1v}
+  const styles$p = css `
+    ${styles$1y}
 
     .icon svg {
         fill: ${calendarEventBorderCalibrationColor};
@@ -105728,15 +105737,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
-      template: template$1j,
-      styles: styles$m
+      template: template$1m,
+      styles: styles$p
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalipers());
 
-  const styles$l = css `
-    ${styles$1v}
+  const styles$o = css `
+    ${styles$1y}
 
     .icon svg {
         fill: ${calendarEventBorderTransportOrderColor};
@@ -105753,15 +105762,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
-      template: template$1j,
-      styles: styles$l
+      template: template$1m,
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemForklift());
 
-  const styles$k = css `
-    ${styles$1v}
+  const styles$n = css `
+    ${styles$1y}
 
     .icon svg {
         fill: ${calendarEventBorderStaticColor};
@@ -105778,15 +105787,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
-      template: template$1j,
-      styles: styles$k
+      template: template$1m,
+      styles: styles$n
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemRectangleCheckLines());
 
-  const styles$j = css `
-    ${styles$1v}
+  const styles$m = css `
+    ${styles$1y}
 
     .icon svg {
         fill: ${calendarEventBorderWorkOrderColor};
@@ -105803,15 +105812,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemSquareListCog = IconWorkItemSquareListCog.compose({
       baseName: 'icon-work-item-square-list-cog',
-      template: template$1j,
-      styles: styles$j
+      template: template$1m,
+      styles: styles$m
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemSquareListCog());
 
-  const styles$i = css `
-    ${styles$1v}
+  const styles$l = css `
+    ${styles$1y}
 
     .icon svg {
         fill: ${calendarEventBorderJobColor};
@@ -105828,15 +105837,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemUserHelmetSafety = IconWorkItemUserHelmetSafety.compose({
       baseName: 'icon-work-item-user-helmet-safety',
-      template: template$1j,
-      styles: styles$i
+      template: template$1m,
+      styles: styles$l
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemUserHelmetSafety());
 
-  const styles$h = css `
-    ${styles$1v}
+  const styles$k = css `
+    ${styles$1y}
 
     .icon svg {
         fill: ${calendarEventBorderMaintenanceColor};
@@ -105853,14 +105862,14 @@ focus outline in that case.
   }
   const sprightIconWorkItemWrenchHammer = IconWorkItemWrenchHammer.compose({
       baseName: 'icon-work-item-wrench-hammer',
-      template: template$1j,
-      styles: styles$h
+      template: template$1m,
+      styles: styles$k
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemWrenchHammer());
 
-  const styles$g = css `
+  const styles$j = css `
     ${display$1('inline-block')}
 
     :host {
@@ -105885,7 +105894,7 @@ focus outline in that case.
     }
 `;
 
-  const template$h = html `<slot></slot>`;
+  const template$k = html `<slot></slot>`;
 
   /**
    * A Spright demo component (not for production use)
@@ -105894,8 +105903,8 @@ focus outline in that case.
   }
   const sprightRectangle = Rectangle.compose({
       baseName: 'rectangle',
-      template: template$h,
-      styles: styles$g
+      template: template$k,
+      styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightRectangle());
 
@@ -105922,7 +105931,7 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$f = css `
+  const styles$i = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -106028,7 +106037,7 @@ focus outline in that case.
             }
         `));
 
-  const template$g = html `
+  const template$j = html `
     <details
         class="accordion-item-details"
         ?open="${x => x.expanded}"
@@ -106079,8 +106088,8 @@ focus outline in that case.
   ], FvAccordionItem.prototype, "appearance", void 0);
   const okFvAccordionItem = FvAccordionItem.compose({
       baseName: 'fv-accordion-item',
-      template: template$g,
-      styles: styles$f
+      template: template$j,
+      styles: styles$i
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')
@@ -106095,7 +106104,7 @@ focus outline in that case.
       card: 'card'
   };
 
-  const styles$e = css `
+  const styles$h = css `
     ${display('block')}
 
     :host {
@@ -106446,7 +106455,7 @@ focus outline in that case.
         </div>
     </div>
 `;
-  const template$f = html `
+  const template$i = html `
     ${when(x => x.interactionMode === FvCardInteractionMode.card, html `
             <${cardButtonTag}
                 class="card-shell card-button-shell"
@@ -106594,14 +106603,245 @@ focus outline in that case.
   ], FvCard.prototype, "hasFooterEndContent", void 0);
   const okFvCard = FvCard.compose({
       baseName: 'fv-card',
-      template: template$f,
-      styles: styles$e
+      template: template$i,
+      styles: styles$h
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')
       .register(okFvCard());
 
-  const styles$d = css `
+  const styles$g = css `
+    ${display('block')}
+
+    :host {
+        color: ${bodyFontColor};
+        font: ${bodyFont};
+    }
+
+    .field {
+        display: grid;
+        grid-template-columns: 3px minmax(0, 1fr);
+        column-gap: ${standardPadding};
+    }
+
+    .marker {
+        width: 3px;
+        border-radius: 2px;
+    }
+
+    :host([status='changed']) .marker,
+    :host([status='will-clear']) .marker {
+        background: ${warningColor};
+    }
+
+    .content,
+    .control {
+        min-width: 0;
+    }
+
+    .header,
+    .actions {
+        display: flex;
+        align-items: center;
+        gap: ${smallPadding};
+    }
+
+    .header {
+        flex-wrap: wrap;
+        margin-block-end: 0;
+    }
+
+    .label {
+        font: ${controlLabelFont};
+        color: ${controlLabelFontColor};
+        margin-inline-end: auto;
+    }
+
+    .status {
+        font-size: 0.875em;
+        line-height: 1;
+        padding: 0 5px;
+        border: 1px solid ${informationColor};
+        border-radius: 4px;
+        color: ${informationColor};
+    }
+
+    :host([status='changed']) .status,
+    :host([status='will-clear']) .status {
+        border-color: ${warningColor};
+        color: ${warningFontColor};
+    }
+
+    .control {
+        display: block;
+    }
+
+    .actions {
+        justify-content: flex-end;
+        gap: 4px;
+        margin-inline-end: ${mediumPadding};
+        ${controlHeight.cssCustomProperty}: ${labelHeight};
+    }
+
+    ::slotted(:not([slot])) {
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+    }
+`;
+
+  const template$h = html `
+    <div class="field">
+        <span class="marker" aria-hidden="true"></span>
+        <div class="content">
+            <div class="header">
+                <span class="label">${x => x.label}</span>
+                ${when(x => x.statusText.length > 0, html `<span class="status">${x => x.statusText}</span>`)}
+                <div class="actions">
+                <${buttonTag}
+                    appearance="ghost"
+                    content-hidden
+                    title="${x => `Reset ${x.label}`}"
+                    ?disabled="${x => x.resetDisabled}"
+                    @click="${x => x.reset()}"
+                ><${iconArrowPartialRotateLeftTag} slot="start"></${iconArrowPartialRotateLeftTag}>Reset ${x => x.label}</${buttonTag}>
+                <${buttonTag}
+                    appearance="ghost"
+                    content-hidden
+                    title="${x => `Clear ${x.label} for selected rows`}"
+                    ?disabled="${x => x.clearDisabled}"
+                    @click="${x => x.clear()}"
+                ><${iconTimesTag} slot="start"></${iconTimesTag}>Clear ${x => x.label}</${buttonTag}>
+                <slot name="actions"></slot>
+                </div>
+            </div>
+            <div class="control">
+                <slot ${slotted({ property: 'controls', filter: elements() })}></slot>
+            </div>
+        </div>
+    </div>
+`;
+
+  const BulkEditFieldStatus = {
+      unchanged: 'unchanged',
+      mixed: 'mixed',
+      changed: 'changed',
+      willClear: 'will-clear'
+  };
+
+  /**
+   * A labeled field shell for single- and multi-record editing.
+   */
+  class FvBulkEditField extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          this.label = '';
+          this.status = BulkEditFieldStatus.unchanged;
+          this.resetDisabled = false;
+          this.clearDisabled = false;
+          /** @internal */
+          this.controls = [];
+          // Some controls reapply their own label bindings when reconnected.
+          this.labelObserver = new MutationObserver(() => this.updateControlLabels());
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          this.observeControlLabels();
+          this.updateControlLabels();
+      }
+      disconnectedCallback() {
+          this.labelObserver.disconnect();
+          super.disconnectedCallback();
+      }
+      /** Accessible name applied to directly slotted field controls. */
+      get controlLabel() {
+          const description = this.status === BulkEditFieldStatus.mixed
+              ? 'Mixed values. Enter a value to overwrite all selected rows.'
+              : this.statusText;
+          return description ? `${this.label}. ${description}` : this.label;
+      }
+      /** @internal */
+      controlsChanged() {
+          this.observeControlLabels();
+          this.updateControlLabels();
+      }
+      /** @internal */
+      labelChanged() {
+          this.updateControlLabels();
+      }
+      /** @internal */
+      statusChanged() {
+          this.updateControlLabels();
+      }
+      /** @internal */
+      get statusText() {
+          switch (this.status) {
+              case BulkEditFieldStatus.mixed:
+                  return 'Mixed values';
+              case BulkEditFieldStatus.changed:
+                  return 'Changed';
+              case BulkEditFieldStatus.willClear:
+                  return 'Will clear';
+              default:
+                  return '';
+          }
+      }
+      /** @internal */
+      reset() {
+          if (!this.resetDisabled) {
+              this.$emit('reset');
+          }
+          return true;
+      }
+      /** @internal */
+      clear() {
+          if (!this.clearDisabled) {
+              this.$emit('clear');
+          }
+          return true;
+      }
+      updateControlLabels() {
+          DOM.queueUpdate(() => {
+              this.controls?.forEach(control => {
+                  if (control.getAttribute('aria-label') !== this.controlLabel) {
+                      control.setAttribute('aria-label', this.controlLabel);
+                  }
+              });
+          });
+      }
+      observeControlLabels() {
+          this.labelObserver?.disconnect();
+          if (this.isConnected) {
+              this.controls?.forEach(control => this.labelObserver.observe(control, {
+                  attributes: true,
+                  attributeFilter: ['aria-label']
+              }));
+          }
+      }
+  }
+  __decorate([
+      attr
+  ], FvBulkEditField.prototype, "label", void 0);
+  __decorate([
+      attr
+  ], FvBulkEditField.prototype, "status", void 0);
+  __decorate([
+      attr({ attribute: 'reset-disabled', mode: 'boolean' })
+  ], FvBulkEditField.prototype, "resetDisabled", void 0);
+  __decorate([
+      attr({ attribute: 'clear-disabled', mode: 'boolean' })
+  ], FvBulkEditField.prototype, "clearDisabled", void 0);
+  __decorate([
+      observable
+  ], FvBulkEditField.prototype, "controls", void 0);
+  const okFvBulkEditField = FvBulkEditField.compose({
+      baseName: 'fv-bulk-edit-field',
+      template: template$h,
+      styles: styles$g
+  });
+  DesignSystem.getOrCreate().withPrefix('ok').register(okFvBulkEditField());
+
+  const styles$f = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -106849,7 +107089,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$e = html `
+  const template$g = html `
     <div class="chip-selector">
         ${when(x => x.label.length > 0, html `
                 <label id="${x => x.labelId}" class="label" for="${x => x.inputId}">
@@ -107339,12 +107579,12 @@ focus outline in that case.
   ], FvChipSelector.prototype, "field", void 0);
   const okFvChipSelector = FvChipSelector.compose({
       baseName: 'fv-chip-selector',
-      template: template$e,
-      styles: styles$d
+      template: template$g,
+      styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvChipSelector());
 
-  const styles$c = css `
+  const styles$e = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -107396,7 +107636,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$d = html `
+  const template$f = html `
     <button
         id="${x => x.tooltipAnchorId}"
         class="context-help-trigger"
@@ -107444,12 +107684,200 @@ focus outline in that case.
   ], FvContextHelp.prototype, "iconVisible", void 0);
   const okFvContextHelp = FvContextHelp.compose({
       baseName: 'fv-context-help',
-      template: template$d,
-      styles: styles$c
+      template: template$f,
+      styles: styles$e
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvContextHelp());
 
-  const styles$b = css `
+  const styles$d = css `
+    ${display('block')}
+
+    :host {
+        color: ${bodyFontColor};
+        font: ${bodyFont};
+        container-type: inline-size;
+    }
+
+    .bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: ${standardPadding};
+        padding: ${standardPadding};
+        border-block-end: 1px solid ${dividerBackgroundColor};
+    }
+
+    .text {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    .heading {
+        display: flex;
+        align-items: center;
+        gap: ${standardPadding};
+    }
+
+    h2 {
+        flex: 1 1 auto;
+        min-width: 0;
+        margin: 0;
+        font: inherit;
+        font-weight: 600;
+    }
+
+    .summary {
+        margin-block-start: 4px;
+    }
+
+    .actions {
+        display: flex;
+        flex: 0 0 auto;
+        gap: ${standardPadding};
+    }
+
+    @container (max-width: 420px) {
+        .bar {
+            flex-wrap: wrap;
+        }
+
+        .text {
+            flex-basis: 100%;
+        }
+
+        .actions {
+            margin-inline-start: auto;
+        }
+    }
+`;
+
+  const template$e = html `
+    ${when(x => x.message !== undefined, html `
+            <${bannerTag}
+                :open="${x => x.message !== undefined}"
+                title-hidden
+                severity="${x => x.message?.severity}"
+                aria-live="${x => (x.message?.severity === 'error' ? 'assertive' : 'polite')}"
+                @toggle="${(x, c) => x.handleBannerToggle(c.event)}"
+            >${x => x.message?.text}</${bannerTag}>
+        `)}
+    <div class="bar">
+        <div class="text">
+            <div class="heading">
+                <h2>${x => x.heading}</h2>
+                <slot name="heading-actions"></slot>
+            </div>
+            ${when(x => !x.hideEmptySummary || x.changeCount > 0, html `
+                    <div class="summary" role="status" aria-live="polite" aria-atomic="true">
+                        ${x => x.summary}
+                    </div>
+                `)}
+        </div>
+        ${when(x => !x.actionsHidden, html `
+                <div class="actions">
+                    <${buttonTag}
+                        appearance="ghost"
+                        ?disabled="${x => x.revertDisabled}"
+                        @click="${x => x.revert()}"
+                    ><${iconArrowPartialRotateLeftTag} slot="start"></${iconArrowPartialRotateLeftTag}>Revert</${buttonTag}>
+                    <${buttonTag}
+                        appearance="block"
+                        appearance-variant="accent"
+                        ?disabled="${x => x.saveDisabled}"
+                        @click="${x => x.save()}"
+                    ><${iconFloppyDiskTag} slot="start"></${iconFloppyDiskTag}>Save</${buttonTag}>
+                </div>
+            `)}
+    </div>
+`;
+
+  /**
+   * Heading, pending-change summary, actions, and feedback for an edit pane.
+   */
+  class FvEditCommitBar extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          this.heading = '';
+          this.changeCount = 0;
+          this.affectedRowCount = 0;
+          this.hiddenAffectedRowCount = 0;
+          this.saveDisabled = false;
+          this.revertDisabled = false;
+          this.actionsHidden = false;
+          this.hideEmptySummary = false;
+      }
+      /** @internal */
+      get summary() {
+          if (this.changeCount === 0) {
+              return 'No pending changes';
+          }
+          const changes = `${this.changeCount} unsaved ${this.changeCount === 1 ? 'change' : 'changes'}`;
+          const rows = `${this.affectedRowCount} ${this.affectedRowCount === 1 ? 'row' : 'rows'}`;
+          const hidden = this.hiddenAffectedRowCount > 0
+              ? ` (${this.hiddenAffectedRowCount} hidden)`
+              : '';
+          return `${changes} in ${rows}${hidden}`;
+      }
+      /** @internal */
+      save() {
+          if (!this.saveDisabled) {
+              this.$emit('save');
+          }
+          return true;
+      }
+      /** @internal */
+      revert() {
+          if (!this.revertDisabled) {
+              this.$emit('revert');
+          }
+          return true;
+      }
+      /** @internal */
+      handleBannerToggle(event) {
+          if (!event.detail.newState) {
+              this.$emit('dismiss-message');
+          }
+          return true;
+      }
+  }
+  __decorate([
+      attr
+  ], FvEditCommitBar.prototype, "heading", void 0);
+  __decorate([
+      attr({ attribute: 'change-count', converter: nullableNumberConverter })
+  ], FvEditCommitBar.prototype, "changeCount", void 0);
+  __decorate([
+      attr({ attribute: 'affected-row-count', converter: nullableNumberConverter })
+  ], FvEditCommitBar.prototype, "affectedRowCount", void 0);
+  __decorate([
+      attr({ attribute: 'hidden-affected-row-count', converter: nullableNumberConverter })
+  ], FvEditCommitBar.prototype, "hiddenAffectedRowCount", void 0);
+  __decorate([
+      attr({ attribute: 'save-disabled', mode: 'boolean' })
+  ], FvEditCommitBar.prototype, "saveDisabled", void 0);
+  __decorate([
+      attr({ attribute: 'revert-disabled', mode: 'boolean' })
+  ], FvEditCommitBar.prototype, "revertDisabled", void 0);
+  __decorate([
+      attr({ attribute: 'actions-hidden', mode: 'boolean' })
+  ], FvEditCommitBar.prototype, "actionsHidden", void 0);
+  __decorate([
+      attr({ attribute: 'hide-empty-summary', mode: 'boolean' })
+  ], FvEditCommitBar.prototype, "hideEmptySummary", void 0);
+  __decorate([
+      observable
+  ], FvEditCommitBar.prototype, "message", void 0);
+  __decorate([
+      volatile
+  ], FvEditCommitBar.prototype, "summary", null);
+  const okFvEditCommitBar = FvEditCommitBar.compose({
+      baseName: 'fv-edit-commit-bar',
+      template: template$e,
+      styles: styles$d
+  });
+  DesignSystem.getOrCreate().withPrefix('ok').register(okFvEditCommitBar());
+
+  const styles$c = css `
     @layer base, hover, selected;
 
     @layer base {
@@ -107546,7 +107974,7 @@ focus outline in that case.
     }
 `;
 
-  const template$c = html `
+  const template$d = html `
     <div class="item" part="item">
         <div class="text" part="text">
             <div class="title" part="title">${x => x.titleText}</div>
@@ -107647,13 +108075,13 @@ focus outline in that case.
   ], FvMasterDetailListItem.prototype, "hasStatusSlotContent", void 0);
   const okFvMasterDetailListItem = FvMasterDetailListItem.compose({
       baseName: 'fv-master-detail-list-item',
-      template: template$c,
-      styles: styles$b
+      template: template$d,
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailListItem());
   const fvMasterDetailListItemTag = 'ok-fv-master-detail-list-item';
 
-  const styles$a = css `
+  const styles$b = css `
     @layer base, hover, focusVisible;
 
     @layer base {
@@ -107718,7 +108146,7 @@ focus outline in that case.
     }
 `;
 
-  const template$b = html `
+  const template$c = html `
     <div class="master-detail-list">
         <div class="filter-row">
             <input
@@ -107912,15 +108340,15 @@ focus outline in that case.
   ], FvMasterDetailList.prototype, "items", void 0);
   const okFvMasterDetailList = FvMasterDetailList.compose({
       baseName: 'fv-master-detail-list',
-      template: template$b,
-      styles: styles$a,
+      template: template$c,
+      styles: styles$b,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailList());
 
-  const styles$9 = css `
+  const styles$a = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -108137,7 +108565,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$a = html `
+  const template$b = html `
     <div
         class="split-button-container"
         ${ref('splitButtonContainer')}
@@ -108309,12 +108737,12 @@ focus outline in that case.
   ], FvSplitButton.prototype, "region", void 0);
   const okFvSplitButton = FvSplitButton.compose({
       baseName: 'fv-split-button',
-      template: template$a,
-      styles: styles$9
+      template: template$b,
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButton());
 
-  const styles$8 = css `
+  const styles$9 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -108539,7 +108967,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$9 = html `
+  const template$a = html `
     <div
         class="split-button-container"
         ${ref('splitButtonContainer')}
@@ -108739,12 +109167,12 @@ focus outline in that case.
   ], FvSplitButtonAnchor.prototype, "region", void 0);
   const okFvSplitButtonAnchor = FvSplitButtonAnchor.compose({
       baseName: 'fv-split-button-anchor',
-      template: template$9,
-      styles: styles$8
+      template: template$a,
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButtonAnchor());
 
-  const styles$7 = css `
+  const styles$8 = css `
     ${display('block')}
 
     .sticky-header {
@@ -108763,7 +109191,7 @@ focus outline in that case.
     }
 `;
 
-  const template$8 = html `
+  const template$9 = html `
     <div class="header" part="header">
         <slot
             name="header"
@@ -108863,12 +109291,12 @@ focus outline in that case.
   ], FvStickyHeader.prototype, "showStickyHeader", void 0);
   const okFvStickyHeader = FvStickyHeader.compose({
       baseName: 'fv-sticky-header',
-      template: template$8,
-      styles: styles$7
+      template: template$9,
+      styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvStickyHeader());
 
-  const styles$6 = css `
+  const styles$7 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -108936,7 +109364,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$7 = html `
+  const template$8 = html `
     <section class="summary-panel" part="panel">
         <div
             ${ref('summaryItems')}
@@ -109080,12 +109508,12 @@ focus outline in that case.
   ], FvSummaryPanel.prototype, "editItemsButtonLabel", void 0);
   const okFvSummaryPanel = FvSummaryPanel.compose({
       baseName: 'fv-summary-panel',
-      template: template$7,
-      styles: styles$6
+      template: template$8,
+      styles: styles$7
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanel());
 
-  const styles$5 = css `
+  const styles$6 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -109243,7 +109671,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$6 = html `
+  const template$7 = html `
     <${cardButtonTag}
         class="summary-panel-tile"
         ?selected="${x => x.selected}"
@@ -109309,12 +109737,12 @@ focus outline in that case.
   ], FvSummaryPanelTile.prototype, "textPosition", void 0);
   const okFvSummaryPanelTile = FvSummaryPanelTile.compose({
       baseName: 'fv-summary-panel-tile',
-      template: template$6,
-      styles: styles$5
+      template: template$7,
+      styles: styles$6
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanelTile());
 
-  const styles$4 = css `
+  const styles$5 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -109489,7 +109917,7 @@ focus outline in that case.
     }
 `;
 
-  const template$5 = html `
+  const template$6 = html `
     <div class="search-input-container">
         <span class="search-input-icon" aria-hidden="true">
             <${iconMagnifyingGlassTag}></${iconMagnifyingGlassTag}>
@@ -109560,15 +109988,15 @@ focus outline in that case.
   const okFvSearchInput = FvSearchInput.compose({
       baseName: 'fv-search-input',
       baseClass: TextField$1,
-      template: template$5,
-      styles: styles$4,
+      template: template$6,
+      styles: styles$5,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSearchInput());
 
-  const styles$3 = css `
+  const styles$4 = css `
     @layer base, hover, focusVisible, active;
 
     @layer base {
@@ -109627,7 +110055,7 @@ focus outline in that case.
     }
 `;
 
-  const template$4 = html `
+  const template$5 = html `
     <div
         class="splitter"
         @pointerdown="${(x, c) => x.handlePointerDown(c.event)}"
@@ -109890,13 +110318,265 @@ focus outline in that case.
   ], FvSplitter.prototype, "resizing", void 0);
   const okFvSplitter = FvSplitter.compose({
       baseName: 'fv-splitter',
-      template: template$4,
-      styles: styles$3,
+      template: template$5,
+      styles: styles$4,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitter());
+  const fvSplitterTag = 'ok-fv-splitter';
+
+  const styles$3 = css `
+    ${display('block')}
+
+    :host {
+        min-width: 0;
+        min-height: 0;
+        height: 100%;
+    }
+
+    .layout {
+        display: grid;
+        width: 100%;
+        height: 100%;
+        min-width: 0;
+        min-height: 0;
+        overflow: auto;
+    }
+
+    .pane {
+        min-width: 0;
+        min-height: 0;
+        height: 100%;
+        overflow: auto;
+    }
+
+    slot {
+        display: block;
+        min-width: 0;
+        min-height: 0;
+        height: 100%;
+    }
+
+    ::slotted([slot]) {
+        box-sizing: border-box;
+        min-width: 0;
+        min-height: 0;
+        height: 100%;
+    }
+`;
+
+  const template$4 = html `
+    <div class="layout" style="grid-template-columns: ${x => x.gridTemplateColumns}">
+        <div class="pane primary" id="${x => x.primaryPaneId}">
+            <slot name="primary"></slot>
+        </div>
+        ${when(x => !x.collapsed, html `
+                <${fvSplitterTag}
+                    position="${x => x.position}"
+                    min="${x => x.effectiveMin}"
+                    max="${x => x.effectiveMax}"
+                    step="${x => x.step}"
+                    aria-controls="${x => `${x.primaryPaneId} ${x.secondaryPaneId}`}"
+                    @input="${(x, c) => x.handleSplitterInput(c.event)}"
+                    @change="${(x, c) => x.handleSplitterChange(c.event)}"
+                ></${fvSplitterTag}>
+                <div class="pane secondary" id="${x => x.secondaryPaneId}">
+                    <slot name="secondary"></slot>
+                </div>
+            `)}
+    </div>
+`;
+
+  let nextLayoutId = 0;
+  function takeLayoutId() {
+      const id = nextLayoutId;
+      nextLayoutId += 1;
+      return id;
+  }
+  /**
+   * A full-height, resizable two-pane layout.
+   */
+  class FvSplitLayout extends FoundationElement {
+      constructor() {
+          super();
+          this.position = 60;
+          this.min = 35;
+          this.max = 75;
+          this.minSecondaryPixels = 300;
+          this.collapsed = false;
+          this.step = 1;
+          this.primaryPaneId = '';
+          this.secondaryPaneId = '';
+          /** @internal */
+          this.availableWidth = 0;
+          this.resizeObserver = new ResizeObserver(entries => {
+              this.availableWidth = entries[0]?.contentRect.width ?? 0;
+              this.constrainPosition();
+          });
+          this.requestedPosition = this.position;
+          this.applyingConstrainedPosition = false;
+          this.requestedPositionResetScheduled = false;
+          this.positionChangeCallbackVersion = 0;
+          const layoutId = takeLayoutId();
+          this.primaryPaneId = `ok-fv-split-layout-primary-${layoutId}`;
+          this.secondaryPaneId = `ok-fv-split-layout-secondary-${layoutId}`;
+          const positionDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(this), 'position');
+          if (!positionDescriptor?.get || !positionDescriptor.set) {
+              return;
+          }
+          const getPosition = positionDescriptor.get.bind(this);
+          const setPosition = positionDescriptor.set.bind(this);
+          Object.defineProperty(this, 'position', {
+              configurable: true,
+              enumerable: positionDescriptor.enumerable,
+              get: getPosition,
+              set: (value) => {
+                  const previousPosition = getPosition();
+                  const callbackVersion = this.positionChangeCallbackVersion;
+                  setPosition(value);
+                  if (!this.applyingConstrainedPosition
+                      && callbackVersion === this.positionChangeCallbackVersion
+                      && previousPosition === getPosition()) {
+                      this.requestedPosition = getPosition();
+                  }
+              }
+          });
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          this.resizeObserver.observe(this);
+      }
+      disconnectedCallback() {
+          this.resizeObserver.disconnect();
+          super.disconnectedCallback();
+      }
+      positionChanged() {
+          this.positionChangeCallbackVersion += 1;
+          if (!this.applyingConstrainedPosition) {
+              this.requestedPosition = this.position;
+              this.resetRequestedPositionAfterSynchronousUpdates();
+          }
+          this.constrainPosition();
+      }
+      minChanged() {
+          this.constrainPosition();
+      }
+      maxChanged() {
+          this.constrainPosition();
+      }
+      minSecondaryPixelsChanged() {
+          this.constrainPosition();
+      }
+      collapsedChanged() {
+          this.constrainPosition();
+      }
+      /** @internal */
+      get effectiveMin() {
+          const configured = Number.isFinite(this.min) ? Math.min(100, Math.max(0, this.min)) : 35;
+          return Math.min(configured, this.effectiveMax);
+      }
+      /** @internal */
+      get effectiveMax() {
+          const minimum = Number.isFinite(this.min) ? Math.min(100, Math.max(0, this.min)) : 35;
+          const configured = Number.isFinite(this.max)
+              ? Math.min(100, Math.max(minimum, this.max))
+              : Math.max(minimum, 75);
+          const secondaryMinimum = this.effectiveMinSecondaryPixels;
+          if (this.availableWidth <= 2 || secondaryMinimum <= 0) {
+              return configured;
+          }
+          const pixelMaximum = 100 * (1 - secondaryMinimum / (this.availableWidth - 2));
+          return Math.max(0, Math.min(configured, pixelMaximum));
+      }
+      /** @internal */
+      get gridTemplateColumns() {
+          const secondaryMinimum = this.effectiveMinSecondaryPixels;
+          return this.collapsed
+              ? 'minmax(0, 1fr)'
+              : `minmax(0, ${this.position}fr) 2px minmax(${secondaryMinimum}px, ${100 - this.position}fr)`;
+      }
+      /** @internal */
+      handleSplitterInput(event) {
+          event.stopPropagation();
+          this.position = event.currentTarget.position;
+          this.$emit('input');
+          return true;
+      }
+      /** @internal */
+      handleSplitterChange(event) {
+          event.stopPropagation();
+          this.$emit('change');
+          return true;
+      }
+      constrainPosition() {
+          if (this.collapsed) {
+              return;
+          }
+          const finitePosition = Number.isFinite(this.requestedPosition) ? this.requestedPosition : 60;
+          const constrained = Math.min(this.effectiveMax, Math.max(this.effectiveMin, finitePosition));
+          if (constrained !== this.position) {
+              this.applyingConstrainedPosition = true;
+              this.position = constrained;
+              this.applyingConstrainedPosition = false;
+          }
+      }
+      resetRequestedPositionAfterSynchronousUpdates() {
+          if (this.requestedPositionResetScheduled) {
+              return;
+          }
+          this.requestedPositionResetScheduled = true;
+          queueMicrotask(() => {
+              this.requestedPositionResetScheduled = false;
+              this.requestedPosition = this.position;
+          });
+      }
+      get effectiveMinSecondaryPixels() {
+          return Number.isFinite(this.minSecondaryPixels)
+              ? Math.max(0, this.minSecondaryPixels)
+              : 300;
+      }
+  }
+  __decorate([
+      attr({ converter: nullableNumberConverter })
+  ], FvSplitLayout.prototype, "position", void 0);
+  __decorate([
+      attr({ converter: nullableNumberConverter })
+  ], FvSplitLayout.prototype, "min", void 0);
+  __decorate([
+      attr({ converter: nullableNumberConverter })
+  ], FvSplitLayout.prototype, "max", void 0);
+  __decorate([
+      attr({ attribute: 'min-secondary-pixels', converter: nullableNumberConverter })
+  ], FvSplitLayout.prototype, "minSecondaryPixels", void 0);
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], FvSplitLayout.prototype, "collapsed", void 0);
+  __decorate([
+      attr({ converter: nullableNumberConverter })
+  ], FvSplitLayout.prototype, "step", void 0);
+  __decorate([
+      attr({ attribute: 'primary-pane-id' })
+  ], FvSplitLayout.prototype, "primaryPaneId", void 0);
+  __decorate([
+      attr({ attribute: 'secondary-pane-id' })
+  ], FvSplitLayout.prototype, "secondaryPaneId", void 0);
+  __decorate([
+      observable
+  ], FvSplitLayout.prototype, "availableWidth", void 0);
+  __decorate([
+      volatile
+  ], FvSplitLayout.prototype, "effectiveMax", null);
+  __decorate([
+      volatile
+  ], FvSplitLayout.prototype, "gridTemplateColumns", null);
+  const okFvSplitLayout = FvSplitLayout.compose({
+      baseName: 'fv-split-layout',
+      template: template$4,
+      styles: styles$3
+  });
+  DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitLayout());
 
   const styles$2 = css `
     ${display('inline-block')}
@@ -110447,7 +111127,7 @@ focus outline in that case.
 
   const template = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$N}</template
+        >${template$Q}</template
     >
 `;
 
@@ -110533,7 +111213,7 @@ focus outline in that case.
   const tsTableColumnBreakpoint = TsTableColumnBreakpoint.compose({
       baseName: 'ts-table-column-breakpoint',
       template,
-      styles: styles$M
+      styles: styles$P
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')