@ni/ok-components 1.3.7 → 1.4.1

package/dist/all-components-bundle.js

@@ -14900,9 +14900,9 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$1h = html `<slot></slot>`;
+  const template$1j = html `<slot></slot>`;
 
-  const styles$1y = css `
+  const styles$1z = css `
     ${display$2('contents')}
 
     :host {
@@ -15026,8 +15026,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$1y,
-      template: template$1h
+      styles: styles$1z,
+      template: template$1j
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16673,7 +16673,7 @@
   }
   // #endregion
 
-  const styles$1x = css `
+  const styles$1y = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -16751,7 +16751,7 @@
     }
 `;
 
-  const template$1g = (_context, definition) => html `${
+  const template$1i = (_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
@@ -16854,8 +16854,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$1g,
-      styles: styles$1x,
+      template: template$1i,
+      styles: styles$1y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16964,7 +16964,7 @@
     padding: 0;
 `;
 
-  const styles$1w = css `
+  const styles$1x = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17248,8 +17248,8 @@
             }
         `));
 
-  const styles$1v = css `
-    ${styles$1w}
+  const styles$1w = css `
+    ${styles$1x}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17269,7 +17269,7 @@
     }
 `;
 
-  const template$1f = (context, definition) => html `
+  const template$1h = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17351,8 +17351,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$1f,
-      styles: styles$1v,
+      template: template$1h,
+      styles: styles$1w,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17360,7 +17360,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$1u = css `
+  const styles$1v = css `
     ${display$2('grid')}
 
     :host {
@@ -17443,7 +17443,7 @@
     }
 `;
 
-  const template$1e = (context, definition) => html `
+  const template$1g = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17544,8 +17544,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$1e,
-      styles: styles$1u,
+      template: template$1g,
+      styles: styles$1v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17557,7 +17557,7 @@
 
   // These styles end up inside a @layer block so must use the
   // cssPartial tag instead of the css tag
-  const styles$1t = cssPartial `
+  const styles$1u = cssPartial `
     .severity-text {
         display: none;
         font: ${errorTextFont};
@@ -17667,12 +17667,12 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$1s = css `
+  const styles$1t = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$2('inline-flex')}
-        ${styles$1t}
+        ${styles$1u}
         :host {
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
@@ -18218,8 +18218,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             }
         `));
 
-  const styles$1r = css `
-    ${styles$1s}
+  const styles$1s = css `
+    ${styles$1t}
     ${'' /* Anchor specific styles */}
     @layer base {
         .control {
@@ -19266,13 +19266,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$1d = html `<div
+  const template$1f = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$1q = css `
+  const styles$1r = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19335,8 +19335,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$1d,
-          styles: styles$1q
+          template: template$1f,
+          styles: styles$1r
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19460,7 +19460,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
    */
   const StepperOrientation = Orientation;
 
-  const template$1c = (context, definition) => html `
+  const template$1e = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -19607,15 +19607,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$1c,
-      styles: styles$1r,
+      template: template$1e,
+      styles: styles$1s,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
 
-  const styles$1p = css `
+  const styles$1q = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19732,7 +19732,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$1b = (context, definition) => html `
+  const template$1d = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -19784,15 +19784,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$1b,
-      styles: styles$1p,
+      template: template$1d,
+      styles: styles$1q,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$1o = css `
+  const styles$1p = css `
     ${display$2('flex')}
 
     :host {
@@ -19832,12 +19832,12 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const styles$1n = css `
-    ${styles$1w}
+  const styles$1o = css `
+    ${styles$1x}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$1a = (context, definition) => html `
+  const template$1c = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -19928,8 +19928,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$1a,
-      styles: styles$1n,
+      template: template$1c,
+      styles: styles$1o,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19963,7 +19963,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$19 = (context, definition) => html `
+  const template$1b = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -20264,15 +20264,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$19,
-      styles: styles$1o,
+      template: template$1b,
+      styles: styles$1p,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$1m = css `
+  const styles$1n = css `
     ${display$2('block')}
 
     :host {
@@ -20377,7 +20377,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$18 = (context, definition) => html `
+  const template$1a = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -20514,8 +20514,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$18,
-      styles: styles$1m,
+      template: template$1a,
+      styles: styles$1n,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20531,7 +20531,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       zIndex1000: '1000'
   };
 
-  const styles$1l = css `
+  const styles$1m = css `
     ${display$2('block')}
 
     :host {
@@ -20562,14 +20562,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$1l
+      styles: styles$1m
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  const styles$1k = css `
+  const styles$1l = css `
     ${display$2('flex')}
 
     :host {
@@ -20721,7 +20721,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       information: 'information'
   };
 
-  const template$17 = html `
+  const template$19 = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -20839,8 +20839,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$17,
-      styles: styles$1k
+      template: template$19,
+      styles: styles$1l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -20881,7 +20881,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     </template>
 `;
 
-  const styles$1j = css `
+  const styles$1k = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20985,11 +20985,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$1j
+      styles: styles$1k
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$1i = css `
+  const styles$1j = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -21086,14 +21086,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$1i,
+      styles: styles$1j,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$1h = css `
+  const styles$1i = css `
     ${display$2('flex')}
 
     :host {
@@ -21117,7 +21117,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$16 = html `
+  const template$18 = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -21132,12 +21132,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$16,
-      styles: styles$1h
+      template: template$18,
+      styles: styles$1i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$1g = css `
+  const styles$1h = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21295,7 +21295,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$1g,
+      styles: styles$1h,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21303,7 +21303,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   const cardButtonTag = 'nimble-card-button';
 
-  const styles$1f = css `
+  const styles$1g = css `
     .error-icon {
         display: none;
     }
@@ -21337,9 +21337,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$1e = css `
+  const styles$1f = css `
     ${display$2('inline-grid')}
-    ${styles$1f}
+    ${styles$1g}
 
     :host {
         font: ${bodyFont};
@@ -21479,7 +21479,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$15 = (_context, definition) => html `
+  const template$17 = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -21576,8 +21576,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$15,
-      styles: styles$1e,
+      template: template$17,
+      styles: styles$1f,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
@@ -21589,7 +21589,7 @@ so this becomes the fallback color for the slot */ ''}
       block: 'block'
   };
 
-  const styles$1d = css `
+  const styles$1e = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21650,7 +21650,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$14 = (context, definition) => html `
+  const template$16 = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <span
         class="content"
@@ -21736,8 +21736,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Chip, StartEnd);
   const nimbleChip = Chip.compose({
       baseName: 'chip',
-      template: template$14,
-      styles: styles$1d,
+      template: template$16,
+      styles: styles$1e,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21745,8 +21745,8 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleChip());
   const chipTag = 'nimble-chip';
 
-  const styles$1c = css `
-    ${styles$1w}
+  const styles$1d = css `
+    ${styles$1x}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -21793,7 +21793,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const template$13 = (context, definition) => html `
+  const template$15 = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -21888,8 +21888,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$13,
-      styles: styles$1c,
+      template: template$15,
+      styles: styles$1d,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21919,7 +21919,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$1b = css `
+  const styles$1c = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -22209,7 +22209,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$1a = css `
+  const styles$1b = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -22236,10 +22236,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$19 = css `
+  const styles$1a = css `
+    ${styles$1c}
+    ${styles$1g}
     ${styles$1b}
-    ${styles$1f}
-    ${styles$1a}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -22360,7 +22360,7 @@ so this becomes the fallback color for the slot */ ''}
         <slot></slot>
     </label>
 `);
-  const template$12 = (context, definition) => html `
+  const template$14 = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -23135,8 +23135,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$12,
-      styles: styles$19,
+      template: template$14,
+      styles: styles$1a,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -23180,7 +23180,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$18 = css `
+  const styles$19 = css `
     ${display$2('grid')}
 
     dialog {
@@ -23273,7 +23273,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$11 = html `
+  const template$13 = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -23421,13 +23421,13 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$11,
-      styles: styles$18,
+      template: template$13,
+      styles: styles$19,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$17 = css `
+  const styles$18 = css `
     ${display$2('block')}
 
     :host {
@@ -23570,7 +23570,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$10 = html `
+  const template$12 = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -23712,8 +23712,8 @@ so this becomes the fallback color for the slot */ ''}
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$10,
-      styles: styles$17
+      template: template$12,
+      styles: styles$18
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -26511,7 +26511,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$16 = css `
+  const styles$17 = css `
     ${display$2('none')}
 `;
 
@@ -26584,7 +26584,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$16
+      styles: styles$17
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26751,13 +26751,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$16
+      styles: styles$17
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$15 = css `
+  const styles$16 = css `
     ${display$2('flex')}
 
     :host {
@@ -26833,7 +26833,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(ListboxOption:class)} component.
    * @public
    */
-  const template$$ = (context, definition) => html `
+  const template$11 = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -26935,13 +26935,13 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$$,
-      styles: styles$15
+      template: template$11,
+      styles: styles$16
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$14 = css `
+  const styles$15 = css `
     ${display$2('flex')}
 
     :host {
@@ -27003,7 +27003,7 @@ so this becomes the fallback color for the slot */ ''}
   const isListOption$1 = (n) => {
       return n instanceof ListOption;
   };
-  const template$_ = html `
+  const template$10 = html `
 <template
     role="group"
     aria-label="${x => x.labelContent}"
@@ -27145,8 +27145,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleListOptionGroup = ListOptionGroup.compose({
       baseName: 'list-option-group',
       baseClass: FoundationElement,
-      template: template$_,
-      styles: styles$14
+      template: template$10,
+      styles: styles$15
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -27173,9 +27173,9 @@ so this becomes the fallback color for the slot */ ''}
       attr()
   ], Mapping$1.prototype, "key", void 0);
 
-  const template$Z = html `<template slot="mapping"></template>`;
+  const template$$ = html `<template slot="mapping"></template>`;
 
-  const styles$13 = css `
+  const styles$14 = css `
     ${display$2('none')}
 `;
 
@@ -27191,8 +27191,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingEmpty.prototype, "text", void 0);
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
-      template: template$Z,
-      styles: styles$13
+      template: template$$,
+      styles: styles$14
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -27262,8 +27262,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingIcon.prototype, "resolvedIcon", void 0);
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
-      template: template$Z,
-      styles: styles$13
+      template: template$$,
+      styles: styles$14
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -27286,8 +27286,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingSpinner.prototype, "textHidden", void 0);
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
-      template: template$Z,
-      styles: styles$13
+      template: template$$,
+      styles: styles$14
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -27303,8 +27303,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MappingText.prototype, "text", void 0);
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
-      template: template$Z,
-      styles: styles$13
+      template: template$$,
+      styles: styles$14
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -27606,7 +27606,7 @@ so this becomes the fallback color for the slot */ ''}
       observable
   ], Menu$1.prototype, "itemIcons", void 0);
 
-  const template$Y = () => html `
+  const template$_ = () => html `
     <template
         slot="${x => {
     if (x.slot) {
@@ -27623,7 +27623,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$12 = css `
+  const styles$13 = css `
     ${display$2('grid')}
 
     :host {
@@ -27694,8 +27694,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenu = Menu.compose({
       baseName: 'menu',
       baseClass: Menu$1,
-      template: template$Y,
-      styles: styles$12
+      template: template$_,
+      styles: styles$13
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   const menuTag = 'nimble-menu';
@@ -27708,10 +27708,11 @@ so this becomes the fallback color for the slot */ ''}
    * The options of where to position the menu relative to the menu button.
    */
   const MenuButtonPosition = {
+      above: 'above',
       auto: 'auto'
   };
 
-  const styles$11 = css `
+  const styles$12 = css `
     ${display$2('inline-block')}
 
     :host {
@@ -27729,7 +27730,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$X = html `
+  const template$Z = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -27979,8 +27980,8 @@ so this becomes the fallback color for the slot */ ''}
   ], MenuButton.prototype, "slottedMenus", void 0);
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
-      template: template$X,
-      styles: styles$11,
+      template: template$Z,
+      styles: styles$12,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -27988,7 +27989,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$10 = css `
+  const styles$11 = css `
     ${display$2('grid')}
 
     :host {
@@ -28085,7 +28086,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$10,
+      styles: styles$11,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -28101,10 +28102,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$$ = css `
+  const styles$10 = css `
     ${display$2('inline-block')}
-    ${styles$1f}
-    ${styles$1a}
+    ${styles$1g}
+    ${styles$1b}
 
     :host {
         font: ${bodyFont};
@@ -28327,7 +28328,7 @@ so this becomes the fallback color for the slot */ ''}
    * The template for the {@link @ni/fast-foundation#(NumberField:class)} component.
    * @public
    */
-  const template$W = (context, definition) => html `
+  const template$Y = (context, definition) => html `
     <template class="${x => (x.readOnly ? 'readonly' : '')}">
         ${labelTemplate$4}
         <div class="root" part="root">
@@ -28481,8 +28482,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleNumberField = NumberField.compose({
       baseName: 'number-field',
       baseClass: NumberField$1,
-      template: template$W,
-      styles: styles$$,
+      template: template$Y,
+      styles: styles$10,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -28525,7 +28526,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$_ = css `
+  const styles$$ = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -28625,15 +28626,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$_,
+      styles: styles$$,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$Z = css `
+  const styles$_ = css `
     ${display$2('inline-block')}
-    ${styles$1f}
-    ${styles$1a}
+    ${styles$1g}
+    ${styles$1b}
 
     .positioning-region {
         display: flex;
@@ -28672,7 +28673,7 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const labelTemplate$3 = createRequiredVisibleLabelTemplate(html `<slot name="label"></slot>`);
-  const template$V = html `
+  const template$X = html `
     <template
         role="radiogroup"
         aria-disabled="${x => x.disabled}"
@@ -28712,8 +28713,8 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleRadioGroup = RadioGroup.compose({
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
-      template: template$V,
-      styles: styles$Z,
+      template: template$X,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -48127,7 +48128,7 @@ ${indentedChild}`;
   // src/index.ts
   var index_default$7 = HardBreak;
 
-  const styles$Y = css `
+  const styles$Z = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -48164,7 +48165,7 @@ ${indentedChild}`;
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$Y
+      styles: styles$Z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -48193,8 +48194,8 @@ ${indentedChild}`;
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$X = css `
-    ${styles$1b}
+  const styles$Y = css `
+    ${styles$1c}
 
     :host {
         height: auto;
@@ -48212,7 +48213,7 @@ ${indentedChild}`;
     }
 `;
 
-  const template$U = html `
+  const template$W = html `
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
@@ -48500,15 +48501,15 @@ ${indentedChild}`;
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
-      template: template$U,
-      styles: styles$X
+      template: template$W,
+      styles: styles$Y
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextMentionListbox());
   const richTextMentionListboxTag = 'nimble-rich-text-mention-listbox';
 
-  const template$T = html `
+  const template$V = html `
     <template
         ${children$1({ property: 'childItems', filter: elements() })}
         @focusout="${x => x.focusoutHandler()}"
@@ -48610,9 +48611,9 @@ ${indentedChild}`;
     </template>
 `;
 
-  const styles$W = css `
+  const styles$X = css `
     ${display$2('inline-flex')}
-    ${styles$1f}
+    ${styles$1g}
 
     :host {
         font: ${bodyFont};
@@ -65415,8 +65416,8 @@ ${indentedChild}`;
   applyMixins(RichTextEditor, ARIAGlobalStatesAndProperties);
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
-      template: template$T,
-      styles: styles$W,
+      template: template$V,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -65425,13 +65426,13 @@ ${indentedChild}`;
       .withPrefix('nimble')
       .register(nimbleRichTextEditor());
 
-  const template$S = html `
+  const template$U = html `
     <template ${children$1({ property: 'childItems', filter: elements() })}>
         <div ${ref('viewer')} class="viewer"></div>
     </template>
 `;
 
-  const styles$V = css `
+  const styles$W = css `
     ${display$2('flex')}
 
     :host {
@@ -65544,17 +65545,17 @@ ${indentedChild}`;
   ], RichTextViewer.prototype, "markdown", void 0);
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
-      template: template$S,
-      styles: styles$V
+      template: template$U,
+      styles: styles$W
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$U = css `
+  const styles$V = css `
+    ${styles$1c}
+    ${styles$1g}
     ${styles$1b}
-    ${styles$1f}
-    ${styles$1a}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -65717,7 +65718,7 @@ ${indentedChild}`;
             }
         `));
 
-  const styles$T = css `
+  const styles$U = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -65887,7 +65888,7 @@ ${indentedChild}`;
             }
         `));
 
-  const template$R = html `
+  const template$T = html `
     <template role="progressbar">
         ${''
 /**
@@ -65934,8 +65935,8 @@ ${indentedChild}`;
   ], Spinner.prototype, "appearance", void 0);
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
-      template: template$R,
-      styles: styles$T
+      template: template$T,
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -65951,7 +65952,7 @@ ${indentedChild}`;
         <slot ${ref('labelSlot')}></slot>
     </label>
 `);
-  const template$Q = (context, definition) => html `
+  const template$S = (context, definition) => html `
     <template
         class="${x => [
     x.collapsible && 'collapsible',
@@ -67163,8 +67164,8 @@ ${indentedChild}`;
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$2,
-      template: template$Q,
-      styles: styles$U,
+      template: template$S,
+      styles: styles$V,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -67177,8 +67178,8 @@ ${indentedChild}`;
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$S = css `
-    ${styles$1s}
+  const styles$T = css `
+    ${styles$1t}
     ${'' /* Button specific styles */}
     @layer base {
         .control {
@@ -67189,7 +67190,7 @@ ${indentedChild}`;
     }
 `;
 
-  const template$P = (context, definition) => html `
+  const template$R = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -67311,15 +67312,15 @@ ${indentedChild}`;
   ], Step.prototype, "tabIndex", void 0);
   const nimbleStep = Step.compose({
       baseName: 'step',
-      template: template$P,
-      styles: styles$S,
+      template: template$R,
+      styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
 
-  const styles$R = css `
+  const styles$S = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -67390,7 +67391,7 @@ ${indentedChild}`;
     }
 `;
 
-  const template$O = html `
+  const template$Q = html `
     ${when(x => x.showScrollButtons, html `
         <${buttonTag}
             content-hidden
@@ -67535,12 +67536,12 @@ ${indentedChild}`;
   ], Stepper.prototype, "steps", void 0);
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
-      template: template$O,
-      styles: styles$R
+      template: template$Q,
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -67767,7 +67768,7 @@ ${indentedChild}`;
             }
         `));
 
-  const template$N = html `
+  const template$P = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -67811,12 +67812,12 @@ ${indentedChild}`;
   const nimbleSwitch = Switch.compose({
       baseClass: Switch$1,
       baseName: 'switch',
-      template: template$N,
-      styles: styles$Q
+      template: template$P,
+      styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$P = css `
+  const styles$Q = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -67927,11 +67928,11 @@ ${indentedChild}`;
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$P
+      styles: styles$Q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$O = css `
+  const styles$P = css `
     ${display$2('block')}
 
     :host {
@@ -67950,7 +67951,7 @@ ${indentedChild}`;
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$O
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -71676,7 +71677,7 @@ ${indentedChild}`;
       }
   }
 
-  const styles$N = css `
+  const styles$O = css `
     ${display$2('flex')}
 
     :host {
@@ -71896,7 +71897,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$M = css `
+  const styles$N = css `
     ${display$2('flex')}
 
     :host {
@@ -71929,7 +71930,7 @@ focus outline in that case.
     }
 `;
 
-  const template$M = html `
+  const template$O = html `
     <template role="columnheader"
         class="${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}"
         aria-sort="${x => x.ariaSort}"
@@ -72015,13 +72016,13 @@ focus outline in that case.
   ], TableHeader.prototype, "isGrouped", void 0);
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
-      template: template$M,
-      styles: styles$M
+      template: template$O,
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$L = css `
+  const styles$M = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -72046,9 +72047,9 @@ focus outline in that case.
     }
 `;
 
-  const styles$K = css `
+  const styles$L = css `
     ${display$2('flex')}
-    ${styles$L}
+    ${styles$M}
 
     :host {
         width: fit-content;
@@ -72218,7 +72219,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$J = css `
+  const styles$K = css `
     ${display$2('flex')}
 
     :host {
@@ -72263,7 +72264,7 @@ focus outline in that case.
     }
 `;
 
-  const template$L = html `
+  const template$N = html `
     <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
         @focusin="${x => x.onCellFocusIn()}"
         @blur="${x => x.onCellBlur()}"
@@ -72360,13 +72361,13 @@ focus outline in that case.
   ], TableCell.prototype, "nestingLevel", void 0);
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
-      template: template$L,
-      styles: styles$J
+      template: template$N,
+      styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
 
-  const template$K = html `
+  const template$M = html `
     <template 
         role="row"
         aria-selected=${x => x.ariaSelected}
@@ -72761,15 +72762,15 @@ focus outline in that case.
   ], TableRow.prototype, "ariaSelected", null);
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
-      template: template$K,
-      styles: styles$K
+      template: template$M,
+      styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$I = css `
+  const styles$J = css `
     ${display$2('grid')}
-    ${styles$L}
+    ${styles$M}
 
     :host {
         align-items: center;
@@ -72857,7 +72858,7 @@ focus outline in that case.
             }
         `));
 
-  const template$J = html `
+  const template$L = html `
     <template
         role="row"
         @click=${x => x.onGroupExpandToggle()}
@@ -73014,13 +73015,13 @@ focus outline in that case.
   ], TableGroupRow.prototype, "allowHover", void 0);
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
-      template: template$J,
-      styles: styles$I
+      template: template$L,
+      styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
 
-  const template$I = html `
+  const template$K = html `
     <template
         role="treegrid"
         ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
@@ -77661,12 +77662,12 @@ focus outline in that case.
   ], Table$1.prototype, "windowShiftKeyDown", void 0);
   const nimbleTable = Table$1.compose({
       baseName: 'table',
-      template: template$I,
-      styles: styles$N
+      template: template$K,
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$H = css `
+  const styles$I = css `
     ${display$2('contents')}
 
     .header-content {
@@ -77678,7 +77679,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$H = html `<span
+  const template$J = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -77743,7 +77744,7 @@ focus outline in that case.
       return ColumnWithPlaceholder;
   }
 
-  const styles$G = css `
+  const styles$H = css `
     ${display$2('flex')}
 
     :host {
@@ -77774,7 +77775,7 @@ focus outline in that case.
     }
 `;
 
-  const template$G = html `
+  const template$I = html `
     <template
         @click="${(x, c) => {
     if (typeof x.cellRecord?.href === 'string') {
@@ -77866,8 +77867,8 @@ focus outline in that case.
   ], TableColumnAnchorCellView.prototype, "showAnchor", null);
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
-      template: template$G,
-      styles: styles$G
+      template: template$I,
+      styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -77944,7 +77945,7 @@ focus outline in that case.
       observable
   ], TableColumnTextGroupHeaderViewBase.prototype, "text", void 0);
 
-  const template$F = html `
+  const template$H = html `
     <span
         ${overflow('hasOverflow')}
         title="${x => (x.hasOverflow && x.text ? x.text : null)}"
@@ -77953,7 +77954,7 @@ focus outline in that case.
     </span>
 `;
 
-  const styles$F = css `
+  const styles$G = css `
     ${display$2('flex')}
 
     span {
@@ -77977,8 +77978,8 @@ focus outline in that case.
   }
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
-      template: template$F,
-      styles: styles$F
+      template: template$H,
+      styles: styles$G
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78222,8 +78223,8 @@ focus outline in that case.
   ], TableColumnAnchor.prototype, "download", void 0);
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
-      template: template$H,
-      styles: styles$H
+      template: template$J,
+      styles: styles$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78275,15 +78276,15 @@ focus outline in that case.
   }
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
-      template: template$F,
-      styles: styles$F
+      template: template$H,
+      styles: styles$G
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(tableColumnDateTextGroupHeaderView());
   const tableColumnDateTextGroupHeaderViewTag = 'nimble-table-column-date-text-group-header-view';
 
-  const template$E = html `
+  const template$G = html `
     <template
         class="
             ${x => (x.alignment === TableColumnAlignment.right ? 'right-align' : '')}
@@ -78299,7 +78300,7 @@ focus outline in that case.
     </template>
 `;
 
-  const styles$E = css `
+  const styles$F = css `
     ${display$2('flex')}
 
     :host {
@@ -78401,8 +78402,8 @@ focus outline in that case.
   }
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
-      template: template$E,
-      styles: styles$E
+      template: template$G,
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -78660,8 +78661,8 @@ focus outline in that case.
   ], TableColumnDateText.prototype, "customHourCycle", void 0);
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
-      template: template$H,
-      styles: styles$H
+      template: template$J,
+      styles: styles$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78677,8 +78678,8 @@ focus outline in that case.
   }
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
-      template: template$E,
-      styles: styles$E
+      template: template$G,
+      styles: styles$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78779,8 +78780,8 @@ focus outline in that case.
   }
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
-      template: template$F,
-      styles: styles$F
+      template: template$H,
+      styles: styles$G
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78832,8 +78833,8 @@ focus outline in that case.
   }
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
-      template: template$H,
-      styles: styles$H
+      template: template$J,
+      styles: styles$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78941,15 +78942,15 @@ focus outline in that case.
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$D = css `
-    ${styles$H}
+  const styles$E = css `
+    ${styles$I}
 
     slot[name='mapping'] {
         display: none;
     }
 `;
 
-  const template$D = html `${template$H}<slot ${slotted('mappings')} name="mapping"></slot>`;
+  const template$F = html `${template$J}<slot ${slotted('mappings')} name="mapping"></slot>`;
 
   const enumBaseValidityFlagNames = [
       'invalidMappingKeyValueForType',
@@ -79035,7 +79036,7 @@ focus outline in that case.
       }
   }
 
-  const styles$C = css `
+  const styles$D = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -79059,7 +79060,7 @@ focus outline in that case.
     }
 `;
 
-  const template$C = html `
+  const template$E = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -79203,15 +79204,15 @@ focus outline in that case.
   ], TableColumnMappingGroupHeaderView.prototype, "visualizationTemplate", void 0);
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
-      template: template$C,
-      styles: styles$C
+      template: template$E,
+      styles: styles$D
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$B = css `
+  const styles$C = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -79235,7 +79236,7 @@ focus outline in that case.
     }
 `;
 
-  const template$B = html `
+  const template$D = html `
     ${when(x => x.visualizationTemplate, html `
             <span class="reserve-icon-size">
                 ${x => x.visualizationTemplate}
@@ -79322,8 +79323,8 @@ focus outline in that case.
   ], TableColumnMappingCellView.prototype, "hasOverflow", void 0);
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
-      template: template$B,
-      styles: styles$B
+      template: template$D,
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -79406,23 +79407,23 @@ focus outline in that case.
   ], TableColumnMapping.prototype, "widthMode", void 0);
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
-      template: template$D,
-      styles: styles$D
+      template: template$F,
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnMapping());
 
-  const template$A = html `
+  const template$C = html `
     <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
-        >${template$H}</template
+        >${template$J}</template
     >
 `;
 
   /** @internal */
   const cellViewMenuSlotName = 'menu-button-menu';
 
-  const template$z = html `
+  const template$B = html `
     ${when(x => x.showMenuButton, html `
         <${menuButtonTag}
             ${ref('menuButton')}
@@ -79441,7 +79442,7 @@ focus outline in that case.
     `)}
 `;
 
-  const styles$A = css `
+  const styles$B = css `
     :host {
         align-self: center;
         width: 100%;
@@ -79516,8 +79517,8 @@ focus outline in that case.
   ], TableColumnMenuButtonCellView.prototype, "showMenuButton", null);
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
-      template: template$z,
-      styles: styles$A
+      template: template$B,
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
   const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
@@ -79572,8 +79573,8 @@ focus outline in that case.
   ], TableColumnMenuButton.prototype, "menuSlot", void 0);
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
-      template: template$A,
-      styles: styles$H
+      template: template$C,
+      styles: styles$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79581,7 +79582,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$y = html `<span
+  const template$A = html `<span
     ${overflow('hasOverflow')}
     class="header-content"
     title=${x => (x.hasOverflow && x.headerTextContent ? x.headerTextContent : null)}
@@ -79600,8 +79601,8 @@ focus outline in that case.
   }
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
-      template: template$F,
-      styles: styles$F
+      template: template$H,
+      styles: styles$G
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79622,8 +79623,8 @@ focus outline in that case.
   }
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
-      template: template$E,
-      styles: styles$E
+      template: template$G,
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -80163,8 +80164,8 @@ focus outline in that case.
   ], TableColumnNumberText.prototype, "unit", void 0);
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
-      template: template$y,
-      styles: styles$H
+      template: template$A,
+      styles: styles$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -80182,8 +80183,8 @@ focus outline in that case.
   }
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
-      template: template$E,
-      styles: styles$E
+      template: template$G,
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -80237,15 +80238,15 @@ focus outline in that case.
   }
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
-      template: template$H,
-      styles: styles$H
+      template: template$J,
+      styles: styles$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$z = css `
-    ${styles$1o}
+  const styles$A = css `
+    ${styles$1p}
 
     .tabpanel {
         overflow: auto;
@@ -80326,12 +80327,12 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$19,
-      styles: styles$z
+      template: template$1b,
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$y = css `
+  const styles$z = css `
     ${display$2('flex')}
 
     :host {
@@ -80363,7 +80364,7 @@ focus outline in that case.
     }
 `;
 
-  const template$x = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <template slot="end">
         ${when(x => x.defaultSlottedElements.length > 0, html `
             <div class="separator"></div>
@@ -80395,8 +80396,8 @@ focus outline in that case.
   ], TabsToolbar.prototype, "defaultSlottedElements", void 0);
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
-      template: template$x,
-      styles: styles$y
+      template: template$z,
+      styles: styles$z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
   applyMixins(TabsToolbar, StartEnd);
@@ -80406,10 +80407,10 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$x = css `
+  const styles$y = css `
     ${display$2('inline-flex')}
-    ${styles$1f}
-    ${styles$1a}
+    ${styles$1g}
+    ${styles$1b}
 
     :host {
         font: ${bodyFont};
@@ -80601,7 +80602,7 @@ focus outline in that case.
         <slot ${slotted('defaultSlottedNodes')}></slot>
     </label>
 `);
-  const template$w = () => html `
+  const template$y = () => html `
     ${labelTemplate$1}
     <div class="container">
         <textarea
@@ -80749,8 +80750,8 @@ focus outline in that case.
   const nimbleTextArea = TextArea.compose({
       baseName: 'text-area',
       baseClass: TextArea$1,
-      template: template$w,
-      styles: styles$x,
+      template: template$y,
+      styles: styles$y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -80767,10 +80768,10 @@ focus outline in that case.
       frameless: 'frameless'
   };
 
-  const styles$w = css `
+  const styles$x = css `
     ${display$2('inline-block')}
-    ${styles$1f}
-    ${styles$1a}
+    ${styles$1g}
+    ${styles$1b}
 
     :host {
         font: ${bodyFont};
@@ -81044,7 +81045,7 @@ focus outline in that case.
    * The template for the {@link @ni/fast-foundation#(TextField:class)} component.
    * @public
    */
-  const template$v = (context, definition) => html `
+  const template$x = (context, definition) => html `
     <template
         class="
             ${x => (x.readOnly ? 'readonly' : '')}
@@ -81129,8 +81130,8 @@ focus outline in that case.
   const nimbleTextField = TextField.compose({
       baseName: 'text-field',
       baseClass: TextField$1,
-      template: template$v,
-      styles: styles$w,
+      template: template$x,
+      styles: styles$x,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -81147,7 +81148,7 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$v = css `
+  const styles$w = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -81233,7 +81234,7 @@ focus outline in that case.
             }
         `));
 
-  const template$u = html `
+  const template$w = html `
             ${when(x => x.tooltipVisible, html `
             <${anchoredRegionTag}
                 class="anchored-region"
@@ -81285,8 +81286,8 @@ focus outline in that case.
   const nimbleTooltip = Tooltip.compose({
       baseName: 'tooltip',
       baseClass: Tooltip$1,
-      template: template$u,
-      styles: styles$v
+      template: template$w,
+      styles: styles$w
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
   const tooltipTag = 'nimble-tooltip';
@@ -81375,7 +81376,7 @@ focus outline in that case.
       }
   }
 
-  const styles$u = css `
+  const styles$v = css `
     ${display$2('block')}
 
     :host {
@@ -81592,12 +81593,12 @@ focus outline in that case.
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$u,
+      styles: styles$v,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$t = css `
+  const styles$u = css `
     ${display$2('flex')}
 
     :host {
@@ -81611,7 +81612,7 @@ focus outline in that case.
     }
 `;
 
-  const template$t = html `
+  const template$v = html `
     <template
         role="tree"
         ${ref('treeView')}
@@ -81707,8 +81708,8 @@ focus outline in that case.
   const nimbleTreeView = TreeView.compose({
       baseName: 'tree-view',
       baseClass: TreeView$1,
-      template: template$t,
-      styles: styles$t
+      template: template$v,
+      styles: styles$u
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -81824,9 +81825,9 @@ focus outline in that case.
   }
   const unitScaleByte = new UnitScaleByte();
 
-  const template$s = html `<template slot="unit"></template>`;
+  const template$u = html `<template slot="unit"></template>`;
 
-  const styles$s = css `
+  const styles$t = css `
     ${display$2('none')}
 `;
 
@@ -81854,8 +81855,8 @@ focus outline in that case.
   ], UnitByte.prototype, "binary", void 0);
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
-      template: template$s,
-      styles: styles$s
+      template: template$u,
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -81907,8 +81908,8 @@ focus outline in that case.
   }
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
-      template: template$s,
-      styles: styles$s
+      template: template$u,
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -96222,7 +96223,7 @@ focus outline in that case.
       return new Table(reader.readAll());
   }
 
-  const template$r = html `
+  const template$t = html `
     <div class="wafer-map-container">
         <svg class="svg-root">
             <g ${ref('zoomContainer')} transform=${x => x.transform.toString()}>
@@ -96255,7 +96256,7 @@ focus outline in that case.
     </div>
 `;
 
-  const styles$r = css `
+  const styles$s = css `
     ${display$2('inline-block')}
 
     :host {
@@ -99280,8 +99281,8 @@ focus outline in that case.
   ], WaferMap.prototype, "colorScale", void 0);
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
-      template: template$r,
-      styles: styles$r
+      template: template$t,
+      styles: styles$s
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
@@ -99293,7 +99294,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$q = css `
+  const styles$r = css `
     ${display$1('flex')}
 
     :host {
@@ -99366,7 +99367,7 @@ focus outline in that case.
     }
 `;
 
-  const template$q = html `
+  const template$s = html `
 <div class="toolbar ${x => (x.toolbarEmpty ? 'toolbar-empty' : '')}">
     <slot name="toolbar" ${slotted({ property: 'slottedToolbarElements' })}></slot>
 </div>
@@ -99448,16 +99449,16 @@ focus outline in that case.
   ], ChatConversation.prototype, "slottedEndElements", void 0);
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
-      template: template$q,
-      styles: styles$q
+      template: template$s,
+      styles: styles$r
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightChatConversation());
 
-  const styles$p = css `
+  const styles$q = css `
     ${display$1('flex')}
-    ${styles$1f}
+    ${styles$1g}
 
     :host {
         width: 100%;
@@ -99554,8 +99555,9 @@ focus outline in that case.
 
     .action-button {
         align-self: flex-end;
-        width: 80px;
+        width: 48px;
         margin: ${mediumPadding};
+        height: ${controlSlimHeight};
     }
 
     .attachments {
@@ -99600,7 +99602,7 @@ focus outline in that case.
     }
 `;
 
-  const template$p = html `
+  const template$r = html `
 <div class="container">
     <section class="attachments ${x => (x.attachmentsIsEmpty ? '' : 'has-content')}">
         <slot
@@ -99852,8 +99854,8 @@ focus outline in that case.
   ], ChatInput.prototype, "slottedAttachmentsElements", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
-      template: template$p,
-      styles: styles$p,
+      template: template$r,
+      styles: styles$q,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -99871,7 +99873,7 @@ focus outline in that case.
       inbound: 'inbound'
   };
 
-  const styles$o = css `
+  const styles$p = css `
     ${display$1('flex')}
 
     :host {
@@ -99945,7 +99947,7 @@ focus outline in that case.
     }
 `;
 
-  const template$o = (context, definition) => html `
+  const template$q = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -99994,12 +99996,12 @@ focus outline in that case.
   applyMixins(ChatMessage, StartEnd);
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
-      template: template$o,
-      styles: styles$o
+      template: template$q,
+      styles: styles$p
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
 
-  const styles$n = css `
+  const styles$o = css `
     ${display$1('flex')}
 
     :host {
@@ -100057,7 +100059,7 @@ focus outline in that case.
     }
 `;
 
-  const template$n = (context, definition) => html `
+  const template$p = (context, definition) => html `
     <div class="container">
         ${startSlotTemplate(context, definition)}
         <section class="message-content">
@@ -100095,12 +100097,12 @@ focus outline in that case.
   applyMixins(ChatMessageInbound, StartEnd);
   const sprightChatMessageInbound = ChatMessageInbound.compose({
       baseName: 'chat-message-inbound',
-      template: template$n,
-      styles: styles$n
+      template: template$p,
+      styles: styles$o
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
 
-  const styles$m = css `
+  const styles$n = css `
     ${display$1('flex')}
 
     :host {
@@ -100134,7 +100136,7 @@ focus outline in that case.
     }
 `;
 
-  const template$m = () => html `
+  const template$o = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -100149,12 +100151,12 @@ focus outline in that case.
   }
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
-      template: template$m,
-      styles: styles$m
+      template: template$o,
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
 
-  const styles$l = css `
+  const styles$m = css `
     ${display$1('flex')}
 
     :host {
@@ -100181,7 +100183,7 @@ focus outline in that case.
     }
 `;
 
-  const template$l = () => html `
+  const template$n = () => html `
     <div class="container">
         <section class="message-content">
             <slot></slot>
@@ -100196,12 +100198,12 @@ focus outline in that case.
   }
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',
-      template: template$l,
-      styles: styles$l
+      template: template$n,
+      styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
 
-  const styles$k = css `
+  const styles$l = css `
     ${display$1('flex')}
 
     :host {
@@ -100304,13 +100306,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$k = html `
+  const template$m = 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$j = css `
-    ${styles$1q}
+  const styles$k = css `
+    ${styles$1r}
 
     .dark-icon {
         display: none;
@@ -100333,15 +100335,15 @@ focus outline in that case.
   }
   const sprightIconNigelChat = IconNigelChat.compose({
       baseName: 'icon-nigel-chat',
-      template: template$k,
-      styles: styles$j
+      template: template$m,
+      styles: styles$k
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconNigelChat());
   const iconNigelChatTag = 'spright-icon-nigel-chat';
 
-  const template$j = () => html `
+  const template$l = () => html `
     <div class="container">
         <div class="brand-icon">
             <slot name="brand-icon">
@@ -100373,8 +100375,8 @@ focus outline in that case.
   ], ChatMessageWelcome.prototype, "subtitle", void 0);
   const sprightChatMessageWelcome = ChatMessageWelcome.compose({
       baseName: 'chat-message-welcome',
-      template: template$j,
-      styles: styles$k
+      template: template$l,
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());
 
@@ -100395,17 +100397,18 @@ focus outline in that case.
    */
   class IconBreakpointConditional extends Icon {
   }
-  const template$i = html `
+  const template$k = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$6}"></div>
 `;
   const sprightIconBreakpointConditional = IconBreakpointConditional.compose({
       baseName: 'icon-breakpoint-conditional',
-      template: template$i,
-      styles: styles$1q
+      template: template$k,
+      styles: styles$1r
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointConditional());
+  const iconBreakpointConditionalTag = 'spright-icon-breakpoint-conditional';
 
   const iconData$5 = `<?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
@@ -100425,17 +100428,18 @@ focus outline in that case.
    */
   class IconBreakpointDisabled extends Icon {
   }
-  const template$h = html `
+  const template$j = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$5}"></div>
 `;
   const sprightIconBreakpointDisabled = IconBreakpointDisabled.compose({
       baseName: 'icon-breakpoint-disabled',
-      template: template$h,
-      styles: styles$1q
+      template: template$j,
+      styles: styles$1r
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointDisabled());
+  const iconBreakpointDisabledTag = 'spright-icon-breakpoint-disabled';
 
   const iconData$4 = `<?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
@@ -100454,17 +100458,18 @@ focus outline in that case.
    */
   class IconBreakpointEnabled extends Icon {
   }
-  const template$g = html `
+  const template$i = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$4}"></div>
 `;
   const sprightIconBreakpointEnabled = IconBreakpointEnabled.compose({
       baseName: 'icon-breakpoint-enabled',
-      template: template$g,
-      styles: styles$1q
+      template: template$i,
+      styles: styles$1r
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointEnabled());
+  const iconBreakpointEnabledTag = 'spright-icon-breakpoint-enabled';
 
   const iconData$3 = `<?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
@@ -100483,13 +100488,13 @@ focus outline in that case.
    */
   class IconBreakpointExecutionPointer extends Icon {
   }
-  const template$f = html `
+  const template$h = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$3}"></div>
 `;
   const sprightIconBreakpointExecutionPointer = IconBreakpointExecutionPointer.compose({
       baseName: 'icon-breakpoint-execution-pointer',
-      template: template$f,
-      styles: styles$1q
+      template: template$h,
+      styles: styles$1r
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100517,17 +100522,18 @@ focus outline in that case.
    */
   class IconBreakpointHitDisabled extends Icon {
   }
-  const template$e = html `
+  const template$g = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$2}"></div>
 `;
   const sprightIconBreakpointHitDisabled = IconBreakpointHitDisabled.compose({
       baseName: 'icon-breakpoint-hit-disabled',
-      template: template$e,
-      styles: styles$1q
+      template: template$g,
+      styles: styles$1r
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointHitDisabled());
+  const iconBreakpointHitDisabledTag = 'spright-icon-breakpoint-hit-disabled';
 
   const iconData$1 = `<?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
@@ -100551,17 +100557,18 @@ focus outline in that case.
    */
   class IconBreakpointHit extends Icon {
   }
-  const template$d = html `
+  const template$f = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData$1}"></div>
 `;
   const sprightIconBreakpointHit = IconBreakpointHit.compose({
       baseName: 'icon-breakpoint-hit',
-      template: template$d,
-      styles: styles$1q
+      template: template$f,
+      styles: styles$1r
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointHit());
+  const iconBreakpointHitTag = 'spright-icon-breakpoint-hit';
 
   const iconData = `<?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
@@ -100581,20 +100588,21 @@ focus outline in that case.
    */
   class IconBreakpointHover extends Icon {
   }
-  const template$c = html `
+  const template$e = html `
     <div class="icon" aria-hidden="true" :innerHTML="${() => iconData}"></div>
 `;
   const sprightIconBreakpointHover = IconBreakpointHover.compose({
       baseName: 'icon-breakpoint-hover',
-      template: template$c,
-      styles: styles$1q
+      template: template$e,
+      styles: styles$1r
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointHover());
+  const iconBreakpointHoverTag = 'spright-icon-breakpoint-hover';
 
-  const styles$i = css `
-    ${styles$1q}
+  const styles$j = css `
+    ${styles$1r}
 
     .icon svg {
         fill: ${calendarEventBorderReservationColor};
@@ -100611,15 +100619,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
-      template: template$1d,
-      styles: styles$i
+      template: template$1f,
+      styles: styles$j
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalendarWeek());
 
-  const styles$h = css `
-    ${styles$1q}
+  const styles$i = css `
+    ${styles$1r}
 
     .icon svg {
         fill: ${calendarEventBorderCalibrationColor};
@@ -100636,15 +100644,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
-      template: template$1d,
-      styles: styles$h
+      template: template$1f,
+      styles: styles$i
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalipers());
 
-  const styles$g = css `
-    ${styles$1q}
+  const styles$h = css `
+    ${styles$1r}
 
     .icon svg {
         fill: ${calendarEventBorderTransportOrderColor};
@@ -100661,15 +100669,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
-      template: template$1d,
-      styles: styles$g
+      template: template$1f,
+      styles: styles$h
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemForklift());
 
-  const styles$f = css `
-    ${styles$1q}
+  const styles$g = css `
+    ${styles$1r}
 
     .icon svg {
         fill: ${calendarEventBorderStaticColor};
@@ -100686,15 +100694,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
-      template: template$1d,
-      styles: styles$f
+      template: template$1f,
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemRectangleCheckLines());
 
-  const styles$e = css `
-    ${styles$1q}
+  const styles$f = css `
+    ${styles$1r}
 
     .icon svg {
         fill: ${calendarEventBorderWorkOrderColor};
@@ -100711,15 +100719,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemSquareListCog = IconWorkItemSquareListCog.compose({
       baseName: 'icon-work-item-square-list-cog',
-      template: template$1d,
-      styles: styles$e
+      template: template$1f,
+      styles: styles$f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemSquareListCog());
 
-  const styles$d = css `
-    ${styles$1q}
+  const styles$e = css `
+    ${styles$1r}
 
     .icon svg {
         fill: ${calendarEventBorderJobColor};
@@ -100736,15 +100744,15 @@ focus outline in that case.
   }
   const sprightIconWorkItemUserHelmetSafety = IconWorkItemUserHelmetSafety.compose({
       baseName: 'icon-work-item-user-helmet-safety',
-      template: template$1d,
-      styles: styles$d
+      template: template$1f,
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemUserHelmetSafety());
 
-  const styles$c = css `
-    ${styles$1q}
+  const styles$d = css `
+    ${styles$1r}
 
     .icon svg {
         fill: ${calendarEventBorderMaintenanceColor};
@@ -100761,14 +100769,14 @@ focus outline in that case.
   }
   const sprightIconWorkItemWrenchHammer = IconWorkItemWrenchHammer.compose({
       baseName: 'icon-work-item-wrench-hammer',
-      template: template$1d,
-      styles: styles$c
+      template: template$1f,
+      styles: styles$d
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemWrenchHammer());
 
-  const styles$b = css `
+  const styles$c = css `
     ${display$1('inline-block')}
 
     :host {
@@ -100793,7 +100801,7 @@ focus outline in that case.
     }
 `;
 
-  const template$b = html `<slot></slot>`;
+  const template$d = html `<slot></slot>`;
 
   /**
    * A Spright demo component (not for production use)
@@ -100802,8 +100810,8 @@ focus outline in that case.
   }
   const sprightRectangle = Rectangle.compose({
       baseName: 'rectangle',
-      template: template$b,
-      styles: styles$b
+      template: template$d,
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightRectangle());
 
@@ -100830,7 +100838,7 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$a = css `
+  const styles$b = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -100936,7 +100944,7 @@ focus outline in that case.
             }
         `));
 
-  const template$a = html `
+  const template$c = html `
     <details
         class="accordion-item-details"
         ?open="${x => x.expanded}"
@@ -100987,8 +100995,8 @@ focus outline in that case.
   ], FvAccordionItem.prototype, "appearance", void 0);
   const okFvAccordionItem = FvAccordionItem.compose({
       baseName: 'fv-accordion-item',
-      template: template$a,
-      styles: styles$a
+      template: template$c,
+      styles: styles$b
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')
@@ -101003,7 +101011,7 @@ focus outline in that case.
       card: 'card'
   };
 
-  const styles$9 = css `
+  const styles$a = css `
     ${display('block')}
 
     :host {
@@ -101354,7 +101362,7 @@ focus outline in that case.
         </div>
     </div>
 `;
-  const template$9 = html `
+  const template$b = html `
     ${when(x => x.interactionMode === FvCardInteractionMode.card, html `
             <${cardButtonTag}
                 class="card-shell card-button-shell"
@@ -101502,14 +101510,14 @@ focus outline in that case.
   ], FvCard.prototype, "hasFooterEndContent", void 0);
   const okFvCard = FvCard.compose({
       baseName: 'fv-card',
-      template: template$9,
-      styles: styles$9
+      template: template$b,
+      styles: styles$a
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')
       .register(okFvCard());
 
-  const styles$8 = css `
+  const styles$9 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -101757,7 +101765,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$8 = html `
+  const template$a = html `
     <div class="chip-selector">
         ${when(x => x.label.length > 0, html `
                 <label id="${x => x.labelId}" class="label" for="${x => x.inputId}">
@@ -102249,12 +102257,12 @@ focus outline in that case.
   ], FvChipSelector.prototype, "field", void 0);
   const okFvChipSelector = FvChipSelector.compose({
       baseName: 'fv-chip-selector',
-      template: template$8,
-      styles: styles$8
+      template: template$a,
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvChipSelector());
 
-  const styles$7 = css `
+  const styles$8 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -102306,7 +102314,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$7 = html `
+  const template$9 = html `
     <button
         id="${x => x.tooltipAnchorId}"
         class="context-help-trigger"
@@ -102354,12 +102362,12 @@ focus outline in that case.
   ], FvContextHelp.prototype, "iconVisible", void 0);
   const okFvContextHelp = FvContextHelp.compose({
       baseName: 'fv-context-help',
-      template: template$7,
-      styles: styles$7
+      template: template$9,
+      styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvContextHelp());
 
-  const styles$6 = css `
+  const styles$7 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -102576,7 +102584,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$6 = html `
+  const template$8 = html `
     <div
         class="split-button-container"
         ${ref('splitButtonContainer')}
@@ -102748,12 +102756,12 @@ focus outline in that case.
   ], FvSplitButton.prototype, "region", void 0);
   const okFvSplitButton = FvSplitButton.compose({
       baseName: 'fv-split-button',
-      template: template$6,
-      styles: styles$6
+      template: template$8,
+      styles: styles$7
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButton());
 
-  const styles$5 = css `
+  const styles$6 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -102978,7 +102986,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$5 = html `
+  const template$7 = html `
     <div
         class="split-button-container"
         ${ref('splitButtonContainer')}
@@ -103178,12 +103186,12 @@ focus outline in that case.
   ], FvSplitButtonAnchor.prototype, "region", void 0);
   const okFvSplitButtonAnchor = FvSplitButtonAnchor.compose({
       baseName: 'fv-split-button-anchor',
-      template: template$5,
-      styles: styles$5
+      template: template$7,
+      styles: styles$6
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButtonAnchor());
 
-  const styles$4 = css `
+  const styles$5 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -103229,7 +103237,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$4 = html `
+  const template$6 = html `
     <section class="summary-panel" part="panel">
         <div class="summary-item-container" part="items">
             <slot @slotchange="${x => x.handleItemsSlotChange()}"></slot>
@@ -103311,12 +103319,12 @@ focus outline in that case.
   ], FvSummaryPanel.prototype, "editItemsButtonLabel", void 0);
   const okFvSummaryPanel = FvSummaryPanel.compose({
       baseName: 'fv-summary-panel',
-      template: template$4,
-      styles: styles$4
+      template: template$6,
+      styles: styles$5
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanel());
 
-  const styles$3 = css `
+  const styles$4 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -103451,7 +103459,7 @@ focus outline in that case.
     @layer top {}
 `;
 
-  const template$3 = html `
+  const template$5 = html `
     <${cardButtonTag}
         class="summary-panel-tile"
         ?selected="${x => x.selected}"
@@ -103513,12 +103521,12 @@ focus outline in that case.
   ], FvSummaryPanelTile.prototype, "textPosition", void 0);
   const okFvSummaryPanelTile = FvSummaryPanelTile.compose({
       baseName: 'fv-summary-panel-tile',
-      template: template$3,
-      styles: styles$3
+      template: template$5,
+      styles: styles$4
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSummaryPanelTile());
 
-  const styles$2 = css `
+  const styles$3 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -103693,7 +103701,7 @@ focus outline in that case.
     }
 `;
 
-  const template$2 = html `
+  const template$4 = html `
     <div class="search-input-container">
         <span class="search-input-icon" aria-hidden="true">
             <${iconMagnifyingGlassTag}></${iconMagnifyingGlassTag}>
@@ -103764,15 +103772,15 @@ focus outline in that case.
   const okFvSearchInput = FvSearchInput.compose({
       baseName: 'fv-search-input',
       baseClass: TextField$1,
-      template: template$2,
-      styles: styles$2,
+      template: template$4,
+      styles: styles$3,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSearchInput());
 
-  const styles$1 = css `
+  const styles$2 = css `
     ${display('inline-block')}
 
     :host {
@@ -103797,7 +103805,7 @@ focus outline in that case.
     }
 `;
 
-  const template$1 = html `<slot></slot>`;
+  const template$3 = html `<slot></slot>`;
 
   /**
    * A Ok demo component (not for production use)
@@ -103806,12 +103814,12 @@ focus outline in that case.
   }
   const okExButton = ExButton.compose({
       baseName: 'ex-button',
-      template: template$1,
-      styles: styles$1
+      template: template$3,
+      styles: styles$2
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okExButton());
 
-  const styles = css `
+  const styles$1 = css `
     ${display('inline-flex')}
 
     :host {
@@ -103827,7 +103835,7 @@ focus outline in that case.
     }
 `;
 
-  const template = html `<img aria-hidden="true" src=${x => x.url}>`;
+  const template$2 = html `<img aria-hidden="true" src=${x => x.url}>`;
 
   /* eslint-disable max-classes-per-file */
   /**
@@ -103868,8 +103876,8 @@ focus outline in that case.
           const baseName = `ts-icon-dynamic-${name}`;
           const composedIcon = iconClass.compose({
               baseName,
-              template,
-              styles
+              template: template$2,
+              styles: styles$1
           });
           DesignSystem.getOrCreate().withPrefix('ok').register(composedIcon());
       }
@@ -103881,5 +103889,502 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okTsIconDynamic());
 
+  /**
+   * The possible states of a breakpoint indicator.
+   */
+  const BreakpointState = {
+      off: 'off',
+      enabled: 'enabled',
+      disabled: 'disabled',
+      hit: 'hit',
+      conditional: 'conditional',
+      hitDisabled: 'hit-disabled'
+  };
+  /** @internal */
+  const breakpointMenuItemStateAttributeName = 'data-breakpoint-state';
+  /** @internal */
+  const breakpointCellViewMenuSlotName = 'menu';
+
+  const template$1 = html `
+    <template
+        ?open="${x => x.open}"
+        @focusout="${(x, c) => x.focusoutHandler(c.event)}"
+    >
+        <button
+            ${ref('button')}
+            part="button"
+            class="breakpoint-button state-${x => x.currentState}"
+            @click="${(x, c) => x.onButtonClick(c.event)}"
+            @contextmenu="${(x, c) => x.onContextMenu(c.event)}"
+            @keydown="${(x, c) => x.onKeyDown(c.event)}"
+            aria-label="${x => x.ariaLabelText}"
+            title="${x => x.tooltipText}"
+            ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+            tabindex="-1"
+        >
+            ${when(x => x.currentState === BreakpointState.off, html `<${iconBreakpointHoverTag} />`)}
+            ${when(x => x.currentState === BreakpointState.enabled, html `<${iconBreakpointEnabledTag} />`)}
+            ${when(x => x.currentState === BreakpointState.disabled, html `<${iconBreakpointDisabledTag} />`)}
+            ${when(x => x.currentState === BreakpointState.hit, html `<${iconBreakpointHitTag} />`)}
+            ${when(x => x.currentState === BreakpointState.conditional, html `<${iconBreakpointConditionalTag} />`)}
+            ${when(x => x.currentState === BreakpointState.hitDisabled, html `<${iconBreakpointHitDisabledTag} />`)}
+        </button>
+                ${when(x => x.open, html `
+                    <${anchoredRegionTag}
+                        fixed-placement="true"
+                        auto-update-mode="auto"
+                        horizontal-inset="true"
+                        horizontal-positioning-mode="dynamic"
+                        vertical-positioning-mode="${x => (x.menuPosition === MenuButtonPosition.auto ? 'dynamic' : 'locktodefault')}"
+                        vertical-default-position="${x => (x.menuPosition === MenuButtonPosition.above ? 'top' : 'bottom')}"
+                        @loaded="${x => x.regionLoadedHandler()}"
+                        @change="${(x, c) => x.onContextMenuChange(c.event)}"
+                        @keydown="${(x, c) => x.contextMenuKeyDownHandler(c.event)}"
+                        ${ref('region')}
+                    >
+                        <span part="menu">
+                            <slot name="${breakpointCellViewMenuSlotName}" ${slotted({ property: 'slottedMenus' })}></slot>
+                        </span>
+                    </${anchoredRegionTag}>
+                `)}
+    </template>
+`;
+
+  const styles = css `
+    ${display$2('inline-flex')}
+
+    :host {
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .breakpoint-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        padding: 0;
+        margin: 0;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        outline-offset: -1px;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .breakpoint-button:focus-visible {
+        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
+    .breakpoint-button svg {
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .breakpoint-button.state-off > * {
+        opacity: 0;
+    }
+
+    .breakpoint-button.state-off:hover > *,
+    .breakpoint-button.state-off:focus-visible > * {
+        opacity: 1;
+    }
+
+`;
+
+  /**
+   * Cell view for the breakpoint column that renders a clickable breakpoint indicator.
+   */
+  class TsTableColumnBreakpointCellView extends TableCellView {
+      constructor() {
+          super(...arguments);
+          /**
+           * Specifies whether or not the menu is open.
+           */
+          this.open = false;
+          this.focusLastItemWhenOpened = false;
+          /** @internal */
+          this.breakpointEnabledString = 'Breakpoint enabled';
+          /** @internal */
+          this.breakpointDisabledString = 'Breakpoint disabled';
+          /** @internal */
+          this.breakpointHitString = 'Breakpoint hit';
+          /** @internal */
+          this.breakpointConditionalString = 'Conditional breakpoint';
+          /** @internal */
+          this.breakpointHitDisabledString = 'Breakpoint hit (disabled)';
+          /** @internal */
+          this.breakpointAddString = 'Add breakpoint';
+          /** @internal */
+          this.breakpointRemoveString = 'Remove breakpoint';
+          this.menuChangeHandler = () => {
+              this.open = false;
+              this.button?.focus();
+          };
+      }
+      /** @internal */
+      get currentState() {
+          const value = this.cellRecord?.value;
+          if (value && Object.values(BreakpointState).includes(value)) {
+              return value;
+          }
+          return BreakpointState.off;
+      }
+      /** @internal */
+      get tooltipText() {
+          if (this.currentState === BreakpointState.off) {
+              return this.breakpointAddString;
+          }
+          return this.breakpointRemoveString;
+      }
+      /** @internal */
+      get ariaLabelText() {
+          switch (this.currentState) {
+              case BreakpointState.enabled:
+                  return this.breakpointEnabledString;
+              case BreakpointState.disabled:
+                  return this.breakpointDisabledString;
+              case BreakpointState.hit:
+                  return this.breakpointHitString;
+              case BreakpointState.conditional:
+                  return this.breakpointConditionalString;
+              case BreakpointState.hitDisabled:
+                  return this.breakpointHitDisabledString;
+              default:
+                  return this.breakpointAddString;
+          }
+      }
+      /** @internal */
+      get menuPosition() {
+          return this.columnConfig?.position ?? MenuButtonPosition.auto;
+      }
+      get tabbableChildren() {
+          if (this.button) {
+              return [this.button];
+          }
+          return [];
+      }
+      /** @internal */
+      onButtonClick(event) {
+          event.stopPropagation();
+          const oldState = this.currentState;
+          const newState = oldState === BreakpointState.off
+              ? BreakpointState.enabled
+              : BreakpointState.off;
+          this.emitToggle(oldState, newState);
+      }
+      /** @internal */
+      onContextMenu(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.requestContextMenu();
+      }
+      /** @internal */
+      onKeyDown(event) {
+          if ((event.key === 'F10' && event.shiftKey)
+              || event.key === TsTableColumnBreakpointCellView.menuKeyAlias
+              || (event.key === TsTableColumnBreakpointCellView.contextMenuKeyAlias)) {
+              event.preventDefault();
+              event.stopPropagation();
+              this.requestContextMenu();
+              return false;
+          }
+          if (event.key === 'F9' || ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'b')) {
+              event.preventDefault();
+              event.stopPropagation();
+              this.onButtonClick(event);
+              return false;
+          }
+          if (event.key === 'ArrowDown') {
+              event.preventDefault();
+              event.stopPropagation();
+              this.focusLastItemWhenOpened = false;
+              this.requestContextMenu();
+              return false;
+          }
+          if (event.key === 'ArrowUp') {
+              event.preventDefault();
+              event.stopPropagation();
+              this.focusLastItemWhenOpened = true;
+              this.requestContextMenu();
+              return false;
+          }
+          return true;
+      }
+      regionLoadedHandler() {
+          if (this.focusLastItemWhenOpened) {
+              this.focusLastItemWhenOpened = false;
+              this.focusLastMenuItem();
+          }
+          else {
+              this.focusMenu();
+          }
+      }
+      regionChanged(prev, _next) {
+          if (prev) {
+              prev.removeEventListener('change', this.menuChangeHandler, { capture: true });
+          }
+          if (this.region) {
+              this.region.anchorElement = this.button ?? this;
+              this.region.addEventListener('change', this.menuChangeHandler, { capture: true });
+          }
+      }
+      buttonChanged() {
+          if (this.region) {
+              this.region.anchorElement = this.button ?? this;
+          }
+      }
+      focusoutHandler(e) {
+          if (!this.open) {
+              return true;
+          }
+          const focusTarget = e.relatedTarget;
+          if (!this.contains(focusTarget)
+              && !this.region?.contains(focusTarget)
+              && !this.getMenu()?.contains(focusTarget)) {
+              this.open = false;
+              return false;
+          }
+          return true;
+      }
+      contextMenuKeyDownHandler(e) {
+          switch (e.key) {
+              case 'Escape':
+                  this.open = false;
+                  this.button?.focus();
+                  return false;
+              default:
+                  return true;
+          }
+      }
+      onContextMenuChange(event) {
+          const requestedState = this.getRequestedStateFromEvent(event);
+          if (!requestedState) {
+              return;
+          }
+          const detail = {
+              recordId: this.recordId,
+              requestedState,
+              currentState: this.currentState
+          };
+          this.$emit('breakpoint-column-state-change-requested', detail);
+      }
+      getMenu() {
+          if (!this.slottedMenus || this.slottedMenus.length === 0) {
+              return undefined;
+          }
+          let currentItem = this.slottedMenus[0];
+          while (currentItem) {
+              if (currentItem.getAttribute('role') === 'menu') {
+                  return currentItem;
+              }
+              if (this.isSlotElement(currentItem)) {
+                  const firstNode = currentItem.assignedNodes()[0];
+                  if (firstNode instanceof HTMLElement) {
+                      currentItem = firstNode;
+                  }
+                  else {
+                      currentItem = undefined;
+                  }
+              }
+              else {
+                  return undefined;
+              }
+          }
+          return undefined;
+      }
+      isSlotElement(element) {
+          return element?.nodeName === 'SLOT';
+      }
+      focusMenu() {
+          this.getMenu()?.focus();
+      }
+      focusLastMenuItem() {
+          const menuItems = this.getMenu()?.querySelectorAll('[role=menuitem]');
+          if (menuItems && menuItems.length > 0) {
+              const lastMenuItem = menuItems[menuItems.length - 1];
+              lastMenuItem.focus();
+          }
+      }
+      emitToggle(oldState, newState) {
+          const detail = {
+              recordId: this.recordId,
+              newState,
+              oldState
+          };
+          this.$emit('breakpoint-column-toggle', detail);
+      }
+      requestContextMenu() {
+          this.openMenuFromColumnSlot();
+      }
+      openMenuFromColumnSlot() {
+          const configuredSlotName = this.columnConfig?.menuSlot;
+          if (!configuredSlotName) {
+              return;
+          }
+          const eventDetail = {
+              slots: [
+                  {
+                      name: configuredSlotName,
+                      slot: breakpointCellViewMenuSlotName
+                  }
+              ]
+          };
+          this.$emit('cell-view-slots-request', eventDetail);
+          this.open = true;
+      }
+      getRequestedStateFromEvent(event) {
+          const target = event.target;
+          if (!(target instanceof HTMLElement)) {
+              return undefined;
+          }
+          const stateElement = target.closest(`[${breakpointMenuItemStateAttributeName}]`);
+          if (!stateElement) {
+              return undefined;
+          }
+          const requestedState = stateElement.getAttribute(breakpointMenuItemStateAttributeName);
+          if (requestedState && Object.values(BreakpointState).includes(requestedState)) {
+              return requestedState;
+          }
+          return undefined;
+      }
+  }
+  TsTableColumnBreakpointCellView.menuKeyAlias = 'Menu';
+  TsTableColumnBreakpointCellView.contextMenuKeyAlias = 'ContextMenu';
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], TsTableColumnBreakpointCellView.prototype, "open", void 0);
+  __decorate([
+      observable
+  ], TsTableColumnBreakpointCellView.prototype, "region", void 0);
+  __decorate([
+      observable
+  ], TsTableColumnBreakpointCellView.prototype, "slottedMenus", void 0);
+  __decorate([
+      observable
+  ], TsTableColumnBreakpointCellView.prototype, "breakpointEnabledString", void 0);
+  __decorate([
+      observable
+  ], TsTableColumnBreakpointCellView.prototype, "breakpointDisabledString", void 0);
+  __decorate([
+      observable
+  ], TsTableColumnBreakpointCellView.prototype, "breakpointHitString", void 0);
+  __decorate([
+      observable
+  ], TsTableColumnBreakpointCellView.prototype, "breakpointConditionalString", void 0);
+  __decorate([
+      observable
+  ], TsTableColumnBreakpointCellView.prototype, "breakpointHitDisabledString", void 0);
+  __decorate([
+      observable
+  ], TsTableColumnBreakpointCellView.prototype, "breakpointAddString", void 0);
+  __decorate([
+      observable
+  ], TsTableColumnBreakpointCellView.prototype, "breakpointRemoveString", void 0);
+  const tsTableColumnBreakpointCellView = TsTableColumnBreakpointCellView.compose({
+      baseName: 'ts-table-column-breakpoint-cell-view',
+      template: template$1,
+      styles
+  });
+  DesignSystem.getOrCreate().withPrefix('ok').register(tsTableColumnBreakpointCellView());
+  const tsTableColumnBreakpointCellViewTag = 'ok-ts-table-column-breakpoint-cell-view';
+
+  const template = html `
+    <template @delegated-event="${(x, c) => x.onDelegatedEvent(c.event)}"
+        >${template$J}</template
+    >
+`;
+
+  /**
+   * A table column that displays a breakpoint indicator with toggle functionality.
+   */
+  class TsTableColumnBreakpoint extends TableColumn {
+      constructor() {
+          super();
+          this.position = MenuButtonPosition.auto;
+          // Breakpoint columns are icon-only and should remain fixed-size and non-resizable.
+          this.columnInternals.resizingDisabled = true;
+          this.columnInternals.pixelWidth = singleIconColumnWidth;
+          this.columnInternals.minPixelWidth = singleIconColumnWidth;
+      }
+      /** @internal */
+      onDelegatedEvent(e) {
+          e.stopImmediatePropagation();
+          const event = e;
+          if (event.detail.originalEvent.type === 'breakpoint-column-toggle') {
+              const originalEvent = event.detail.originalEvent;
+              const detail = {
+                  ...originalEvent.detail,
+                  recordId: event.detail.recordId
+              };
+              this.$emit('breakpoint-column-toggle', detail);
+          }
+          else if (event.detail.originalEvent.type === 'breakpoint-column-state-change-requested') {
+              const originalEvent = event.detail.originalEvent;
+              const detail = {
+                  ...originalEvent.detail,
+                  recordId: event.detail.recordId
+              };
+              this.$emit('breakpoint-column-state-change-requested', detail);
+          }
+      }
+      /**
+       * Programmatically requests a breakpoint state change for a record.
+       */
+      requestBreakpointStateChange(recordId, currentState, requestedState) {
+          const detail = {
+              recordId,
+              currentState,
+              requestedState
+          };
+          this.$emit('breakpoint-column-state-change-requested', detail);
+      }
+      getColumnInternalsOptions() {
+          return {
+              cellRecordFieldNames: ['value'],
+              cellViewTag: tsTableColumnBreakpointCellViewTag,
+              delegatedEvents: ['breakpoint-column-toggle', 'breakpoint-column-state-change-requested'],
+              slotNames: [breakpointCellViewMenuSlotName],
+              validator: new ColumnValidator([])
+          };
+      }
+      fieldNameChanged() {
+          this.columnInternals.dataRecordFieldNames = [this.fieldName];
+          this.columnInternals.operandDataRecordFieldName = this.fieldName;
+      }
+      menuSlotChanged() {
+          this.updateColumnConfig();
+      }
+      positionChanged() {
+          this.updateColumnConfig();
+      }
+      updateColumnConfig() {
+          this.columnInternals.columnConfig = {
+              menuSlot: this.menuSlot,
+              position: this.position
+          };
+      }
+  }
+  __decorate([
+      attr({ attribute: 'field-name' })
+  ], TsTableColumnBreakpoint.prototype, "fieldName", void 0);
+  __decorate([
+      attr({ attribute: 'menu-slot' })
+  ], TsTableColumnBreakpoint.prototype, "menuSlot", void 0);
+  __decorate([
+      attr
+  ], TsTableColumnBreakpoint.prototype, "position", void 0);
+  const tsTableColumnBreakpoint = TsTableColumnBreakpoint.compose({
+      baseName: 'ts-table-column-breakpoint',
+      template,
+      styles: styles$I
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('ok')
+      .register(tsTableColumnBreakpoint());
+
 })();
 //# sourceMappingURL=all-components-bundle.js.map