@ni/ok-components 0.3.12 → 0.4.0

package/dist/all-components-bundle.js

@@ -14898,9 +14898,9 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$_ = html `<slot></slot>`;
+  const template$10 = html `<slot></slot>`;
 
-  const styles$1l = css `
+  const styles$1n = css `
     ${display$2('contents')}
 `;
 
@@ -15015,8 +15015,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$1l,
-      template: template$_
+      styles: styles$1n,
+      template: template$10
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16563,7 +16563,7 @@
   const largePadding = createStringToken(tokenNames.largePadding, tokenValues.largePadding);
   createStringToken(tokenNames.labelHeight, tokenValues.labelHeight);
   const borderWidth = createStringToken(tokenNames.borderWidth, tokenValues.borderWidth);
-  createStringToken(tokenNames.dividerWidth, tokenValues.dividerWidth);
+  const dividerWidth = createStringToken(tokenNames.dividerWidth, tokenValues.dividerWidth);
   const iconSize = createStringToken(tokenNames.iconSize, tokenValues.iconSize);
   const drawerWidth = createStringToken(tokenNames.drawerWidth, tokenValues.drawerWidth);
   const dialogSmallWidth = createStringToken(tokenNames.dialogSmallWidth, tokenValues.dialogSmallWidth);
@@ -16600,7 +16600,7 @@
   const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight] = createFontTokens(tokenNames.bodyFont, tokenValues.bodyFont, tokenValues.bodyFontColor, tokenValues.bodyDisabledFontColor, tokenValues.bodyFontFamily, tokenValues.bodyFontWeight, tokenValues.bodyFontSize, tokenValues.bodyFontLineHeight);
   const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight] = createFontTokens(tokenNames.bodyEmphasizedFont, tokenValues.bodyEmphasizedFont, tokenValues.bodyEmphasizedFontColor, tokenValues.bodyEmphasizedDisabledFontColor, tokenValues.bodyEmphasizedFontFamily, tokenValues.bodyEmphasizedFontWeight, tokenValues.bodyEmphasizedFontSize, tokenValues.bodyEmphasizedFontLineHeight);
   createFontTokens(tokenNames.bodyPlus1Font, tokenValues.bodyPlus1Font, tokenValues.bodyPlus1FontColor, tokenValues.bodyPlus1DisabledFontColor, tokenValues.bodyPlus1FontFamily, tokenValues.bodyPlus1FontWeight, tokenValues.bodyPlus1FontSize, tokenValues.bodyPlus1FontLineHeight);
-  createFontTokens(tokenNames.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFontColor, tokenValues.bodyPlus1EmphasizedDisabledFontColor, tokenValues.bodyPlus1EmphasizedFontFamily, tokenValues.bodyPlus1EmphasizedFontWeight, tokenValues.bodyPlus1EmphasizedFontSize, tokenValues.bodyPlus1EmphasizedFontLineHeight);
+  const [bodyPlus1EmphasizedFont, bodyPlus1EmphasizedFontColor] = createFontTokens(tokenNames.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFont, tokenValues.bodyPlus1EmphasizedFontColor, tokenValues.bodyPlus1EmphasizedDisabledFontColor, tokenValues.bodyPlus1EmphasizedFontFamily, tokenValues.bodyPlus1EmphasizedFontWeight, tokenValues.bodyPlus1EmphasizedFontSize, tokenValues.bodyPlus1EmphasizedFontLineHeight);
   const [groupHeaderFont, groupHeaderFontColor] = createFontTokens(tokenNames.groupHeaderFont, tokenValues.groupHeaderFont, tokenValues.groupHeaderFontColor, tokenValues.groupHeaderDisabledFontColor, tokenValues.groupHeaderFontFamily, tokenValues.groupHeaderFontWeight, tokenValues.groupHeaderFontSize, tokenValues.groupHeaderFontLineHeight);
   const [controlLabelFont, controlLabelFontColor, controlLabelDisabledFontColor, controlLabelFontFamily, controlLabelFontWeight, controlLabelFontSize, controlLabelFontLineHeight] = createFontTokens(tokenNames.controlLabelFont, tokenValues.controlLabelFont, tokenValues.controlLabelFontColor, tokenValues.controlLabelDisabledFontColor, tokenValues.controlLabelFontFamily, tokenValues.controlLabelFontWeight, tokenValues.controlLabelFontSize, tokenValues.controlLabelFontLineHeight);
   const [buttonLabelFont, buttonLabelFontColor, buttonLabelDisabledFontColor] = createFontTokens(tokenNames.buttonLabelFont, tokenValues.buttonLabelFont, tokenValues.buttonLabelFontColor, tokenValues.buttonLabelDisabledFontColor, tokenValues.buttonLabelFontFamily, tokenValues.buttonLabelFontWeight, tokenValues.buttonLabelFontSize, tokenValues.buttonLabelFontLineHeight);
@@ -16658,7 +16658,7 @@
   }
   // #endregion
 
-  const styles$1k = css `
+  const styles$1m = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -16736,7 +16736,7 @@
     }
 `;
 
-  const template$Z = (_context, definition) => html `${
+  const template$$ = (_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
@@ -16839,8 +16839,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$Z,
-      styles: styles$1k,
+      template: template$$,
+      styles: styles$1m,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16949,7 +16949,7 @@
     padding: 0;
 `;
 
-  const styles$1j = css `
+  const styles$1l = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17233,8 +17233,8 @@
             }
         `));
 
-  const styles$1i = css `
-    ${styles$1j}
+  const styles$1k = css `
+    ${styles$1l}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17254,7 +17254,7 @@
     }
 `;
 
-  const template$Y = (context, definition) => html `
+  const template$_ = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17336,8 +17336,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$Y,
-      styles: styles$1i,
+      template: template$_,
+      styles: styles$1k,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17345,7 +17345,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$1h = css `
+  const styles$1j = css `
     ${display$2('grid')}
 
     :host {
@@ -17428,7 +17428,7 @@
     }
 `;
 
-  const template$X = (context, definition) => html `
+  const template$Z = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17529,8 +17529,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$X,
-      styles: styles$1h,
+      template: template$Z,
+      styles: styles$1j,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17542,7 +17542,7 @@
 
   // These styles end up inside a @layer block so must use the
   // cssPartial tag instead of the css tag
-  const styles$1g = cssPartial `
+  const styles$1i = cssPartial `
     .severity-text {
         display: none;
         font: ${errorTextFont};
@@ -17652,12 +17652,12 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$1f = css `
+  const styles$1h = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$2('inline-flex')}
-        ${styles$1g}
+        ${styles$1i}
         :host {
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
@@ -18203,8 +18203,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             }
         `));
 
-  const styles$1e = css `
-    ${styles$1f}
+  const styles$1g = css `
+    ${styles$1h}
     ${'' /* Anchor specific styles */}
     @layer base {
         .control {
@@ -19247,13 +19247,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$W = html `<div
+  const template$Y = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$1d = css `
+  const styles$1f = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19316,8 +19316,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$W,
-          styles: styles$1d
+          template: template$Y,
+          styles: styles$1f
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19441,7 +19441,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
    */
   const StepperOrientation = Orientation;
 
-  const template$V = (context, definition) => html `
+  const template$X = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -19587,15 +19587,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$V,
-      styles: styles$1e,
+      template: template$X,
+      styles: styles$1g,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
 
-  const styles$1c = css `
+  const styles$1e = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19712,7 +19712,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$U = (context, definition) => html `
+  const template$W = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -19764,15 +19764,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$U,
-      styles: styles$1c,
+      template: template$W,
+      styles: styles$1e,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$1b = css `
+  const styles$1d = css `
     ${display$2('flex')}
 
     :host {
@@ -19812,12 +19812,12 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const styles$1a = css `
-    ${styles$1j}
+  const styles$1c = css `
+    ${styles$1l}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$T = (context, definition) => html `
+  const template$V = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -19908,8 +19908,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const nimbleButton = Button$1.compose({
       baseName: 'button',
       baseClass: Button$2,
-      template: template$T,
-      styles: styles$1a,
+      template: template$V,
+      styles: styles$1c,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19943,7 +19943,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$S = (context, definition) => html `
+  const template$U = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -20244,15 +20244,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$S,
-      styles: styles$1b,
+      template: template$U,
+      styles: styles$1d,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$19 = css `
+  const styles$1b = css `
     ${display$2('block')}
 
     :host {
@@ -20357,7 +20357,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$R = (context, definition) => html `
+  const template$T = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -20494,8 +20494,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$R,
-      styles: styles$19,
+      template: template$T,
+      styles: styles$1b,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20511,7 +20511,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       zIndex1000: '1000'
   };
 
-  const styles$18 = css `
+  const styles$1a = css `
     ${display$2('block')}
 
     :host {
@@ -20542,14 +20542,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$18
+      styles: styles$1a
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  const styles$17 = css `
+  const styles$19 = css `
     ${display$2('flex')}
 
     :host {
@@ -20701,7 +20701,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       information: 'information'
   };
 
-  const template$Q = html `
+  const template$S = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -20819,8 +20819,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$Q,
-      styles: styles$17
+      template: template$S,
+      styles: styles$19
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -20861,7 +20861,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     </template>
 `;
 
-  const styles$16 = css `
+  const styles$18 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20965,11 +20965,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$16
+      styles: styles$18
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$15 = css `
+  const styles$17 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -21066,14 +21066,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$15,
+      styles: styles$17,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$14 = css `
+  const styles$16 = css `
     ${display$2('flex')}
 
     :host {
@@ -21097,7 +21097,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$P = html `
+  const template$R = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -21112,12 +21112,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$P,
-      styles: styles$14
+      template: template$R,
+      styles: styles$16
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$13 = css `
+  const styles$15 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21275,14 +21275,14 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$13,
+      styles: styles$15,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$12 = css `
+  const styles$14 = css `
     .error-icon {
         display: none;
     }
@@ -21316,9 +21316,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$11 = css `
+  const styles$13 = css `
     ${display$2('inline-grid')}
-    ${styles$12}
+    ${styles$14}
 
     :host {
         font: ${bodyFont};
@@ -21457,7 +21457,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$O = (_context, definition) => html `
+  const template$Q = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -21542,16 +21542,176 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$O,
-      styles: styles$11,
+      template: template$Q,
+      styles: styles$13,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$10 = css `
-    ${styles$1j}
+  const ChipAppearance = {
+      outline: 'outline',
+      block: 'block'
+  };
+
+  const styles$12 = css `
+    ${display$2('inline-flex')}
+
+    :host {
+        height: ${controlHeight};
+        width: fit-content;
+        max-width: 300px;
+        color: ${bodyFontColor};
+        font: ${bodyFont};
+        padding: 0 ${mediumPadding};
+        gap: 4px;
+        background-color: transparent;
+        border: ${borderWidth} solid rgba(${actionRgbPartialColor}, 0.3);
+        border-radius: 4px;
+        justify-content: center;
+        align-items: center;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        color: ${bodyDisabledFontColor};
+        border-color: rgba(${borderRgbPartialColor}, 0.3);
+    }
+
+    :host([disabled]) slot[name='start']::slotted(*) {
+        opacity: 0.3;
+        ${iconColor.cssCustomProperty}: ${bodyFontColor};
+    }
+
+    slot[name='start']::slotted(*) {
+        flex-shrink: 0;
+    }
+
+    [part='start'] {
+        display: contents;
+        ${iconColor.cssCustomProperty}: ${bodyFontColor};
+    }
+
+    .content {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .remove-button {
+        height: ${iconSize};
+        width: ${iconSize};
+        margin-right: calc(-1 * ${smallPadding});
+    }
+
+    [part='end'] {
+        display: none;
+    }
+`.withBehaviors(appearanceBehavior(ChipAppearance.block, css `
+            :host,
+            :host([disabled]) {
+                background-color: rgba(${borderRgbPartialColor}, 0.1);
+                border-color: transparent;
+            }
+        `));
+
+  const template$P = (context, definition) => html `
+    ${startSlotTemplate(context, definition)}
+    <span
+        class="content"
+        part="content"
+        ${overflow('hasOverflow')}
+        title=${x => (x.hasOverflow && x.elementTextContent
+    ? x.elementTextContent
+    : null)}
+    >
+        <slot
+            ${ref('contentSlot')}
+            ${slotted({ property: 'content' })}
+        ></slot>
+    </span>
+    ${when(x => x.removable && !x.disabled, html `
+        <${buttonTag}
+            class="remove-button"
+            content-hidden
+            appearance="${ButtonAppearance.ghost}"
+            tabindex="${x => x.tabIndex}"
+            @click="${x => x.handleRemoveClick()}"
+        >
+            <${iconTimesTag} slot="start"></${iconTimesTag}>
+            ${x => x.removeButtonContent}
+        </${buttonTag}>
+    `)}
+    ${endSlotTemplate(context, definition)}
+`;
+
+  /**
+   * Finds all text content within a slot and returns it as a space-delimited string.
+   */
+  const slotTextContent = (slot) => {
+      return slot
+          .assignedNodes()
+          .map(node => node.textContent?.trim())
+          .filter(content => content !== undefined && content !== '')
+          .join(' ');
+  };
+
+  /**
+   * A Nimble chip component
+   */
+  class Chip extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          this.removable = false;
+          this.disabled = false;
+          this.appearance = ChipAppearance.outline;
+          /** @internal */
+          this.hasOverflow = false;
+      }
+      /** @internal */
+      get elementTextContent() {
+          return slotTextContent(this.contentSlot);
+      }
+      /** @internal */
+      get removeButtonContent() {
+          return itemRemoveLabel.getValueFor(this);
+      }
+      /** @internal */
+      handleRemoveClick() {
+          if (this.removable) {
+              this.$emit('remove');
+          }
+      }
+  }
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], Chip.prototype, "removable", void 0);
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], Chip.prototype, "disabled", void 0);
+  __decorate([
+      attr()
+  ], Chip.prototype, "appearance", void 0);
+  __decorate([
+      attr({ attribute: 'tabindex', converter: nullableNumberConverter })
+  ], Chip.prototype, "tabIndex", void 0);
+  __decorate([
+      observable
+  ], Chip.prototype, "hasOverflow", void 0);
+  applyMixins(Chip, StartEnd);
+  const nimbleChip = Chip.compose({
+      baseName: 'chip',
+      template: template$P,
+      styles: styles$12,
+      shadowOptions: {
+          delegatesFocus: true
+      }
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleChip());
+
+  const styles$11 = css `
+    ${styles$1l}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -21598,7 +21758,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$N = (context, definition) => html `
+  const template$O = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -21693,8 +21853,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$N,
-      styles: styles$10,
+      template: template$O,
+      styles: styles$11,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21724,7 +21884,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$$ = css `
+  const styles$10 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -22014,7 +22174,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$_ = css `
+  const styles$$ = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -22041,10 +22201,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$Z = css `
+  const styles$_ = css `
+    ${styles$10}
+    ${styles$14}
     ${styles$$}
-    ${styles$12}
-    ${styles$_}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -22165,7 +22325,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  const template$M = (context, definition) => html `
+  const template$N = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -22940,8 +23100,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$M,
-      styles: styles$Z,
+      template: template$N,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -22985,7 +23145,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$Y = css `
+  const styles$Z = css `
     ${display$2('grid')}
 
     dialog {
@@ -23078,7 +23238,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$L = html `
+  const template$M = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -23226,13 +23386,13 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$L,
-      styles: styles$Y,
+      template: template$M,
+      styles: styles$Z,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$X = css `
+  const styles$Y = css `
     ${display$2('block')}
 
     :host {
@@ -23375,7 +23535,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$K = html `
+  const template$L = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -23517,8 +23677,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$K,
-      styles: styles$X
+      template: template$L,
+      styles: styles$Y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -26302,7 +26462,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$W = css `
+  const styles$X = css `
     ${display$2('none')}
 `;
 
@@ -26375,7 +26535,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$W
+      styles: styles$X
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26542,13 +26702,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$W
+      styles: styles$X
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$V = css `
+  const styles$W = css `
     ${display$2('flex')}
 
     :host {
@@ -26624,7 +26784,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$J = (context, definition) => html `
+  const template$K = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -26650,17 +26810,6 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  /**
-   * Finds all text content within a slot and returns it as a space-delimited string.
-   */
-  const slotTextContent = (slot) => {
-      return slot
-          .assignedNodes()
-          .map(node => node.textContent?.trim())
-          .filter(content => content !== undefined && content !== '')
-          .join(' ');
-  };
-
   /**
    * A nimble-styled HTML listbox option
    */
@@ -26737,13 +26886,13 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$J,
-      styles: styles$V
+      template: template$K,
+      styles: styles$W
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$U = css `
+  const styles$V = css `
     ${display$2('flex')}
 
     :host {
@@ -26805,7 +26954,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$I = html `
+  const template$J = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -26947,8 +27096,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$I,
-      styles: styles$U
+      template: template$J,
+      styles: styles$V
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26975,9 +27124,9 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$H = html `<template slot="mapping"></template>`;
+  const template$I = html `<template slot="mapping"></template>`;
 
-  const styles$T = css `
+  const styles$U = css `
     ${display$2('none')}
 `;
 
@@ -26993,8 +27142,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$H,
-      styles: styles$T
+      template: template$I,
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -27064,8 +27213,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$H,
-      styles: styles$T
+      template: template$I,
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -27088,8 +27237,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$H,
-      styles: styles$T
+      template: template$I,
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -27105,8 +27254,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$H,
-      styles: styles$T
+      template: template$I,
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -27408,7 +27557,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  const template$G = () => html `
+  const template$H = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -27425,7 +27574,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$S = css `
+  const styles$T = css `
     ${display$2('grid')}
 
     :host {
@@ -27496,8 +27645,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$G,
-      styles: styles$S
+      template: template$H,
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -27512,7 +27661,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$R = css `
+  const styles$S = css `
     ${display$2('inline-block')}
 
     :host {
@@ -27530,7 +27679,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$F = html `
+  const template$G = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -27780,8 +27929,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$F,
-      styles: styles$R,
+      template: template$G,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -27789,7 +27938,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display$2('grid')}
 
     :host {
@@ -27886,7 +28035,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$Q,
+      styles: styles$R,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -27901,10 +28050,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$P = css `
+  const styles$Q = css `
     ${display$2('inline-block')}
-    ${styles$12}
-    ${styles$_}
+    ${styles$14}
+    ${styles$$}
 
     :host {
         font: ${bodyFont};
@@ -28127,7 +28276,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$E = (context, definition) => html `
+  const template$F = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -28281,8 +28430,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$E,
-      styles: styles$P,
+      template: template$F,
+      styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -28325,7 +28474,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$O = css `
+  const styles$P = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -28425,15 +28574,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$O,
+      styles: styles$P,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$N = css `
+  const styles$O = css `
     ${display$2('inline-block')}
-    ${styles$12}
-    ${styles$_}
+    ${styles$14}
+    ${styles$$}
 
     .positioning-region {
         display: flex;
@@ -28472,7 +28621,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$D = html `
+  const template$E = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -28512,8 +28661,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$D,
-      styles: styles$N,
+      template: template$E,
+      styles: styles$O,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -47804,7 +47953,7 @@ ${indentedChild}`;
   // src/index.ts
   var index_default$7 = HardBreak;
 
-  const styles$M = css `
+  const styles$N = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -47841,7 +47990,7 @@ ${indentedChild}`;
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$M
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -47870,8 +48019,8 @@ ${indentedChild}`;
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$L = css `
-    ${styles$$}
+  const styles$M = css `
+    ${styles$10}
 
     :host {
         height: auto;
@@ -47889,7 +48038,7 @@ ${indentedChild}`;
     }
 `;
 
-  const template$C = html `
+  const template$D = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -48177,15 +48326,15 @@ ${indentedChild}`;
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$C,
-      styles: styles$L
+      template: template$D,
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  const template$B = html `
+  const template$C = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -48287,9 +48436,9 @@ ${indentedChild}`;
     </template>
 `;
 
-  const styles$K = css `
+  const styles$L = css `
     ${display$2('inline-flex')}
-    ${styles$12}
+    ${styles$14}
 
     :host {
         font: ${bodyFont};
@@ -64735,8 +64884,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$B,
-      styles: styles$K,
+      template: template$C,
+      styles: styles$L,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -64745,13 +64894,13 @@ ${nextLine.slice(indentLevel + 2)}`;
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$A = html `
+  const template$B = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
 `;
 
-  const styles$J = css `
+  const styles$K = css `
     ${display$2('flex')}
 
     :host {
@@ -64864,17 +65013,17 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$A,
-      styles: styles$J
+      template: template$B,
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$I = css `
+  const styles$J = css `
+    ${styles$10}
+    ${styles$14}
     ${styles$$}
-    ${styles$12}
-    ${styles$_}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -65037,7 +65186,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const styles$H = css `
+  const styles$I = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -65207,7 +65356,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const template$z = html `
+  const template$A = html `
     <template role="progressbar">
         ${''
 /**
@@ -65254,8 +65403,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$z,
-      styles: styles$H
+      template: template$A,
+      styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -65271,7 +65420,7 @@ ${nextLine.slice(indentLevel + 2)}`;
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$y = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -66483,8 +66632,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$y,
-      styles: styles$I,
+      template: template$z,
+      styles: styles$J,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -66497,8 +66646,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$G = css `
-    ${styles$1f}
+  const styles$H = css `
+    ${styles$1h}
     ${'' /* Button specific styles */}
     @layer base {
         .control {
@@ -66509,7 +66658,7 @@ ${nextLine.slice(indentLevel + 2)}`;
     }
 `;
 
-  const template$x = (context, definition) => html `
+  const template$y = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -66630,15 +66779,15 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], Step.prototype, "tabIndex", void 0);
   const nimbleStep = Step.compose({
       baseName: 'step',
-      template: template$x,
-      styles: styles$G,
+      template: template$y,
+      styles: styles$H,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
 
-  const styles$F = css `
+  const styles$G = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -66709,7 +66858,7 @@ ${nextLine.slice(indentLevel + 2)}`;
     }
 `;
 
-  const template$w = html `
+  const template$x = html `
     ${when(x => x.showScrollButtons, html `
         <${buttonTag}
             content-hidden
@@ -66854,12 +67003,12 @@ ${nextLine.slice(indentLevel + 2)}`;
   ], Stepper.prototype, "steps", void 0);
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
-      template: template$w,
-      styles: styles$F
+      template: template$x,
+      styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
 
-  const styles$E = css `
+  const styles$F = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -67086,7 +67235,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const template$v = html `
+  const template$w = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -67130,12 +67279,12 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$v,
-      styles: styles$E
+      template: template$w,
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$D = css `
+  const styles$E = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -67246,11 +67395,11 @@ ${nextLine.slice(indentLevel + 2)}`;
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$D
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$C = css `
+  const styles$D = css `
     ${display$2('block')}
 
     :host {
@@ -67269,7 +67418,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$C
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -70995,7 +71144,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       }
   }
 
-  const styles$B = css `
+  const styles$C = css `
     ${display$2('flex')}
 
     :host {
@@ -71215,7 +71364,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$A = css `
+  const styles$B = css `
     ${display$2('flex')}
 
     :host {
@@ -71248,7 +71397,7 @@ focus outline in that case.
     }
 `;
 
-  const template$u = html `
+  const template$v = html `
     <template role="columnheader"
         class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
@@ -71334,13 +71483,13 @@ focus outline in that case.
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$u,
-      styles: styles$A
+      template: template$v,
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$z = css `
+  const styles$A = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -71365,9 +71514,9 @@ focus outline in that case.
     }
 `;
 
-  const styles$y = css `
+  const styles$z = css `
     ${display$2('flex')}
-    ${styles$z}
+    ${styles$A}
 
     :host {
         width: fit-content;
@@ -71537,7 +71686,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$x = css `
+  const styles$y = css `
     ${display$2('flex')}
 
     :host {
@@ -71582,7 +71731,7 @@ focus outline in that case.
     }
 `;
 
-  const template$t = html `
+  const template$u = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
         @blur="${x => x.onCellBlur()}"
@@ -71679,13 +71828,13 @@ focus outline in that case.
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$t,
-      styles: styles$x
+      template: template$u,
+      styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
 
-  const template$s = html `
+  const template$t = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -72080,15 +72229,15 @@ focus outline in that case.
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$s,
-      styles: styles$y
+      template: template$t,
+      styles: styles$z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$w = css `
+  const styles$x = css `
     ${display$2('grid')}
-    ${styles$z}
+    ${styles$A}
 
     :host {
         align-items: center;
@@ -72176,7 +72325,7 @@ focus outline in that case.
             }
         `));
 
-  const template$r = html `
+  const template$s = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -72333,13 +72482,13 @@ focus outline in that case.
   ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$r,
-      styles: styles$w
+      template: template$s,
+      styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
 
-  const template$q = html `
+  const template$r = html `
     <template
         role="treegrid"
         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
@@ -76650,12 +76799,12 @@ focus outline in that case.
   ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
-      template: template$q,
-      styles: styles$B
+      template: template$r,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$v = css `
+  const styles$w = css `
     ${display$2('contents')}
 
     .header-content {
@@ -76667,7 +76816,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$p = html `<span
+  const template$q = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -76732,7 +76881,7 @@ focus outline in that case.
       return ColumnWithPlaceholder;
   }
 
-  const styles$u = css `
+  const styles$v = css `
     ${display$2('flex')}
 
     :host {
@@ -76763,7 +76912,7 @@ focus outline in that case.
     }
 `;
 
-  const template$o = html `
+  const template$p = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -76855,8 +77004,8 @@ focus outline in that case.
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$o,
-      styles: styles$u
+      template: template$p,
+      styles: styles$v
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -76933,7 +77082,7 @@ focus outline in that case.
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$n = html `
+  const template$o = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -76942,7 +77091,7 @@ focus outline in that case.
     </span>
 `;
 
-  const styles$t = css `
+  const styles$u = css `
     ${display$2('flex')}
 
     span {
@@ -76966,8 +77115,8 @@ focus outline in that case.
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$n,
-      styles: styles$t
+      template: template$o,
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77211,8 +77360,8 @@ focus outline in that case.
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$p,
-      styles: styles$v
+      template: template$q,
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77264,15 +77413,15 @@ focus outline in that case.
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$n,
-      styles: styles$t
+      template: template$o,
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(tableColumnDateTextGroupHeaderView());
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
-  const template$m = html `
+  const template$n = html `
     <template
         class="
             ${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}
@@ -77288,7 +77437,7 @@ focus outline in that case.
     </template>
 `;
 
-  const styles$s = css `
+  const styles$t = css `
     ${display$2('flex')}
 
     :host {
@@ -77390,8 +77539,8 @@ focus outline in that case.
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$m,
-      styles: styles$s
+      template: template$n,
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -77649,8 +77798,8 @@ focus outline in that case.
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$p,
-      styles: styles$v
+      template: template$q,
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77666,8 +77815,8 @@ focus outline in that case.
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$m,
-      styles: styles$s
+      template: template$n,
+      styles: styles$t
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77768,8 +77917,8 @@ focus outline in that case.
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$n,
-      styles: styles$t
+      template: template$o,
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77821,8 +77970,8 @@ focus outline in that case.
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$p,
-      styles: styles$v
+      template: template$q,
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77930,15 +78079,15 @@ focus outline in that case.
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$r = css `
-    ${styles$v}
+  const styles$s = css `
+    ${styles$w}
 
     slot[name='mapping'] {
         display: none;
     }
 `;
 
-  const template$l = html `${template$p}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$m = html `${template$q}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
@@ -78024,7 +78173,7 @@ focus outline in that case.
       }
   }
 
-  const styles$q = css `
+  const styles$r = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -78048,7 +78197,7 @@ focus outline in that case.
     }
 `;
 
-  const template$k = html `
+  const template$l = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -78192,15 +78341,15 @@ focus outline in that case.
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
-      template: template$k,
-      styles: styles$q
+      template: template$l,
+      styles: styles$r
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$p = css `
+  const styles$q = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -78224,7 +78373,7 @@ focus outline in that case.
     }
 `;
 
-  const template$j = html `
+  const template$k = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -78311,8 +78460,8 @@ focus outline in that case.
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
-      template: template$j,
-      styles: styles$p
+      template: template$k,
+      styles: styles$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -78395,23 +78544,23 @@ focus outline in that case.
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
-      template: template$l,
-      styles: styles$r
+      template: template$m,
+      styles: styles$s
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnMapping());
 
-  const template$i = html `
+  const template$j = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$p}</template
+        >${template$q}</template
     >
 `;
 
   /** @internal */
   const cellViewMenuSlotName = 'menu-button-menu';
 
-  const template$h = html `
+  const template$i = html `
     ${when(x => x.showMenuButton, html `
         <${menuButtonTag}
             ${ref('menuButton')}
@@ -78430,7 +78579,7 @@ focus outline in that case.
     `)}
 `;
 
-  const styles$o = css `
+  const styles$p = css `
     :host {
         align-self: center;
         width: 100%;
@@ -78505,8 +78654,8 @@ focus outline in that case.
   ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
-      template: template$h,
-      styles: styles$o
+      template: template$i,
+      styles: styles$p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
   const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
@@ -78561,8 +78710,8 @@ focus outline in that case.
   ], TableColumnMenuButton.prototype, "menuSlot", void 0);
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
-      template: template$i,
-      styles: styles$v
+      template: template$j,
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78570,7 +78719,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$g = html `<span
+  const template$h = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -78589,8 +78738,8 @@ focus outline in that case.
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$n,
-      styles: styles$t
+      template: template$o,
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78611,8 +78760,8 @@ focus outline in that case.
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$m,
-      styles: styles$s
+      template: template$n,
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -79152,8 +79301,8 @@ focus outline in that case.
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$g,
-      styles: styles$v
+      template: template$h,
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79171,8 +79320,8 @@ focus outline in that case.
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$m,
-      styles: styles$s
+      template: template$n,
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -79226,15 +79375,15 @@ focus outline in that case.
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$p,
-      styles: styles$v
+      template: template$q,
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$n = css `
-    ${styles$1b}
+  const styles$o = css `
+    ${styles$1d}
 
     .tabpanel {
         overflow: auto;
@@ -79315,12 +79464,12 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$S,
-      styles: styles$n
+      template: template$U,
+      styles: styles$o
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$m = css `
+  const styles$n = css `
     ${display$2('flex')}
 
     :host {
@@ -79352,7 +79501,7 @@ focus outline in that case.
     }
 `;
 
-  const template$f = (context, definition) => html `
+  const template$g = (context, definition) => html `
     <template slot="end">
         ${when(x => x.defaultSlottedElements.length > 0, html `
             <div class="separator"></div>
@@ -79384,8 +79533,8 @@ focus outline in that case.
   ], TabsToolbar.prototype, "defaultSlottedElements", void 0);
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
-      template: template$f,
-      styles: styles$m
+      template: template$g,
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
   applyMixins(TabsToolbar, StartEnd);
@@ -79395,10 +79544,10 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$l = css `
+  const styles$m = css `
     ${display$2('inline-flex')}
-    ${styles$12}
-    ${styles$_}
+    ${styles$14}
+    ${styles$$}
 
     :host {
         font: ${bodyFont};
@@ -79590,7 +79739,7 @@ focus outline in that case.
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
 `);
-  const template$e = () => html `
+  const template$f = () => html `
     ${labelTemplate$1}
     <div class="container">
         <textarea
@@ -79738,8 +79887,8 @@ focus outline in that case.
   const nimbleTextArea = TextArea.compose({
       baseName: 'text-area',
       baseClass: TextArea$1,
-      template: template$e,
-      styles: styles$l,
+      template: template$f,
+      styles: styles$m,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -79756,10 +79905,10 @@ focus outline in that case.
       frameless: 'frameless'
   };
 
-  const styles$k = css `
+  const styles$l = css `
     ${display$2('inline-block')}
-    ${styles$12}
-    ${styles$_}
+    ${styles$14}
+    ${styles$$}
 
     :host {
         font: ${bodyFont};
@@ -80033,7 +80182,7 @@ focus outline in that case.
    * The template for the {@link @ni/fast-foundation#(TextField:class)} component.
    * @public
    */
-  const template$d = (context, definition) => html `
+  const template$e = (context, definition) => html `
     <template
         class="
             ${x => (x.readOnly ? 'readonly' : '')}
@@ -80118,8 +80267,8 @@ focus outline in that case.
   const nimbleTextField = TextField.compose({
       baseName: 'text-field',
       baseClass: TextField$1,
-      template: template$d,
-      styles: styles$k,
+      template: template$e,
+      styles: styles$l,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -80136,7 +80285,7 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$j = css `
+  const styles$k = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -80222,7 +80371,7 @@ focus outline in that case.
             }
         `));
 
-  const template$c = html `
+  const template$d = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
                 class="anchored-region"
@@ -80274,8 +80423,8 @@ focus outline in that case.
   const nimbleTooltip = Tooltip.compose({
       baseName: 'tooltip',
       baseClass: Tooltip$1,
-      template: template$c,
-      styles: styles$j
+      template: template$d,
+      styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
 
@@ -80363,7 +80512,7 @@ focus outline in that case.
       }
   }
 
-  const styles$i = css `
+  const styles$j = css `
     ${display$2('block')}
 
     :host {
@@ -80580,12 +80729,12 @@ focus outline in that case.
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$i,
+      styles: styles$j,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$h = css `
+  const styles$i = css `
     ${display$2('flex')}
 
     :host {
@@ -80599,7 +80748,7 @@ focus outline in that case.
     }
 `;
 
-  const template$b = html `
+  const template$c = html `
     <template
         role="tree"
         ${ref('treeView')}
@@ -80695,8 +80844,8 @@ focus outline in that case.
   const nimbleTreeView = TreeView.compose({
       baseName: 'tree-view',
       baseClass: TreeView$1,
-      template: template$b,
-      styles: styles$h
+      template: template$c,
+      styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -80812,9 +80961,9 @@ focus outline in that case.
   }
   const unitScaleByte = new UnitScaleByte();
 
-  const template$a = html `<template slot="unit"></template>`;
+  const template$b = html `<template slot="unit"></template>`;
 
-  const styles$g = css `
+  const styles$h = css `
     ${display$2('none')}
 `;
 
@@ -80842,8 +80991,8 @@ focus outline in that case.
   ], UnitByte.prototype, "binary", void 0);
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
-      template: template$a,
-      styles: styles$g
+      template: template$b,
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -80895,8 +81044,8 @@ focus outline in that case.
   }
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
-      template: template$a,
-      styles: styles$g
+      template: template$b,
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -95210,7 +95359,7 @@ focus outline in that case.
       return new Table(reader.readAll());
   }
 
-  const template$9 = html `
+  const template$a = html `
     <div class="wafer-map-container">
         <svg class="svg-root">
             <g ${ref('zoomContainer')} transform=${x => x.transform.toString()}>
@@ -95243,7 +95392,7 @@ focus outline in that case.
     </div>
 `;
 
-  const styles$f = css `
+  const styles$g = css `
     ${display$2('inline-block')}
 
     :host {
@@ -98268,8 +98417,8 @@ focus outline in that case.
   ], WaferMap.prototype, "colorScale", void 0);
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
-      template: template$9,
-      styles: styles$f
+      template: template$a,
+      styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
@@ -98281,7 +98430,7 @@ focus outline in that case.
    */
   const display$1 = (displayValue) => `${display$3(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 
-  const styles$e = css `
+  const styles$f = css `
     ${display$1('flex')}
 
     :host {
@@ -98354,7 +98503,7 @@ focus outline in that case.
     }
 `;
 
-  const template$8 = html `
+  const template$9 = html `
 <div class="toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}">
     <slot name="toolbar" ${slotted({ property: 'slottedToolbarElements' })}></slot>
 </div>
@@ -98436,16 +98585,16 @@ focus outline in that case.
   ], ChatConversation.prototype, "slottedEndElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
-      template: template$8,
-      styles: styles$e
+      template: template$9,
+      styles: styles$f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightChatConversation());
 
-  const styles$d = css `
+  const styles$e = css `
     ${display$1('flex')}
-    ${styles$12}
+    ${styles$14}
 
     :host {
         width: 100%;
@@ -98547,7 +98696,7 @@ focus outline in that case.
     }
 `;
 
-  const template$7 = html `
+  const template$8 = html `
 <div class="container">
     <textarea
         ${ref('textArea')}
@@ -98763,8 +98912,8 @@ focus outline in that case.
   ], ChatInput.prototype, "scrollbarWidth", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
-      template: template$7,
-      styles: styles$d,
+      template: template$8,
+      styles: styles$e,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -98782,7 +98931,7 @@ focus outline in that case.
       inbound: 'inbound'
   };
 
-  const styles$c = css `
+  const styles$d = css `
     ${display$1('flex')}
 
     :host {
@@ -98856,7 +99005,7 @@ focus outline in that case.
     }
 `;
 
-  const template$6 = (context, definition) => html `
+  const template$7 = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -98905,12 +99054,12 @@ focus outline in that case.
   applyMixins(ChatMessage, StartEnd);
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
-      template: template$6,
-      styles: styles$c
+      template: template$7,
+      styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
 
-  const styles$b = css `
+  const styles$c = css `
     ${display$1('flex')}
 
     :host {
@@ -98968,7 +99117,7 @@ focus outline in that case.
     }
 `;
 
-  const template$5 = (context, definition) => html `
+  const template$6 = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -99006,12 +99155,12 @@ focus outline in that case.
   applyMixins(ChatMessageInbound, StartEnd);
   const sprightChatMessageInbound = ChatMessageInbound.compose({
       baseName: 'chat-message-inbound',
-      template: template$5,
-      styles: styles$b
+      template: template$6,
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
 
-  const styles$a = css `
+  const styles$b = css `
     ${display$1('flex')}
 
     :host {
@@ -99045,7 +99194,7 @@ focus outline in that case.
     }
 `;
 
-  const template$4 = () => html `
+  const template$5 = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -99060,12 +99209,12 @@ focus outline in that case.
   }
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
-      template: template$4,
-      styles: styles$a
+      template: template$5,
+      styles: styles$b
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
 
-  const styles$9 = css `
+  const styles$a = css `
     ${display$1('flex')}
 
     :host {
@@ -99092,7 +99241,7 @@ focus outline in that case.
     }
 `;
 
-  const template$3 = () => html `
+  const template$4 = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -99107,13 +99256,13 @@ focus outline in that case.
   }
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',
-      template: template$3,
-      styles: styles$9
+      template: template$4,
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
 
-  const styles$8 = css `
-    ${styles$1d}
+  const styles$9 = css `
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderReservationColor};
@@ -99130,15 +99279,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
-      template: template$W,
-      styles: styles$8
+      template: template$Y,
+      styles: styles$9
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalendarWeek());
 
-  const styles$7 = css `
-    ${styles$1d}
+  const styles$8 = css `
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderCalibrationColor};
@@ -99155,15 +99304,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
-      template: template$W,
-      styles: styles$7
+      template: template$Y,
+      styles: styles$8
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalipers());
 
-  const styles$6 = css `
-    ${styles$1d}
+  const styles$7 = css `
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderTransportOrderColor};
@@ -99180,15 +99329,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
-      template: template$W,
-      styles: styles$6
+      template: template$Y,
+      styles: styles$7
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemForklift());
 
-  const styles$5 = css `
-    ${styles$1d}
+  const styles$6 = css `
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderStaticColor};
@@ -99205,15 +99354,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
-      template: template$W,
-      styles: styles$5
+      template: template$Y,
+      styles: styles$6
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemRectangleCheckLines());
 
-  const styles$4 = css `
-    ${styles$1d}
+  const styles$5 = css `
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderJobColor};
@@ -99230,15 +99379,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemUserHelmetSafety = IconWorkItemUserHelmetSafety.compose({
       baseName: 'icon-work-item-user-helmet-safety',
-      template: template$W,
-      styles: styles$4
+      template: template$Y,
+      styles: styles$5
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemUserHelmetSafety());
 
-  const styles$3 = css `
-    ${styles$1d}
+  const styles$4 = css `
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderMaintenanceColor};
@@ -99255,14 +99404,14 @@ focus outline in that case.
   }
   const sprightIconWorkItemWrenchHammer = IconWorkItemWrenchHammer.compose({
       baseName: 'icon-work-item-wrench-hammer',
-      template: template$W,
-      styles: styles$3
+      template: template$Y,
+      styles: styles$4
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemWrenchHammer());
 
-  const styles$2 = css `
+  const styles$3 = css `
     ${display$1('inline-block')}
 
     :host {
@@ -99287,7 +99436,7 @@ focus outline in that case.
     }
 `;
 
-  const template$2 = html `<slot></slot>`;
+  const template$3 = html `<slot></slot>`;
 
   /**
    * A Spright demo component (not for production use)
@@ -99296,8 +99445,8 @@ focus outline in that case.
   }
   const sprightRectangle = Rectangle.compose({
       baseName: 'rectangle',
-      template: template$2,
-      styles: styles$2
+      template: template$3,
+      styles: styles$3
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightRectangle());
 
@@ -99309,6 +99458,185 @@ focus outline in that case.
    */
   const display = (displayValue) => `${display$3(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 
+  /**
+   * Set user-select: none in a way that works across all supported browsers.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility
+   */
+  const userSelectNone = cssPartial `
+    user-select: none;
+    -webkit-user-select: none;
+`;
+
+  const FvAccordionItemAppearance = {
+      outline: 'outline',
+      ghost: 'ghost',
+      block: 'block'
+  };
+
+  const styles$2 = css `
+    @layer base, hover, focusVisible, active, disabled, top;
+
+    @layer base {
+        ${display('block')}
+
+        :host {
+            border-bottom: ${dividerWidth} solid transparent;
+        }
+
+        .accordion-item-details > .accordion-item-summary {
+            display: flex;
+            box-sizing: border-box;
+            height: calc(${controlHeight} + (2 * ${dividerWidth}));
+            align-items: center;
+            margin-left: 0;
+            border: ${dividerWidth} solid transparent;
+            outline: ${dividerWidth} solid transparent;
+            outline-offset: -1px;
+            list-style: none;
+            cursor: pointer;
+            ${userSelectNone}
+            transition:
+                border-color ${smallDelay} ease-in,
+                outline-color ${smallDelay} ease-in;
+        }
+
+        .accordion-item-details > .accordion-item-summary::-webkit-details-marker {
+            display: none;
+        }
+
+        .accordion-item-details > .accordion-item-summary::marker {
+            content: "";
+        }
+
+        .accordion-item-icon {
+            transition: transform ${mediumDelay} ease-in;
+            margin: calc(${smallPadding} - ${borderWidth});
+            min-width: ${iconSize};
+        }
+
+        .accordion-item-details[open] > .accordion-item-summary > .accordion-item-icon {
+            transform: rotate(90deg);
+        }
+
+        .accordion-item-title {
+            flex: 1;
+            width: 100%;
+            position: relative;
+            font: ${bodyPlus1EmphasizedFont};
+            color: ${bodyPlus1EmphasizedFontColor};
+            text-align: left;
+            display: block;
+            /* Preserve descenders within the ellipsis clip region without shifting the text. */
+            padding-bottom: 2px;
+            margin-bottom: -2px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            overflow-wrap: normal;
+        }
+
+        .accordion-item-content {
+            display: flex;
+            flex-direction: column;
+            gap: ${standardPadding};
+            margin-left: ${largePadding};
+            margin-top: ${mediumPadding};
+            padding-bottom: ${standardPadding};
+        }
+    }
+
+    @layer hover {
+        .accordion-item-details > .accordion-item-summary:hover {
+            border-color: ${borderHoverColor};
+        }
+    }
+
+    @layer focusVisible {
+        .accordion-item-details > .accordion-item-summary:focus-visible {
+            outline: 2px solid ${borderHoverColor};
+            outline-offset: -2px;
+        }
+    }
+`.withBehaviors(appearanceBehavior(FvAccordionItemAppearance.outline, css `
+            @layer base {
+                :host {
+                    border-bottom: ${dividerWidth} solid rgba(${borderRgbPartialColor}, 0.2);
+                    border-bottom-color: rgba(${borderRgbPartialColor}, 0.2);
+                }
+            }
+        `), appearanceBehavior(FvAccordionItemAppearance.block, css `
+            @layer base {
+                .accordion-item-details > .accordion-item-summary {
+                    background-color: rgba(${borderRgbPartialColor}, 0.1);
+                }
+            }
+
+            @layer hover {
+                .accordion-item-details > .accordion-item-summary:hover {
+                    border-color: transparent;
+                    outline-color: ${borderHoverColor};
+                }
+            }
+        `));
+
+  const arrowExpanderRightTag = iconArrowExpanderRightTag;
+  const template$2 = html `
+    <details
+        class="accordion-item-details"
+        ?open="${x => x.expanded}"
+        @toggle="${(x, c) => x.handleToggle(c.event)}"
+    >
+        <summary
+            class="accordion-item-summary"
+            aria-expanded="${x => x.expanded}"
+        >
+            <${arrowExpanderRightTag}
+                class="accordion-item-icon"
+            ></${arrowExpanderRightTag}>
+            <span class="accordion-item-title" title="${x => x.header}">
+                ${x => x.header}
+            </span>
+        </summary>
+        <div class="accordion-item-content">
+            <slot></slot>
+        </div>
+    </details>
+`;
+
+  /**
+   * An accordion item component that can be expanded or collapsed to
+   * show or hide its content.
+   */
+  class FvAccordionItem extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          this.header = '';
+          this.expanded = false;
+          this.appearance = FvAccordionItemAppearance.ghost;
+      }
+      handleToggle(event) {
+          this.expanded = event.target.open;
+          return true;
+      }
+  }
+  __decorate([
+      attr
+  ], FvAccordionItem.prototype, "header", void 0);
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], FvAccordionItem.prototype, "expanded", void 0);
+  __decorate([
+      attr()
+  ], FvAccordionItem.prototype, "appearance", void 0);
+  const okFvAccordionItem = FvAccordionItem.compose({
+      baseName: 'fv-accordion-item',
+      template: template$2,
+      styles: styles$2
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('ok')
+      .register(okFvAccordionItem());
+
   const styles$1 = css `
     ${display('inline-block')}
 
@@ -99348,15 +99676,6 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okButton());
 
-  /**
-   * Set user-select: none in a way that works across all supported browsers.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility
-   */
-  const userSelectNone = cssPartial `
-    user-select: none;
-    -webkit-user-select: none;
-`;
-
   const styles = css `
     ${display('inline-flex')}