@ni/ok-components 1.5.1 → 1.6.0

package/dist/all-components-bundle.js

@@ -14902,9 +14902,9 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$1j = html `<slot></slot>`;
+  const template$1l = html `<slot></slot>`;
 
-  const styles$1z = css `
+  const styles$1B = css `
     ${display$2('contents')}
 
     :host {
@@ -15028,8 +15028,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$1z,
-      template: template$1j
+      styles: styles$1B,
+      template: template$1l
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16675,7 +16675,7 @@
   }
   // #endregion
 
-  const styles$1y = css `
+  const styles$1A = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -16753,7 +16753,7 @@
     }
 `;
 
-  const template$1i = (_context, definition) => html `${
+  const template$1k = (_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
@@ -16856,8 +16856,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$1i,
-      styles: styles$1y,
+      template: template$1k,
+      styles: styles$1A,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16966,7 +16966,7 @@
     padding: 0;
 `;
 
-  const styles$1x = css `
+  const styles$1z = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17250,8 +17250,8 @@
             }
         `));
 
-  const styles$1w = css `
-    ${styles$1x}
+  const styles$1y = css `
+    ${styles$1z}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17271,7 +17271,7 @@
     }
 `;
 
-  const template$1h = (context, definition) => html `
+  const template$1j = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17353,8 +17353,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$1h,
-      styles: styles$1w,
+      template: template$1j,
+      styles: styles$1y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17362,7 +17362,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$1v = css `
+  const styles$1x = css `
     ${display$2('grid')}
 
     :host {
@@ -17445,7 +17445,7 @@
     }
 `;
 
-  const template$1g = (context, definition) => html `
+  const template$1i = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17546,8 +17546,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$1g,
-      styles: styles$1v,
+      template: template$1i,
+      styles: styles$1x,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17559,7 +17559,7 @@
 
   // These styles end up inside a @layer block so must use the
   // cssPartial tag instead of the css tag
-  const styles$1u = cssPartial `
+  const styles$1w = cssPartial `
     .severity-text {
         display: none;
         font: ${errorTextFont};
@@ -17669,12 +17669,12 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$1t = css `
+  const styles$1v = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$2('inline-flex')}
-        ${styles$1u}
+        ${styles$1w}
         :host {
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
@@ -18220,8 +18220,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             }
         `));
 
-  const styles$1s = css `
-    ${styles$1t}
+  const styles$1u = css `
+    ${styles$1v}
     ${'' /* Anchor specific styles */}
     @layer base {
         .control {
@@ -19268,13 +19268,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$1f = html `<div
+  const template$1h = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$1r = css `
+  const styles$1t = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19337,8 +19337,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$1f,
-          styles: styles$1r
+          template: template$1h,
+          styles: styles$1t
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19462,7 +19462,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
    */
   const StepperOrientation = Orientation;
 
-  const template$1e = (context, definition) => html `
+  const template$1g = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -19609,15 +19609,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$1e,
-      styles: styles$1s,
+      template: template$1g,
+      styles: styles$1u,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
 
-  const styles$1q = css `
+  const styles$1s = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19734,7 +19734,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$1d = (context, definition) => html `
+  const template$1f = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -19786,15 +19786,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$1d,
-      styles: styles$1q,
+      template: template$1f,
+      styles: styles$1s,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$1p = css `
+  const styles$1r = css `
     ${display$2('flex')}
 
     :host {
@@ -19834,12 +19834,12 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const styles$1o = css `
-    ${styles$1x}
+  const styles$1q = css `
+    ${styles$1z}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$1c = (context, definition) => html `
+  const template$1e = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -19930,8 +19930,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$1c,
-      styles: styles$1o,
+      template: template$1e,
+      styles: styles$1q,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19965,7 +19965,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$1b = (context, definition) => html `
+  const template$1d = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -20266,15 +20266,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$1b,
-      styles: styles$1p,
+      template: template$1d,
+      styles: styles$1r,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$1n = css `
+  const styles$1p = css `
     ${display$2('block')}
 
     :host {
@@ -20379,7 +20379,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$1a = (context, definition) => html `
+  const template$1c = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -20516,8 +20516,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$1a,
-      styles: styles$1n,
+      template: template$1c,
+      styles: styles$1p,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20533,7 +20533,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       zIndex1000: '1000'
   };
 
-  const styles$1m = css `
+  const styles$1o = css `
     ${display$2('block')}
 
     :host {
@@ -20564,14 +20564,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$1m
+      styles: styles$1o
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  const styles$1l = css `
+  const styles$1n = css `
     ${display$2('flex')}
 
     :host {
@@ -20723,7 +20723,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       information: 'information'
   };
 
-  const template$19 = html `
+  const template$1b = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -20841,8 +20841,8 @@ 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$19,
-      styles: styles$1l
+      template: template$1b,
+      styles: styles$1n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -20883,7 +20883,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     </template>
 `;
 
-  const styles$1k = css `
+  const styles$1m = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20987,11 +20987,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$1k
+      styles: styles$1m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$1j = css `
+  const styles$1l = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -21088,14 +21088,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$1j,
+      styles: styles$1l,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$1i = css `
+  const styles$1k = css `
     ${display$2('flex')}
 
     :host {
@@ -21119,7 +21119,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$18 = html `
+  const template$1a = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -21134,12 +21134,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$18,
-      styles: styles$1i
+      template: template$1a,
+      styles: styles$1k
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$1h = css `
+  const styles$1j = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21297,7 +21297,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$1h,
+      styles: styles$1j,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21305,7 +21305,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   const cardButtonTag = 'nimble-card-button';
 
-  const styles$1g = css `
+  const styles$1i = css `
     .error-icon {
         display: none;
     }
@@ -21339,9 +21339,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$1f = css `
+  const styles$1h = css `
     ${display$2('inline-grid')}
-    ${styles$1g}
+    ${styles$1i}
 
     :host {
         font: ${bodyFont};
@@ -21481,7 +21481,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$17 = (_context, definition) => html `
+  const template$19 = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -21578,8 +21578,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$17,
-      styles: styles$1f,
+      template: template$19,
+      styles: styles$1h,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
@@ -21591,7 +21591,7 @@ so this becomes the fallback color for the slot */ ''}
       block: 'block'
   };
 
-  const styles$1e = css `
+  const styles$1g = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21652,7 +21652,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$16 = (context, definition) => html `
+  const template$18 = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <span
         class="content"
@@ -21738,8 +21738,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Chip, StartEnd);
   const nimbleChip = Chip.compose({
       baseName: 'chip',
-      template: template$16,
-      styles: styles$1e,
+      template: template$18,
+      styles: styles$1g,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21747,8 +21747,8 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleChip());
   const chipTag = 'nimble-chip';
 
-  const styles$1d = css `
-    ${styles$1x}
+  const styles$1f = css `
+    ${styles$1z}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -21795,7 +21795,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$15 = (context, definition) => html `
+  const template$17 = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -21890,8 +21890,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$15,
-      styles: styles$1d,
+      template: template$17,
+      styles: styles$1f,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21921,7 +21921,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$1c = css `
+  const styles$1e = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -22211,7 +22211,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$1b = css `
+  const styles$1d = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -22238,10 +22238,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$1a = css `
-    ${styles$1c}
-    ${styles$1g}
-    ${styles$1b}
+  const styles$1c = css `
+    ${styles$1e}
+    ${styles$1i}
+    ${styles$1d}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -22362,7 +22362,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  const template$14 = (context, definition) => html `
+  const template$16 = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -23137,8 +23137,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$14,
-      styles: styles$1a,
+      template: template$16,
+      styles: styles$1c,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -23182,7 +23182,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$19 = css `
+  const styles$1b = css `
     ${display$2('grid')}
 
     dialog {
@@ -23275,7 +23275,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$13 = html `
+  const template$15 = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -23423,13 +23423,13 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$13,
-      styles: styles$19,
+      template: template$15,
+      styles: styles$1b,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$18 = css `
+  const styles$1a = css `
     ${display$2('block')}
 
     :host {
@@ -23572,7 +23572,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$12 = html `
+  const template$14 = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -23714,8 +23714,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$12,
-      styles: styles$18
+      template: template$14,
+      styles: styles$1a
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -24455,6 +24455,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
   registerIconSvg('icon-circle-filled', IconCircleFilled);
+  const iconCircleFilledTag = 'nimble-icon-circle-filled';
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -26513,7 +26514,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$17 = css `
+  const styles$19 = css `
     ${display$2('none')}
 `;
 
@@ -26586,7 +26587,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$17
+      styles: styles$19
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26753,13 +26754,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$17
+      styles: styles$19
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$16 = css `
+  const styles$18 = css `
     ${display$2('flex')}
 
     :host {
@@ -26835,7 +26836,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$11 = (context, definition) => html `
+  const template$13 = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -26937,13 +26938,13 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$11,
-      styles: styles$16
+      template: template$13,
+      styles: styles$18
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$15 = css `
+  const styles$17 = css `
     ${display$2('flex')}
 
     :host {
@@ -27005,7 +27006,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$10 = html `
+  const template$12 = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -27147,8 +27148,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$10,
-      styles: styles$15
+      template: template$12,
+      styles: styles$17
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -27175,9 +27176,9 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$$ = html `<template slot="mapping"></template>`;
+  const template$11 = html `<template slot="mapping"></template>`;
 
-  const styles$14 = css `
+  const styles$16 = css `
     ${display$2('none')}
 `;
 
@@ -27193,8 +27194,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$$,
-      styles: styles$14
+      template: template$11,
+      styles: styles$16
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -27264,8 +27265,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$$,
-      styles: styles$14
+      template: template$11,
+      styles: styles$16
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -27288,8 +27289,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$$,
-      styles: styles$14
+      template: template$11,
+      styles: styles$16
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -27305,8 +27306,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$$,
-      styles: styles$14
+      template: template$11,
+      styles: styles$16
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -27608,7 +27609,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  const template$_ = () => html `
+  const template$10 = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -27625,7 +27626,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$13 = css `
+  const styles$15 = css `
     ${display$2('grid')}
 
     :host {
@@ -27696,8 +27697,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$_,
-      styles: styles$13
+      template: template$10,
+      styles: styles$15
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   const menuTag = 'nimble-menu';
@@ -27714,7 +27715,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$12 = css `
+  const styles$14 = css `
     ${display$2('inline-block')}
 
     :host {
@@ -27732,7 +27733,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$Z = html `
+  const template$$ = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -27982,8 +27983,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$Z,
-      styles: styles$12,
+      template: template$$,
+      styles: styles$14,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -27991,7 +27992,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$11 = css `
+  const styles$13 = css `
     ${display$2('grid')}
 
     :host {
@@ -28088,7 +28089,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$11,
+      styles: styles$13,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -28104,10 +28105,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$10 = css `
+  const styles$12 = css `
     ${display$2('inline-block')}
-    ${styles$1g}
-    ${styles$1b}
+    ${styles$1i}
+    ${styles$1d}
 
     :host {
         font: ${bodyFont};
@@ -28330,7 +28331,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$Y = (context, definition) => html `
+  const template$_ = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -28484,8 +28485,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$Y,
-      styles: styles$10,
+      template: template$_,
+      styles: styles$12,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -28528,7 +28529,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$$ = css `
+  const styles$11 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -28628,15 +28629,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$$,
+      styles: styles$11,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$_ = css `
+  const styles$10 = css `
     ${display$2('inline-block')}
-    ${styles$1g}
-    ${styles$1b}
+    ${styles$1i}
+    ${styles$1d}
 
     .positioning-region {
         display: flex;
@@ -28675,7 +28676,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$X = html `
+  const template$Z = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -28715,8 +28716,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$X,
-      styles: styles$_,
+      template: template$Z,
+      styles: styles$10,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -48355,7 +48356,7 @@ ${indentedChild}`;
   // src/index.ts
   var index_default$7 = HardBreak;
 
-  const styles$Z = css `
+  const styles$$ = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -48392,7 +48393,7 @@ ${indentedChild}`;
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$Z
+      styles: styles$$
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -48421,8 +48422,8 @@ ${indentedChild}`;
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$Y = css `
-    ${styles$1c}
+  const styles$_ = css `
+    ${styles$1e}
 
     :host {
         height: auto;
@@ -48440,7 +48441,7 @@ ${indentedChild}`;
     }
 `;
 
-  const template$W = html `
+  const template$Y = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -48728,15 +48729,15 @@ ${indentedChild}`;
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$W,
-      styles: styles$Y
+      template: template$Y,
+      styles: styles$_
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  const template$V = html `
+  const template$X = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -48838,9 +48839,9 @@ ${indentedChild}`;
     </template>
 `;
 
-  const styles$X = css `
+  const styles$Z = css `
     ${display$2('inline-flex')}
-    ${styles$1g}
+    ${styles$1i}
 
     :host {
         font: ${bodyFont};
@@ -65853,8 +65854,8 @@ ${indentedChild}`;
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$V,
-      styles: styles$X,
+      template: template$X,
+      styles: styles$Z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -65863,13 +65864,13 @@ ${indentedChild}`;
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$U = html `
+  const template$W = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
 `;
 
-  const styles$W = css `
+  const styles$Y = css `
     ${display$2('flex')}
 
     :host {
@@ -65982,17 +65983,17 @@ ${indentedChild}`;
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$U,
-      styles: styles$W
+      template: template$W,
+      styles: styles$Y
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$V = css `
-    ${styles$1c}
-    ${styles$1g}
-    ${styles$1b}
+  const styles$X = css `
+    ${styles$1e}
+    ${styles$1i}
+    ${styles$1d}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -66155,7 +66156,7 @@ ${indentedChild}`;
             }
         `));
 
-  const styles$U = css `
+  const styles$W = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -66325,7 +66326,7 @@ ${indentedChild}`;
             }
         `));
 
-  const template$T = html `
+  const template$V = html `
     <template role="progressbar">
         ${''
 /**
@@ -66372,8 +66373,8 @@ ${indentedChild}`;
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$T,
-      styles: styles$U
+      template: template$V,
+      styles: styles$W
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -66389,7 +66390,7 @@ ${indentedChild}`;
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$S = (context, definition) => html `
+  const template$U = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -67601,8 +67602,8 @@ ${indentedChild}`;
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$S,
-      styles: styles$V,
+      template: template$U,
+      styles: styles$X,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -67615,8 +67616,8 @@ ${indentedChild}`;
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$T = css `
-    ${styles$1t}
+  const styles$V = css `
+    ${styles$1v}
     ${'' /* Button specific styles */}
     @layer base {
         .control {
@@ -67627,7 +67628,7 @@ ${indentedChild}`;
     }
 `;
 
-  const template$R = (context, definition) => html `
+  const template$T = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -67749,15 +67750,15 @@ ${indentedChild}`;
   ], Step.prototype, "tabIndex", void 0);
   const nimbleStep = Step.compose({
       baseName: 'step',
-      template: template$R,
-      styles: styles$T,
+      template: template$T,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
 
-  const styles$S = css `
+  const styles$U = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -67828,7 +67829,7 @@ ${indentedChild}`;
     }
 `;
 
-  const template$Q = html `
+  const template$S = html `
     ${when(x => x.showScrollButtons, html `
         <${buttonTag}
             content-hidden
@@ -67973,12 +67974,12 @@ ${indentedChild}`;
   ], Stepper.prototype, "steps", void 0);
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
-      template: template$Q,
-      styles: styles$S
+      template: template$S,
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
 
-  const styles$R = css `
+  const styles$T = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -68205,7 +68206,7 @@ ${indentedChild}`;
             }
         `));
 
-  const template$P = html `
+  const template$R = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -68249,12 +68250,12 @@ ${indentedChild}`;
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$P,
-      styles: styles$R
+      template: template$R,
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$Q = css `
+  const styles$S = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -68365,11 +68366,11 @@ ${indentedChild}`;
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$Q
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$P = css `
+  const styles$R = css `
     ${display$2('block')}
 
     :host {
@@ -68388,7 +68389,7 @@ ${indentedChild}`;
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$P
+      styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -72131,7 +72132,7 @@ ${indentedChild}`;
       }
   }
 
-  const styles$O = css `
+  const styles$Q = css `
     ${display$2('flex')}
 
     :host {
@@ -72369,7 +72370,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$N = css `
+  const styles$P = css `
     ${display$2('flex')}
 
     :host {
@@ -72402,7 +72403,7 @@ focus outline in that case.
     }
 `;
 
-  const template$O = html `
+  const template$Q = html `
     <template role="columnheader"
         class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
@@ -72488,13 +72489,13 @@ focus outline in that case.
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$O,
-      styles: styles$N
+      template: template$Q,
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$M = css `
+  const styles$O = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -72519,9 +72520,9 @@ focus outline in that case.
     }
 `;
 
-  const styles$L = css `
+  const styles$N = css `
     ${display$2('flex')}
-    ${styles$M}
+    ${styles$O}
 
     :host {
         width: fit-content;
@@ -72767,7 +72768,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$K = css `
+  const styles$M = css `
     ${display$2('flex')}
 
     :host {
@@ -72812,7 +72813,7 @@ focus outline in that case.
     }
 `;
 
-  const template$N = html `
+  const template$P = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
         @blur="${x => x.onCellBlur()}"
@@ -72909,8 +72910,8 @@ focus outline in that case.
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$N,
-      styles: styles$K
+      template: template$P,
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
@@ -72946,7 +72947,7 @@ focus outline in that case.
         `)}
     </${tableCellTag}>
 `;
-  const template$M = html `
+  const template$O = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -73322,15 +73323,15 @@ focus outline in that case.
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$M,
-      styles: styles$L
+      template: template$O,
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$J = css `
+  const styles$L = css `
     ${display$2('grid')}
-    ${styles$M}
+    ${styles$O}
 
     :host {
         align-items: center;
@@ -73503,7 +73504,7 @@ focus outline in that case.
             }
         `));
 
-  const template$L = html `
+  const template$N = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -73679,8 +73680,8 @@ focus outline in that case.
   ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$L,
-      styles: styles$J
+      template: template$N,
+      styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
@@ -73700,7 +73701,7 @@ focus outline in that case.
         <slot name="${x => x.slot}"></slot>
     </${tableHeaderTag}>
 `;
-  const template$K = html `
+  const template$M = html `
     <template
         role="treegrid"
         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
@@ -78433,12 +78434,12 @@ focus outline in that case.
   ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
-      template: template$K,
-      styles: styles$O
+      template: template$M,
+      styles: styles$Q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$I = css `
+  const styles$K = css `
     ${display$2('contents')}
 
     .header-content {
@@ -78450,7 +78451,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$J = html `<span
+  const template$L = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -78515,7 +78516,7 @@ focus outline in that case.
       return ColumnWithPlaceholder;
   }
 
-  const styles$H = css `
+  const styles$J = css `
     ${display$2('flex')}
 
     :host {
@@ -78546,7 +78547,7 @@ focus outline in that case.
     }
 `;
 
-  const template$I = html `
+  const template$K = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -78638,8 +78639,8 @@ focus outline in that case.
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$I,
-      styles: styles$H
+      template: template$K,
+      styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -78716,7 +78717,7 @@ focus outline in that case.
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$H = html `
+  const template$J = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -78725,7 +78726,7 @@ focus outline in that case.
     </span>
 `;
 
-  const styles$G = css `
+  const styles$I = css `
     ${display$2('flex')}
 
     span {
@@ -78749,8 +78750,8 @@ focus outline in that case.
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$H,
-      styles: styles$G
+      template: template$J,
+      styles: styles$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78994,8 +78995,8 @@ focus outline in that case.
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$J,
-      styles: styles$I
+      template: template$L,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79047,15 +79048,15 @@ focus outline in that case.
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$H,
-      styles: styles$G
+      template: template$J,
+      styles: styles$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(tableColumnDateTextGroupHeaderView());
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
-  const template$G = html `
+  const template$I = html `
     <template
         class="
             ${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}
@@ -79071,7 +79072,7 @@ focus outline in that case.
     </template>
 `;
 
-  const styles$F = css `
+  const styles$H = css `
     ${display$2('flex')}
 
     :host {
@@ -79173,8 +79174,8 @@ focus outline in that case.
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$G,
-      styles: styles$F
+      template: template$I,
+      styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -79432,8 +79433,8 @@ focus outline in that case.
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$J,
-      styles: styles$I
+      template: template$L,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79449,8 +79450,8 @@ focus outline in that case.
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$G,
-      styles: styles$F
+      template: template$I,
+      styles: styles$H
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79551,8 +79552,8 @@ focus outline in that case.
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$H,
-      styles: styles$G
+      template: template$J,
+      styles: styles$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79604,8 +79605,8 @@ focus outline in that case.
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$J,
-      styles: styles$I
+      template: template$L,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79713,15 +79714,15 @@ focus outline in that case.
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$E = css `
-    ${styles$I}
+  const styles$G = css `
+    ${styles$K}
 
     slot[name='mapping'] {
         display: none;
     }
 `;
 
-  const template$F = html `${template$J}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$H = html `${template$L}<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
@@ -79824,7 +79825,7 @@ focus outline in that case.
       }
   }
 
-  const styles$D = css `
+  const styles$F = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -79848,7 +79849,7 @@ focus outline in that case.
     }
 `;
 
-  const template$E = html `
+  const template$G = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -79992,15 +79993,15 @@ focus outline in that case.
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
-      template: template$E,
-      styles: styles$D
+      template: template$G,
+      styles: styles$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$C = css `
+  const styles$E = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -80024,7 +80025,7 @@ focus outline in that case.
     }
 `;
 
-  const template$D = html `
+  const template$F = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -80111,8 +80112,8 @@ focus outline in that case.
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
-      template: template$D,
-      styles: styles$C
+      template: template$F,
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -80195,23 +80196,23 @@ focus outline in that case.
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
-      template: template$F,
-      styles: styles$E
+      template: template$H,
+      styles: styles$G
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnMapping());
 
-  const template$C = html `
+  const template$E = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$J}</template
+        >${template$L}</template
     >
 `;
 
   /** @internal */
   const cellViewMenuSlotName = 'menu-button-menu';
 
-  const template$B = html `
+  const template$D = html `
     ${when(x => x.showMenuButton, html `
         <${menuButtonTag}
             ${ref('menuButton')}
@@ -80230,7 +80231,7 @@ focus outline in that case.
     `)}
 `;
 
-  const styles$B = css `
+  const styles$D = css `
     :host {
         align-self: center;
         width: 100%;
@@ -80305,8 +80306,8 @@ focus outline in that case.
   ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
-      template: template$B,
-      styles: styles$B
+      template: template$D,
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
   const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
@@ -80361,8 +80362,8 @@ focus outline in that case.
   ], TableColumnMenuButton.prototype, "menuSlot", void 0);
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
-      template: template$C,
-      styles: styles$I
+      template: template$E,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -80370,7 +80371,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$A = html `<span
+  const template$C = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -80389,8 +80390,8 @@ focus outline in that case.
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$H,
-      styles: styles$G
+      template: template$J,
+      styles: styles$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -80411,8 +80412,8 @@ focus outline in that case.
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$G,
-      styles: styles$F
+      template: template$I,
+      styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -80952,8 +80953,8 @@ focus outline in that case.
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$A,
-      styles: styles$I
+      template: template$C,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -80971,8 +80972,8 @@ focus outline in that case.
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$G,
-      styles: styles$F
+      template: template$I,
+      styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -81026,15 +81027,15 @@ focus outline in that case.
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$J,
-      styles: styles$I
+      template: template$L,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$A = css `
-    ${styles$1p}
+  const styles$C = css `
+    ${styles$1r}
 
     .tabpanel {
         overflow: auto;
@@ -81115,12 +81116,12 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$1b,
-      styles: styles$A
+      template: template$1d,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$z = css `
+  const styles$B = css `
     ${display$2('flex')}
 
     :host {
@@ -81152,7 +81153,7 @@ focus outline in that case.
     }
 `;
 
-  const template$z = (context, definition) => html `
+  const template$B = (context, definition) => html `
     <template slot="end">
         ${when(x => x.defaultSlottedElements.length > 0, html `
             <div class="separator"></div>
@@ -81184,8 +81185,8 @@ focus outline in that case.
   ], TabsToolbar.prototype, "defaultSlottedElements", void 0);
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
-      template: template$z,
-      styles: styles$z
+      template: template$B,
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
   applyMixins(TabsToolbar, StartEnd);
@@ -81195,10 +81196,10 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$y = css `
+  const styles$A = css `
     ${display$2('inline-flex')}
-    ${styles$1g}
-    ${styles$1b}
+    ${styles$1i}
+    ${styles$1d}
 
     :host {
         font: ${bodyFont};
@@ -81390,7 +81391,7 @@ focus outline in that case.
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
 `);
-  const template$y = () => html `
+  const template$A = () => html `
     ${labelTemplate$1}
     <div class="container">
         <textarea
@@ -81538,8 +81539,8 @@ focus outline in that case.
   const nimbleTextArea = TextArea.compose({
       baseName: 'text-area',
       baseClass: TextArea$1,
-      template: template$y,
-      styles: styles$y,
+      template: template$A,
+      styles: styles$A,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -81556,10 +81557,10 @@ focus outline in that case.
       frameless: 'frameless'
   };
 
-  const styles$x = css `
+  const styles$z = css `
     ${display$2('inline-block')}
-    ${styles$1g}
-    ${styles$1b}
+    ${styles$1i}
+    ${styles$1d}
 
     :host {
         font: ${bodyFont};
@@ -81833,7 +81834,7 @@ focus outline in that case.
    * The template for the {@link @ni/fast-foundation#(TextField:class)} component.
    * @public
    */
-  const template$x = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <template
         class="
             ${x => (x.readOnly ? 'readonly' : '')}
@@ -81918,8 +81919,8 @@ focus outline in that case.
   const nimbleTextField = TextField.compose({
       baseName: 'text-field',
       baseClass: TextField$1,
-      template: template$x,
-      styles: styles$x,
+      template: template$z,
+      styles: styles$z,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -81936,7 +81937,7 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$w = css `
+  const styles$y = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -82022,7 +82023,7 @@ focus outline in that case.
             }
         `));
 
-  const template$w = html `
+  const template$y = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
                 class="anchored-region"
@@ -82074,8 +82075,8 @@ focus outline in that case.
   const nimbleTooltip = Tooltip.compose({
       baseName: 'tooltip',
       baseClass: Tooltip$1,
-      template: template$w,
-      styles: styles$w
+      template: template$y,
+      styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
   const tooltipTag = 'nimble-tooltip';
@@ -82164,7 +82165,7 @@ focus outline in that case.
       }
   }
 
-  const styles$v = css `
+  const styles$x = css `
     ${display$2('block')}
 
     :host {
@@ -82381,12 +82382,12 @@ focus outline in that case.
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$v,
+      styles: styles$x,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$u = css `
+  const styles$w = css `
     ${display$2('flex')}
 
     :host {
@@ -82400,7 +82401,7 @@ focus outline in that case.
     }
 `;
 
-  const template$v = html `
+  const template$x = html `
     <template
         role="tree"
         ${ref('treeView')}
@@ -82496,8 +82497,8 @@ focus outline in that case.
   const nimbleTreeView = TreeView.compose({
       baseName: 'tree-view',
       baseClass: TreeView$1,
-      template: template$v,
-      styles: styles$u
+      template: template$x,
+      styles: styles$w
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -82613,9 +82614,9 @@ focus outline in that case.
   }
   const unitScaleByte = new UnitScaleByte();
 
-  const template$u = html `<template slot="unit"></template>`;
+  const template$w = html `<template slot="unit"></template>`;
 
-  const styles$t = css `
+  const styles$v = css `
     ${display$2('none')}
 `;
 
@@ -82643,8 +82644,8 @@ focus outline in that case.
   ], UnitByte.prototype, "binary", void 0);
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
-      template: template$u,
-      styles: styles$t
+      template: template$w,
+      styles: styles$v
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -82696,8 +82697,8 @@ focus outline in that case.
   }
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
-      template: template$u,
-      styles: styles$t
+      template: template$w,
+      styles: styles$v
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -97011,7 +97012,7 @@ focus outline in that case.
       return new Table(reader.readAll());
   }
 
-  const template$t = html `
+  const template$v = html `
     <div class="wafer-map-container">
         <svg class="svg-root">
             <g ${ref('zoomContainer')} transform=${x => x.transform.toString()}>
@@ -97044,7 +97045,7 @@ focus outline in that case.
     </div>
 `;
 
-  const styles$s = css `
+  const styles$u = css `
     ${display$2('inline-block')}
 
     :host {
@@ -100069,8 +100070,8 @@ focus outline in that case.
   ], WaferMap.prototype, "colorScale", void 0);
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
-      template: template$t,
-      styles: styles$s
+      template: template$v,
+      styles: styles$u
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
@@ -100082,10 +100083,11 @@ 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$r = css `
+  const styles$t = css `
     ${display$1('flex')}
 
     :host {
+        height: 480px;
         flex-direction: column;
         background: ${applicationBackgroundColor};
     }
@@ -100133,12 +100135,28 @@ focus outline in that case.
         flex: 1;
         display: flex;
         flex-direction: column;
-        justify-content: flex-start;
         row-gap: 32px;
         padding: ${mediumPadding} ${standardPadding} ${mediumPadding}
             ${standardPadding};
         background: ${sectionBackgroundImage};
         overflow-y: auto;
+        overflow-anchor: none;
+    }
+
+    .messages-history,
+    .messages-anchored {
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        row-gap: 32px;
+    }
+
+    .messages-history.region-empty {
+        display: none;
+    }
+
+    .messages-anchored.anchor-active {
+        min-height: 100%;
     }
 
     :host([appearance='overlay']) .messages {
@@ -100155,14 +100173,21 @@ focus outline in that case.
     }
 `;
 
-  const template$s = html `
+  const template$u = html `
 <div class="toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}">
     <slot name="toolbar" ${slotted({ property: 'slottedToolbarElements' })}></slot>
 </div>
 <div class="start ${x => (x.startEmpty ? 'start-empty' : '')}">
     <slot name="start" ${slotted({ property: 'slottedStartElements' })}></slot>
 </div>
-<div class="messages"><slot></slot></div>
+<div class="messages" ${ref('messagesContainer')}>
+    <div class="messages-history ${x => (x.historyEmpty ? 'region-empty' : '')}">
+        <slot name="history" ${slotted({ property: 'slottedHistoryMessages' })}></slot>
+    </div>
+    <div class="messages-anchored ${x => (x.autoScrollManager.anchorActive ? 'anchor-active' : '')}" ${ref('anchoredContainer')}>
+        <slot ${slotted({ property: 'slottedMessages' })}></slot>
+    </div>
+</div>
 <div class="input ${x => (x.inputEmpty ? 'input-empty' : '')}">
     <slot name="input" ${slotted({ property: 'slottedInputElements' })}>
     </slot>
@@ -100179,6 +100204,262 @@ focus outline in that case.
   const ChatConversationAppearance = {
       default: undefined};
 
+  /**
+   * Internal state for a chat message
+   * @internal
+   */
+  class ChatMessageInternals {
+      constructor(host, options) {
+          /**
+           * True when this message is the one the conversation anchors to while
+           * auto-scrolling.
+           */
+          this.isScrollAnchor = false;
+          this.host = host;
+          this.anchorOnInsert = options?.anchorOnInsert ?? false;
+      }
+      get slot() {
+          return this.slotName;
+      }
+      set slot(value) {
+          if (value === this.slotName) {
+              return;
+          }
+          this.slotName = value;
+          if (value === undefined) {
+              this.host.removeAttribute('slot');
+          }
+          else {
+              this.host.setAttribute('slot', value);
+          }
+      }
+      static elementHasMessageInternals(element) {
+          return element.messageInternals instanceof ChatMessageInternals;
+      }
+  }
+  __decorate([
+      observable
+  ], ChatMessageInternals.prototype, "isScrollAnchor", void 0);
+
+  // Distance from the bottom (px) within which the conversation is considered "at the bottom".
+  const scrollingPixelThreshold = 10;
+  // Slot name for messages that precede the current turn's anchor message.
+  const historySlotName = 'history';
+  /**
+   * Manages auto-scroll behavior for the chat conversation:
+   * - Splits messages into `default` and `history` slots so the top message of the
+   *   `default` slot becomes the anchor: it is moved to the top of the viewport and scrolled to on insert
+   * - Implements auto scroll when at the bottom of the window as content is added until the user scrolls away
+   * @internal
+   */
+  class AutoScrollManager {
+      get isActive() {
+          return this.resizeObserver !== undefined;
+      }
+      constructor(conversation) {
+          this.conversation = conversation;
+          /**
+           * Whether auto-scroll is currently following new content. Set to false when
+           * the user scrolls away from the bottom and back to true when they return.
+           */
+          this.autoScrollEngaged = true;
+          /**
+           * Whether the anchored region is reserving a viewport of space
+           */
+          this.anchorActive = false;
+          this.scrollUpdatePending = false;
+          this.pendingAnchorInsert = false;
+          this.previousMessages = [];
+          this.onScroll = () => {
+              const container = this.conversation.messagesContainer;
+              if (this.programmaticScrollTarget !== undefined) {
+                  // The programmatic scroll always targets the bottom, so treat it as
+                  // settled once we reach that target or the bottom itself.
+                  const reachedTarget = Math.abs(container.scrollTop - this.programmaticScrollTarget) <= 1;
+                  const reachedBottom = this.getDistanceFromBottom() <= scrollingPixelThreshold;
+                  if (reachedTarget || reachedBottom) {
+                      this.programmaticScrollTarget = undefined;
+                  }
+                  return;
+              }
+              this.autoScrollEngaged = this.getDistanceFromBottom() <= scrollingPixelThreshold;
+          };
+          this.conversationNotifier = Observable.getNotifier(this.conversation);
+      }
+      connect() {
+          this.autoScrollEngaged = true;
+          this.previousMessages = this.getOrderedMessages();
+          this.conversationNotifier.subscribe(this, 'slottedMessages');
+          this.conversationNotifier.subscribe(this, 'slottedHistoryMessages');
+          this.conversation.messagesContainer.addEventListener('scroll', this.onScroll, { passive: true });
+          this.resizeObserver = new ResizeObserver(() => {
+              this.onContentSizeChanged();
+          });
+          // Observe the anchored region for streamed content growth and the scroll
+          // viewport so the conversation stays pinned when its height changes.
+          this.resizeObserver.observe(this.conversation.anchoredContainer);
+          this.resizeObserver.observe(this.conversation.messagesContainer);
+          this.repartition(this.previousMessages);
+      }
+      disconnect() {
+          this.conversationNotifier.unsubscribe(this, 'slottedMessages');
+          this.conversationNotifier.unsubscribe(this, 'slottedHistoryMessages');
+          this.conversation.messagesContainer.removeEventListener('scroll', this.onScroll);
+          this.resizeObserver?.disconnect();
+          this.resizeObserver = undefined;
+          this.setScrollAnchorMessage(undefined);
+          this.clearSlotAssignments();
+          this.anchorActive = false;
+          this.previousMessages = [];
+      }
+      handleChange(source, args) {
+          if (source === this.conversation
+              && (args === 'slottedMessages' || args === 'slottedHistoryMessages')) {
+              this.onMessagesChanged();
+          }
+      }
+      onMessagesChanged() {
+          const current = this.getOrderedMessages();
+          const previousSet = new Set(this.previousMessages);
+          const addedMessages = current.filter(message => !previousSet.has(message));
+          this.previousMessages = current;
+          this.repartition(current);
+          if (addedMessages.length === 0) {
+              return;
+          }
+          const hasAnchorMessage = addedMessages.some(message => message.messageInternals.anchorOnInsert);
+          this.scheduleScrollUpdate(hasAnchorMessage);
+      }
+      repartition(messages) {
+          const anchorIndex = this.findLatestAnchorIndex(messages);
+          messages.forEach((message, index) => {
+              message.messageInternals.slot = anchorIndex >= 0 && index < anchorIndex
+                  ? historySlotName
+                  : undefined;
+          });
+          this.anchorActive = anchorIndex >= 0;
+      }
+      clearSlotAssignments() {
+          for (const message of this.getOrderedMessages()) {
+              message.messageInternals.slot = undefined;
+          }
+      }
+      scheduleScrollUpdate(hasAnchorMessage) {
+          this.pendingAnchorInsert = this.pendingAnchorInsert || hasAnchorMessage;
+          if (this.scrollUpdatePending) {
+              return;
+          }
+          this.scrollUpdatePending = true;
+          requestAnimationFrame(() => {
+              this.scrollUpdatePending = false;
+              const anchorInsert = this.pendingAnchorInsert;
+              this.pendingAnchorInsert = false;
+              if (anchorInsert) {
+                  this.anchorToLastInsertedMessage();
+              }
+              else if (this.autoScrollEngaged) {
+                  this.followContent();
+              }
+          });
+      }
+      /**
+       * Pins the most recently inserted anchor message near the top of the
+       * viewport.
+       */
+      anchorToLastInsertedMessage() {
+          const message = this.getLastAnchorMessage();
+          if (message === undefined) {
+              return;
+          }
+          this.setScrollAnchorMessage(message);
+          this.autoScrollEngaged = true;
+          this.smoothScrollTo(this.getMaxScrollTop());
+      }
+      followContent() {
+          this.instantScrollTo(this.getMaxScrollTop());
+      }
+      onContentSizeChanged() {
+          // Reacts to streamed content growth and viewport height changes.
+          // While a pending or in-progress anchor insert owns positioning, let its
+          // smooth scroll settle instead of competing with an instant follow.
+          if (this.pendingAnchorInsert
+              || this.programmaticScrollTarget !== undefined) {
+              return;
+          }
+          if (this.autoScrollEngaged) {
+              this.followContent();
+          }
+      }
+      getDistanceFromBottom() {
+          const { scrollTop, scrollHeight, clientHeight } = this.conversation.messagesContainer;
+          return scrollHeight - scrollTop - clientHeight;
+      }
+      getMaxScrollTop() {
+          const { scrollHeight, clientHeight } = this.conversation.messagesContainer;
+          return Math.max(0, scrollHeight - clientHeight);
+      }
+      smoothScrollTo(scrollTop) {
+          const container = this.conversation.messagesContainer;
+          if (Math.abs(container.scrollTop - scrollTop) <= 1) {
+              // No movement is needed, so `scrollTo` would not emit a scroll event
+              // to clear the programmatic guard. Snap to the exact target and
+              // leave the guard clear so streamed content keeps being followed.
+              this.programmaticScrollTarget = undefined;
+              container.scrollTop = scrollTop;
+              return;
+          }
+          this.programmaticScrollTarget = scrollTop;
+          container.scrollTo({
+              top: scrollTop,
+              behavior: 'smooth'
+          });
+      }
+      instantScrollTo(scrollTop) {
+          this.conversation.messagesContainer.scrollTop = scrollTop;
+      }
+      setScrollAnchorMessage(message) {
+          if (this.scrollAnchorMessage === message) {
+              return;
+          }
+          if (this.scrollAnchorMessage !== undefined) {
+              this.scrollAnchorMessage.messageInternals.isScrollAnchor = false;
+          }
+          this.scrollAnchorMessage = message;
+          if (message !== undefined) {
+              message.messageInternals.isScrollAnchor = true;
+          }
+      }
+      getLastAnchorMessage() {
+          const messages = this.getOrderedMessages();
+          const index = this.findLatestAnchorIndex(messages);
+          return index >= 0 ? messages[index] : undefined;
+      }
+      findLatestAnchorIndex(messages) {
+          for (let i = messages.length - 1; i >= 0; i--) {
+              const message = messages[i];
+              if (message?.messageInternals.anchorOnInsert) {
+                  return i;
+              }
+          }
+          return -1;
+      }
+      getOrderedMessages() {
+          const messages = [];
+          for (const child of Array.from(this.conversation.children)) {
+              if (ChatMessageInternals.elementHasMessageInternals(child)) {
+                  messages.push(child);
+              }
+          }
+          return messages;
+      }
+  }
+  __decorate([
+      observable
+  ], AutoScrollManager.prototype, "autoScrollEngaged", void 0);
+  __decorate([
+      observable
+  ], AutoScrollManager.prototype, "anchorActive", void 0);
+
   /**
    * A Spright component for displaying a series of chat messages
    */
@@ -100186,6 +100467,15 @@ focus outline in that case.
       constructor() {
           super(...arguments);
           this.appearance = ChatConversationAppearance.default;
+          this.autoScroll = false;
+          /**
+           * Manages auto-scroll behavior. Always present; its observers are registered
+           * while the conversation is connected and `autoScroll` is enabled.
+           * @internal
+           */
+          this.autoScrollManager = new AutoScrollManager(this);
+          /** @internal */
+          this.historyEmpty = true;
           /** @internal */
           this.inputEmpty = true;
           /** @internal */
@@ -100195,6 +100485,31 @@ focus outline in that case.
           /** @internal */
           this.endEmpty = true;
       }
+      connectedCallback() {
+          super.connectedCallback();
+          if (this.autoScroll) {
+              this.autoScrollManager.connect();
+          }
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          if (this.autoScroll) {
+              this.autoScrollManager.disconnect();
+          }
+      }
+      autoScrollChanged() {
+          if (this.$fastController.isConnected) {
+              if (this.autoScroll) {
+                  this.autoScrollManager.connect();
+              }
+              else {
+                  this.autoScrollManager.disconnect();
+              }
+          }
+      }
+      slottedHistoryMessagesChanged(_prev, next) {
+          this.historyEmpty = next === undefined || next.length === 0;
+      }
       slottedInputElementsChanged(_prev, next) {
           this.inputEmpty = next === undefined || next.length === 0;
       }
@@ -100211,6 +100526,18 @@ focus outline in that case.
   __decorate([
       attr
   ], ChatConversation.prototype, "appearance", void 0);
+  __decorate([
+      attr({ attribute: 'auto-scroll', mode: 'boolean' })
+  ], ChatConversation.prototype, "autoScroll", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "slottedMessages", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "slottedHistoryMessages", void 0);
+  __decorate([
+      observable
+  ], ChatConversation.prototype, "historyEmpty", void 0);
   __decorate([
       observable
   ], ChatConversation.prototype, "inputEmpty", void 0);
@@ -100237,16 +100564,16 @@ focus outline in that case.
   ], ChatConversation.prototype, "slottedEndElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
-      template: template$s,
-      styles: styles$r
+      template: template$u,
+      styles: styles$t
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightChatConversation());
 
-  const styles$q = css `
+  const styles$s = css `
     ${display$1('flex')}
-    ${styles$1g}
+    ${styles$1i}
 
     :host {
         width: 100%;
@@ -100390,7 +100717,7 @@ focus outline in that case.
     }
 `;
 
-  const template$r = html `
+  const template$t = html `
 <div class="container">
     <section class="attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}">
         <slot
@@ -100642,8 +100969,8 @@ focus outline in that case.
   ], ChatInput.prototype, "slottedAttachmentsElements", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
-      template: template$r,
-      styles: styles$q,
+      template: template$t,
+      styles: styles$s,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -100661,7 +100988,7 @@ focus outline in that case.
       inbound: 'inbound'
   };
 
-  const styles$p = css `
+  const styles$r = css `
     ${display$1('flex')}
 
     :host {
@@ -100735,7 +101062,7 @@ focus outline in that case.
     }
 `;
 
-  const template$q = (context, definition) => html `
+  const template$s = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -100784,12 +101111,12 @@ focus outline in that case.
   applyMixins(ChatMessage, StartEnd);
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
-      template: template$q,
-      styles: styles$p
+      template: template$s,
+      styles: styles$r
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
 
-  const styles$o = css `
+  const styles$q = css `
     ${display$1('flex')}
 
     :host {
@@ -100847,7 +101174,7 @@ focus outline in that case.
     }
 `;
 
-  const template$p = (context, definition) => html `
+  const template$r = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -100870,6 +101197,8 @@ focus outline in that case.
       constructor() {
           super(...arguments);
           /** @internal */
+          this.messageInternals = new ChatMessageInternals(this);
+          /** @internal */
           this.footerActionsIsEmpty = true;
       }
       slottedFooterActionsElementsChanged(_prev, next) {
@@ -100885,12 +101214,12 @@ focus outline in that case.
   applyMixins(ChatMessageInbound, StartEnd);
   const sprightChatMessageInbound = ChatMessageInbound.compose({
       baseName: 'chat-message-inbound',
-      template: template$p,
-      styles: styles$o
+      template: template$r,
+      styles: styles$q
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
 
-  const styles$n = css `
+  const styles$p = css `
     ${display$1('flex')}
 
     :host {
@@ -100924,7 +101253,7 @@ focus outline in that case.
     }
 `;
 
-  const template$o = () => html `
+  const template$q = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -100936,15 +101265,22 @@ focus outline in that case.
    * A Spright component for displaying an outbound chat message
    */
   class ChatMessageOutbound extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.messageInternals = new ChatMessageInternals(this, {
+              anchorOnInsert: true
+          });
+      }
   }
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
-      template: template$o,
-      styles: styles$n
+      template: template$q,
+      styles: styles$p
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
 
-  const styles$m = css `
+  const styles$o = css `
     ${display$1('flex')}
 
     :host {
@@ -100971,7 +101307,7 @@ focus outline in that case.
     }
 `;
 
-  const template$n = () => html `
+  const template$p = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -100983,15 +101319,20 @@ focus outline in that case.
    * A Spright component for displaying an system chat message
    */
   class ChatMessageSystem extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.messageInternals = new ChatMessageInternals(this);
+      }
   }
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',
-      template: template$n,
-      styles: styles$m
+      template: template$p,
+      styles: styles$o
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
 
-  const styles$l = css `
+  const styles$n = css `
     ${display$1('flex')}
 
     :host {
@@ -101094,13 +101435,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$m = html `
+  const template$o = 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$k = css `
-    ${styles$1r}
+  const styles$m = css `
+    ${styles$1t}
 
     .dark-icon {
         display: none;
@@ -101123,15 +101464,15 @@ focus outline in that case.
   }
   const sprightIconNigelChat = IconNigelChat.compose({
       baseName: 'icon-nigel-chat',
-      template: template$m,
-      styles: styles$k
+      template: template$o,
+      styles: styles$m
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconNigelChat());
   const iconNigelChatTag = 'spright-icon-nigel-chat';
 
-  const template$l = () => html `
+  const template$n = () => html `
     <div class="container">
         <div class="brand-icon">
             <slot name="brand-icon">
@@ -101163,8 +101504,8 @@ focus outline in that case.
   ], ChatMessageWelcome.prototype, "subtitle", void 0);
   const sprightChatMessageWelcome = ChatMessageWelcome.compose({
       baseName: 'chat-message-welcome',
-      template: template$l,
-      styles: styles$l
+      template: template$n,
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());
 
@@ -101185,13 +101526,13 @@ focus outline in that case.
    */
   class IconBreakpointConditional extends Icon {
   }
-  const template$k = html `
+  const template$m = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$6}"></div>
 `;
   const sprightIconBreakpointConditional = IconBreakpointConditional.compose({
       baseName: 'icon-breakpoint-conditional',
-      template: template$k,
-      styles: styles$1r
+      template: template$m,
+      styles: styles$1t
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -101216,13 +101557,13 @@ focus outline in that case.
    */
   class IconBreakpointDisabled extends Icon {
   }
-  const template$j = html `
+  const template$l = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$5}"></div>
 `;
   const sprightIconBreakpointDisabled = IconBreakpointDisabled.compose({
       baseName: 'icon-breakpoint-disabled',
-      template: template$j,
-      styles: styles$1r
+      template: template$l,
+      styles: styles$1t
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -101246,13 +101587,13 @@ focus outline in that case.
    */
   class IconBreakpointEnabled extends Icon {
   }
-  const template$i = html `
+  const template$k = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$4}"></div>
 `;
   const sprightIconBreakpointEnabled = IconBreakpointEnabled.compose({
       baseName: 'icon-breakpoint-enabled',
-      template: template$i,
-      styles: styles$1r
+      template: template$k,
+      styles: styles$1t
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -101276,13 +101617,13 @@ focus outline in that case.
    */
   class IconBreakpointExecutionPointer extends Icon {
   }
-  const template$h = html `
+  const template$j = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$3}"></div>
 `;
   const sprightIconBreakpointExecutionPointer = IconBreakpointExecutionPointer.compose({
       baseName: 'icon-breakpoint-execution-pointer',
-      template: template$h,
-      styles: styles$1r
+      template: template$j,
+      styles: styles$1t
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -101310,13 +101651,13 @@ focus outline in that case.
    */
   class IconBreakpointHitDisabled extends Icon {
   }
-  const template$g = html `
+  const template$i = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$2}"></div>
 `;
   const sprightIconBreakpointHitDisabled = IconBreakpointHitDisabled.compose({
       baseName: 'icon-breakpoint-hit-disabled',
-      template: template$g,
-      styles: styles$1r
+      template: template$i,
+      styles: styles$1t
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -101345,13 +101686,13 @@ focus outline in that case.
    */
   class IconBreakpointHit extends Icon {
   }
-  const template$f = html `
+  const template$h = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$1}"></div>
 `;
   const sprightIconBreakpointHit = IconBreakpointHit.compose({
       baseName: 'icon-breakpoint-hit',
-      template: template$f,
-      styles: styles$1r
+      template: template$h,
+      styles: styles$1t
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -101376,21 +101717,21 @@ focus outline in that case.
    */
   class IconBreakpointHover extends Icon {
   }
-  const template$e = html `
+  const template$g = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData}"></div>
 `;
   const sprightIconBreakpointHover = IconBreakpointHover.compose({
       baseName: 'icon-breakpoint-hover',
-      template: template$e,
-      styles: styles$1r
+      template: template$g,
+      styles: styles$1t
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointHover());
   const iconBreakpointHoverTag = 'spright-icon-breakpoint-hover';
 
-  const styles$j = css `
-    ${styles$1r}
+  const styles$l = css `
+    ${styles$1t}
 
     .icon svg {
         fill: ${calendarEventBorderReservationColor};
@@ -101407,15 +101748,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
-      template: template$1f,
-      styles: styles$j
+      template: template$1h,
+      styles: styles$l
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalendarWeek());
 
-  const styles$i = css `
-    ${styles$1r}
+  const styles$k = css `
+    ${styles$1t}
 
     .icon svg {
         fill: ${calendarEventBorderCalibrationColor};
@@ -101432,15 +101773,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
-      template: template$1f,
-      styles: styles$i
+      template: template$1h,
+      styles: styles$k
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalipers());
 
-  const styles$h = css `
-    ${styles$1r}
+  const styles$j = css `
+    ${styles$1t}
 
     .icon svg {
         fill: ${calendarEventBorderTransportOrderColor};
@@ -101457,15 +101798,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
-      template: template$1f,
-      styles: styles$h
+      template: template$1h,
+      styles: styles$j
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemForklift());
 
-  const styles$g = css `
-    ${styles$1r}
+  const styles$i = css `
+    ${styles$1t}
 
     .icon svg {
         fill: ${calendarEventBorderStaticColor};
@@ -101482,15 +101823,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
-      template: template$1f,
-      styles: styles$g
+      template: template$1h,
+      styles: styles$i
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemRectangleCheckLines());
 
-  const styles$f = css `
-    ${styles$1r}
+  const styles$h = css `
+    ${styles$1t}
 
     .icon svg {
         fill: ${calendarEventBorderWorkOrderColor};
@@ -101507,15 +101848,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemSquareListCog = IconWorkItemSquareListCog.compose({
       baseName: 'icon-work-item-square-list-cog',
-      template: template$1f,
-      styles: styles$f
+      template: template$1h,
+      styles: styles$h
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemSquareListCog());
 
-  const styles$e = css `
-    ${styles$1r}
+  const styles$g = css `
+    ${styles$1t}
 
     .icon svg {
         fill: ${calendarEventBorderJobColor};
@@ -101532,15 +101873,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemUserHelmetSafety = IconWorkItemUserHelmetSafety.compose({
       baseName: 'icon-work-item-user-helmet-safety',
-      template: template$1f,
-      styles: styles$e
+      template: template$1h,
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemUserHelmetSafety());
 
-  const styles$d = css `
-    ${styles$1r}
+  const styles$f = css `
+    ${styles$1t}
 
     .icon svg {
         fill: ${calendarEventBorderMaintenanceColor};
@@ -101557,14 +101898,14 @@ focus outline in that case.
   }
   const sprightIconWorkItemWrenchHammer = IconWorkItemWrenchHammer.compose({
       baseName: 'icon-work-item-wrench-hammer',
-      template: template$1f,
-      styles: styles$d
+      template: template$1h,
+      styles: styles$f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemWrenchHammer());
 
-  const styles$c = css `
+  const styles$e = css `
     ${display$1('inline-block')}
 
     :host {
@@ -101589,7 +101930,7 @@ focus outline in that case.
     }
 `;
 
-  const template$d = html `<slot></slot>`;
+  const template$f = html `<slot></slot>`;
 
   /**
    * A Spright demo component (not for production use)
@@ -101598,8 +101939,8 @@ focus outline in that case.
   }
   const sprightRectangle = Rectangle.compose({
       baseName: 'rectangle',
-      template: template$d,
-      styles: styles$c
+      template: template$f,
+      styles: styles$e
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightRectangle());
 
@@ -101626,7 +101967,7 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$b = css `
+  const styles$d = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -101732,7 +102073,7 @@ focus outline in that case.
             }
         `));
 
-  const template$c = html `
+  const template$e = html `
     <details
         class="accordion-item-details"
         ?open="${x => x.expanded}"
@@ -101783,8 +102124,8 @@ focus outline in that case.
   ], FvAccordionItem.prototype, "appearance", void 0);
   const okFvAccordionItem = FvAccordionItem.compose({
       baseName: 'fv-accordion-item',
-      template: template$c,
-      styles: styles$b
+      template: template$e,
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')
@@ -101799,7 +102140,7 @@ focus outline in that case.
       card: 'card'
   };
 
-  const styles$a = css `
+  const styles$c = css `
     ${display('block')}
 
     :host {
@@ -102150,7 +102491,7 @@ focus outline in that case.
         </div>
     </div>
 `;
-  const template$b = html `
+  const template$d = html `
     ${when(x => x.interactionMode === FvCardInteractionMode.card, html `
             <${cardButtonTag}
                 class="card-shell card-button-shell"
@@ -102298,14 +102639,14 @@ focus outline in that case.
   ], FvCard.prototype, "hasFooterEndContent", void 0);
   const okFvCard = FvCard.compose({
       baseName: 'fv-card',
-      template: template$b,
-      styles: styles$a
+      template: template$d,
+      styles: styles$c
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')
       .register(okFvCard());
 
-  const styles$9 = css `
+  const styles$b = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -102553,7 +102894,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$a = html `
+  const template$c = html `
     <div class="chip-selector">
         ${when(x => x.label.length > 0, html `
                 <label id="${x => x.labelId}" class="label" for="${x => x.inputId}">
@@ -103045,12 +103386,12 @@ focus outline in that case.
   ], FvChipSelector.prototype, "field", void 0);
   const okFvChipSelector = FvChipSelector.compose({
       baseName: 'fv-chip-selector',
-      template: template$a,
-      styles: styles$9
+      template: template$c,
+      styles: styles$b
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvChipSelector());
 
-  const styles$8 = css `
+  const styles$a = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -103102,7 +103443,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$9 = html `
+  const template$b = html `
     <button
         id="${x => x.tooltipAnchorId}"
         class="context-help-trigger"
@@ -103150,11 +103491,482 @@ focus outline in that case.
   ], FvContextHelp.prototype, "iconVisible", void 0);
   const okFvContextHelp = FvContextHelp.compose({
       baseName: 'fv-context-help',
-      template: template$9,
-      styles: styles$8
+      template: template$b,
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvContextHelp());
 
+  const styles$9 = css `
+    @layer base, hover, selected;
+
+    @layer base {
+        ${display('block')}
+
+        :host {
+            position: relative;
+            color: ${bodyFontColor};
+            cursor: pointer;
+            user-select: none;
+        }
+
+        :host([hidden]) {
+            display: none;
+        }
+
+        .item {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr) auto;
+            align-items: center;
+            gap: ${standardPadding};
+            min-block-size: 76px;
+            padding: 14px 18px 14px 22px;
+            background: transparent;
+        }
+
+        :host([compact]) .item {
+            min-block-size: 56px;
+            padding: 10px 18px 10px 22px;
+        }
+
+        .text {
+            min-inline-size: 0;
+        }
+
+        .title {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font: ${bodyFont};
+            font-weight: 600;
+            color: ${bodyFontColor};
+        }
+
+        .subtitle {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-block-start: 4px;
+            font: ${bodyFont};
+            color: ${placeholderFontColor};
+        }
+
+        :host([compact]) .subtitle {
+            margin-block-start: 2px;
+        }
+
+        .status {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            inline-size: 16px;
+            block-size: 16px;
+            flex: 0 0 auto;
+        }
+
+        .status-icon {
+            inline-size: 10px;
+            block-size: 10px;
+            color: currentColor;
+            ${iconColor.cssCustomProperty}: currentColor;
+        }
+    }
+
+    @layer hover {
+        :host(:hover) .item {
+            background: ${fillHoverColor};
+        }
+    }
+
+    @layer selected {
+        :host([selected]) .item {
+            background: ${fillSelectedColor};
+        }
+
+        :host([selected])::before {
+            content: '';
+            position: absolute;
+            inset-block: 0;
+            inset-inline-start: 0;
+            inline-size: calc(${borderWidth} * 4);
+            background: ${borderHoverColor};
+        }
+    }
+`;
+
+  const template$a = html `
+    <div class="item" part="item">
+        <div class="text" part="text">
+            <div class="title" part="title">${x => x.titleText}</div>
+            <div class="subtitle" part="subtitle">${x => x.subtitle}</div>
+        </div>
+        <div class="status" part="status" ?hidden="${x => !x.hasStatus}">
+            <slot
+                name="status"
+                @slotchange="${(x, c) => x.handleStatusSlotChange(c.event)}"
+            >
+                ${when(x => x.statusColor.trim().length > 0, html `
+                        <${iconCircleFilledTag}
+                            class="status-icon"
+                            part="status-icon"
+                            role="${x => (x.fallbackStatusLabel ? 'img' : null)}"
+                            aria-label="${x => x.fallbackStatusLabel}"
+                            aria-hidden="${x => (x.fallbackStatusLabel === null ? 'true' : null)}"
+                            style="${x => `color: ${x.statusColor};`}"
+                        ></${iconCircleFilledTag}>
+                    `)}
+            </slot>
+        </div>
+    </div>
+`;
+
+  /**
+   * A selectable master-detail list item with title, subtitle, and optional status content.
+   */
+  class FvMasterDetailListItem extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          this.titleText = '';
+          this.subtitle = '';
+          this.value = '';
+          this.compact = false;
+          this.selected = false;
+          this.statusColor = '';
+          this.statusLabel = '';
+          /** @internal */
+          this.hasStatusSlotContent = false;
+      }
+      /** @internal */
+      connectedCallback() {
+          super.connectedCallback();
+          this.setAttribute('role', 'option');
+          this.syncSelectionAria();
+      }
+      /** @internal */
+      selectedChanged() {
+          if (this.$fastController.isConnected) {
+              this.syncSelectionAria();
+          }
+      }
+      /** @internal */
+      handleStatusSlotChange(event) {
+          const slot = event.target;
+          this.hasStatusSlotContent = slot.assignedNodes({ flatten: true }).length > 0;
+      }
+      /** @internal */
+      get hasStatus() {
+          return this.hasStatusSlotContent || this.statusColor.trim().length > 0;
+      }
+      /** @internal */
+      get fallbackStatusLabel() {
+          if (this.hasStatusSlotContent || this.statusColor.trim().length === 0) {
+              return null;
+          }
+          const normalizedStatusLabel = this.statusLabel.trim();
+          return normalizedStatusLabel.length > 0 ? normalizedStatusLabel : null;
+      }
+      syncSelectionAria() {
+          this.setAttribute('aria-selected', String(this.selected));
+      }
+  }
+  __decorate([
+      attr({ attribute: 'title-text' })
+  ], FvMasterDetailListItem.prototype, "titleText", void 0);
+  __decorate([
+      attr
+  ], FvMasterDetailListItem.prototype, "subtitle", void 0);
+  __decorate([
+      attr
+  ], FvMasterDetailListItem.prototype, "value", void 0);
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], FvMasterDetailListItem.prototype, "compact", void 0);
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], FvMasterDetailListItem.prototype, "selected", void 0);
+  __decorate([
+      attr({ attribute: 'status-color' })
+  ], FvMasterDetailListItem.prototype, "statusColor", void 0);
+  __decorate([
+      attr({ attribute: 'status-label' })
+  ], FvMasterDetailListItem.prototype, "statusLabel", void 0);
+  __decorate([
+      observable
+  ], FvMasterDetailListItem.prototype, "hasStatusSlotContent", void 0);
+  const okFvMasterDetailListItem = FvMasterDetailListItem.compose({
+      baseName: 'fv-master-detail-list-item',
+      template: template$a,
+      styles: styles$9
+  });
+  DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailListItem());
+  const fvMasterDetailListItemTag = 'ok-fv-master-detail-list-item';
+
+  const styles$8 = css `
+    @layer base, hover, focusVisible;
+
+    @layer base {
+        ${display('block')}
+
+        :host {
+            color: ${bodyFontColor};
+            font: ${bodyFont};
+        }
+
+        .master-detail-list {
+            display: flex;
+            flex-direction: column;
+            min-block-size: 0;
+        }
+
+        .filter-row {
+            padding: ${standardPadding};
+            padding-block-end: 10px;
+        }
+
+        .filter-input {
+            -webkit-appearance: none;
+            appearance: none;
+            inline-size: 100%;
+            padding: 10px 2px 12px;
+            font: inherit;
+            color: inherit;
+            border: none;
+            border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.35);
+            background: transparent;
+            outline: none;
+            transition: border-color ${smallDelay} ease-in-out;
+        }
+
+        .filter-input::placeholder {
+            color: ${placeholderFontColor};
+        }
+
+        .items {
+            display: block;
+            min-block-size: 0;
+            overflow: auto;
+        }
+
+        .empty-state {
+            padding: 18px;
+            color: ${placeholderFontColor};
+        }
+    }
+
+    @layer hover {
+        .filter-input:hover {
+            border-bottom-color: ${borderHoverColor};
+        }
+    }
+
+    @layer focusVisible {
+        .filter-input:focus-visible {
+            border-bottom-color: ${borderHoverColor};
+        }
+    }
+`;
+
+  const template$9 = html `
+    <div class="master-detail-list">
+        <div class="filter-row">
+            <input
+                id="${x => x.inputId}"
+                class="filter-input"
+                type="text"
+                placeholder="${x => x.placeholder}"
+                :value="${x => x.filterText}"
+                aria-controls="${x => x.listboxId}"
+                aria-activedescendant="${x => x.activeItemId}"
+                aria-label="${x => x.placeholder}"
+                role="combobox"
+                aria-haspopup="listbox"
+                aria-autocomplete="list"
+                aria-expanded="true"
+                ${ref('captureFilterInput')}
+                @input="${(x, c) => x.handleFilterInput(c.event)}"
+                @keydown="${(x, c) => x.handleFilterKeydown(c.event)}"
+            />
+        </div>
+        <div
+            id="${x => x.listboxId}"
+            class="items"
+            role="listbox"
+            @click="${(x, c) => x.handleItemsClick(c.event)}"
+        >
+            <slot @slotchange="${x => x.handleItemsSlotChange()}"></slot>
+            ${when(x => !x.hasVisibleItems, html `
+                    <div class="empty-state">No matches</div>
+                `)}
+        </div>
+    </div>
+`;
+
+  /**
+   * A filterable master-detail list with keyboard selection.
+   */
+  class FvMasterDetailList extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          this.placeholder = 'Filter items...';
+          /** @internal */
+          this.filterText = '';
+          /** @internal */
+          this.activeItemId = null;
+          /** @internal */
+          this.items = [];
+          /** @internal */
+          this.inputId = uniqueId('ok-fv-master-detail-list-input');
+          /** @internal */
+          this.listboxId = uniqueId('ok-fv-master-detail-list-listbox');
+          this.filterInput = null;
+          this.selectedItem = null;
+      }
+      /** @internal */
+      connectedCallback() {
+          super.connectedCallback();
+          queueMicrotask(() => {
+              this.refreshItems();
+          });
+      }
+      /** @internal */
+      filterTextChanged() {
+          if (this.$fastController.isConnected) {
+              this.applyFilter(true);
+          }
+      }
+      /** @internal */
+      captureFilterInput(input) {
+          this.filterInput = input;
+      }
+      /** @internal */
+      get hasVisibleItems() {
+          return this.visibleItems.length > 0;
+      }
+      /** @internal */
+      handleFilterInput(event) {
+          const input = event.target;
+          this.filterText = input.value;
+      }
+      /** @internal */
+      handleFilterKeydown(event) {
+          if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+              return true;
+          }
+          const visibleItems = this.visibleItems;
+          if (visibleItems.length === 0) {
+              event.preventDefault();
+              return false;
+          }
+          const currentIndex = visibleItems.findIndex(item => item.selected);
+          let startingIndex = currentIndex;
+          if (startingIndex < 0) {
+              startingIndex = event.key === 'ArrowDown' ? -1 : visibleItems.length;
+          }
+          const nextIndex = event.key === 'ArrowDown'
+              ? Math.min(startingIndex + 1, visibleItems.length - 1)
+              : Math.max(startingIndex - 1, 0);
+          this.setSelectedItem(visibleItems[nextIndex] ?? null, true);
+          visibleItems[nextIndex]?.scrollIntoView({ block: 'nearest' });
+          event.preventDefault();
+          return false;
+      }
+      /** @internal */
+      handleItemsSlotChange() {
+          this.refreshItems();
+      }
+      /** @internal */
+      handleItemsClick(event) {
+          const item = event.composedPath().find(pathItem => pathItem instanceof HTMLElement && pathItem.localName === fvMasterDetailListItemTag);
+          if (!item || item.hidden) {
+              return;
+          }
+          this.setSelectedItem(item, true);
+          this.filterInput?.focus();
+      }
+      get visibleItems() {
+          return this.items.filter(item => !item.hidden);
+      }
+      refreshItems() {
+          const slot = this.shadowRoot?.querySelector('slot');
+          const assignedItems = slot?.assignedElements({ flatten: true }).filter(element => element instanceof HTMLElement && element.localName === fvMasterDetailListItemTag);
+          this.items = assignedItems ?? [];
+          for (const item of this.items) {
+              if (item.id.length === 0) {
+                  item.id = uniqueId('ok-fv-master-detail-list-item');
+              }
+          }
+          this.applyFilter(false);
+      }
+      applyFilter(emitSelectionChange) {
+          const normalizedFilter = diacriticInsensitiveStringNormalizer(this.filterText.trim());
+          let firstVisibleItem = null;
+          for (const item of this.items) {
+              const searchableText = diacriticInsensitiveStringNormalizer(`${item.titleText} ${item.subtitle} ${item.value}`.trim());
+              const matches = normalizedFilter.length === 0 || searchableText.includes(normalizedFilter);
+              item.hidden = !matches;
+              if (matches && firstVisibleItem === null) {
+                  firstVisibleItem = item;
+              }
+          }
+          const visibleSelectedItems = this.visibleItems.filter(item => item.selected);
+          const preferredSelectedItem = visibleSelectedItems[0] ?? null;
+          for (const extraSelectedItem of visibleSelectedItems.slice(1)) {
+              extraSelectedItem.selected = false;
+          }
+          if (preferredSelectedItem) {
+              this.setSelectedItem(preferredSelectedItem, emitSelectionChange && preferredSelectedItem !== this.selectedItem);
+              return;
+          }
+          this.setSelectedItem(firstVisibleItem, emitSelectionChange && firstVisibleItem !== this.selectedItem);
+      }
+      setSelectedItem(nextItem, emitChange) {
+          if (this.selectedItem === nextItem) {
+              return;
+          }
+          if (this.selectedItem) {
+              this.selectedItem.selected = false;
+          }
+          this.selectedItem = nextItem;
+          if (this.selectedItem) {
+              this.selectedItem.selected = true;
+              this.activeItemId = this.selectedItem.id;
+          }
+          else {
+              this.activeItemId = null;
+          }
+          if (emitChange) {
+              this.dispatchEvent(new CustomEvent('change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: {
+                      item: this.selectedItem,
+                      value: this.selectedItem?.value || this.selectedItem?.titleText || null
+                  }
+              }));
+          }
+      }
+  }
+  __decorate([
+      attr
+  ], FvMasterDetailList.prototype, "placeholder", void 0);
+  __decorate([
+      observable
+  ], FvMasterDetailList.prototype, "filterText", void 0);
+  __decorate([
+      observable
+  ], FvMasterDetailList.prototype, "activeItemId", void 0);
+  __decorate([
+      observable
+  ], FvMasterDetailList.prototype, "items", void 0);
+  const okFvMasterDetailList = FvMasterDetailList.compose({
+      baseName: 'fv-master-detail-list',
+      template: template$9,
+      styles: styles$8,
+      shadowOptions: {
+          delegatesFocus: true
+      }
+  });
+  DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailList());
+
   const styles$7 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
@@ -105117,7 +105929,7 @@ focus outline in that case.
 
   const template = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$J}</template
+        >${template$L}</template
     >
 `;
 
@@ -105203,7 +106015,7 @@ focus outline in that case.
   const tsTableColumnBreakpoint = TsTableColumnBreakpoint.compose({
       baseName: 'ts-table-column-breakpoint',
       template,
-      styles: styles$I
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')