@ni/ok-components 1.14.0 → 1.15.0

package/dist/all-components-bundle.js

@@ -14982,7 +14982,7 @@
 
   const template$1s = html `<slot></slot>`;
 
-  const styles$1I = css `
+  const styles$1H = css `
     ${display$2('contents')}
 
     :host {
@@ -15109,7 +15109,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$1I,
+      styles: styles$1H,
       template: template$1s
   });
   DesignSystem.getOrCreate()
@@ -16785,7 +16785,7 @@
   }
   // #endregion
 
-  const styles$1H = css `
+  const styles$1G = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -16967,7 +16967,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$1r,
-      styles: styles$1H,
+      styles: styles$1G,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17076,7 +17076,7 @@
     padding: 0;
 `;
 
-  const styles$1G = css `
+  const styles$1F = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17360,8 +17360,8 @@
             }
         `));
 
-  const styles$1F = css `
-    ${styles$1G}
+  const styles$1E = css `
+    ${styles$1F}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17464,7 +17464,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$1q,
-      styles: styles$1F,
+      styles: styles$1E,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17472,7 +17472,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$1E = css `
+  const styles$1D = css `
     ${display$2('grid')}
 
     :host {
@@ -17657,7 +17657,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$1p,
-      styles: styles$1E,
+      styles: styles$1D,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17669,7 +17669,7 @@
 
   // These styles end up inside a @layer block so must use the
   // cssPartial tag instead of the css tag
-  const styles$1D = cssPartial `
+  const styles$1C = cssPartial `
     .severity-text {
         display: none;
         font: ${errorTextFont};
@@ -17779,12 +17779,12 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$1C = css `
+  const styles$1B = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$2('inline-flex')}
-        ${styles$1D}
+        ${styles$1C}
         :host {
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
@@ -18464,8 +18464,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             }
         `));
 
-  const styles$1B = css `
-    ${styles$1C}
+  const styles$1A = css `
+    ${styles$1B}
     ${'' /* Anchor specific styles */}
     @layer base {
         .control {
@@ -19574,7 +19574,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$1A = css `
+  const styles$1z = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19638,7 +19638,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       const composedIcon = iconClass.compose({
           baseName,
           template: template$1o,
-          styles: styles$1A
+          styles: styles$1z
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19910,14 +19910,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const nimbleAnchorStep = AnchorStep.compose({
       baseName: 'anchor-step',
       template: template$1n,
-      styles: styles$1B,
+      styles: styles$1A,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
 
-  const styles$1z = css `
+  const styles$1y = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20087,14 +20087,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
       template: template$1m,
-      styles: styles$1z,
+      styles: styles$1y,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$1y = css `
+  const styles$1x = css `
     ${display$2('flex')}
 
     :host {
@@ -20134,8 +20134,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const styles$1x = css `
-    ${styles$1G}
+  const styles$1w = css `
+    ${styles$1F}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -20231,7 +20231,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       baseName: 'button',
       baseClass: Button$1,
       template: template$1l,
-      styles: styles$1x,
+      styles: styles$1w,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20567,14 +20567,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$1k,
-      styles: styles$1y,
+      styles: styles$1x,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$1w = css `
+  const styles$1v = css `
     ${display$2('block')}
 
     :host {
@@ -20817,7 +20817,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
       template: template$1j,
-      styles: styles$1w,
+      styles: styles$1v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20833,7 +20833,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       zIndex1000: '1000'
   };
 
-  const styles$1v = css `
+  const styles$1u = css `
     ${display$2('block')}
 
     :host {
@@ -20864,14 +20864,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$1v
+      styles: styles$1u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  const styles$1u = css `
+  const styles$1t = css `
     ${display$2('flex')}
 
     :host {
@@ -21157,7 +21157,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$1i,
-      styles: styles$1u
+      styles: styles$1t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
   const bannerTag = 'nimble-banner';
@@ -21199,7 +21199,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     </template>
 `;
 
-  const styles$1t = css `
+  const styles$1s = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21303,11 +21303,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$1t
+      styles: styles$1s
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$1s = css `
+  const styles$1r = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -21404,14 +21404,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$1s,
+      styles: styles$1r,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$1r = css `
+  const styles$1q = css `
     ${display$2('flex')}
 
     :host {
@@ -21451,11 +21451,11 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'card',
       baseClass: Card$1,
       template: template$1h,
-      styles: styles$1r
+      styles: styles$1q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$1q = css `
+  const styles$1p = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21613,7 +21613,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$1q,
+      styles: styles$1p,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21621,7 +21621,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   const cardButtonTag = 'nimble-card-button';
 
-  const styles$1p = css `
+  const styles$1o = css `
     .error-icon {
         display: none;
     }
@@ -21655,9 +21655,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$1o = css `
+  const styles$1n = css `
     ${display$2('inline-grid')}
-    ${styles$1p}
+    ${styles$1o}
 
     :host {
         font: ${bodyFont};
@@ -21895,7 +21895,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: template$1g,
-      styles: styles$1o,
+      styles: styles$1n,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
@@ -21907,7 +21907,7 @@ so this becomes the fallback color for the slot */ ''}
       block: 'block'
   };
 
-  const styles$1n = css `
+  const styles$1m = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -22055,7 +22055,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleChip = Chip.compose({
       baseName: 'chip',
       template: template$1f,
-      styles: styles$1n,
+      styles: styles$1m,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -22063,8 +22063,8 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleChip());
   const chipTag = 'nimble-chip';
 
-  const styles$1m = css `
-    ${styles$1G}
+  const styles$1l = css `
+    ${styles$1F}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -22207,7 +22207,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$1e,
-      styles: styles$1m,
+      styles: styles$1l,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -22237,7 +22237,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$1l = css `
+  const styles$1k = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -22527,7 +22527,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$1k = css `
+  const styles$1j = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -22554,10 +22554,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$1j = css `
-    ${styles$1l}
-    ${styles$1p}
+  const styles$1i = css `
     ${styles$1k}
+    ${styles$1o}
+    ${styles$1j}
 
     :host {
         field-sizing: fixed;
@@ -23461,7 +23461,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
       template: template$1d,
-      styles: styles$1j,
+      styles: styles$1i,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -23505,7 +23505,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$1i = css `
+  const styles$1h = css `
     ${display$2('grid')}
 
     dialog {
@@ -23747,12 +23747,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
       template: template$1c,
-      styles: styles$1i,
+      styles: styles$1h,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$1h = css `
+  const styles$1g = css `
     ${display$2('block')}
 
     :host {
@@ -24038,7 +24038,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$1b,
-      styles: styles$1h
+      styles: styles$1g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -27014,7 +27014,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$1g = css `
+  const styles$1f = css `
     ${display$2('none')}
 `;
 
@@ -27087,7 +27087,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$1g
+      styles: styles$1f
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -27254,13 +27254,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$1g
+      styles: styles$1f
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$1f = css `
+  const styles$1e = css `
     ${display$2('flex')}
 
     :host {
@@ -27439,12 +27439,12 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: template$1a,
-      styles: styles$1f
+      styles: styles$1e
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$1e = css `
+  const styles$1d = css `
     ${display$2('flex')}
 
     :host {
@@ -27649,7 +27649,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'list-option-group',
       baseClass: FoundationElement,
       template: template$19,
-      styles: styles$1e
+      styles: styles$1d
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -27678,7 +27678,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const template$18 = html `<template slot="mapping"></template>`;
 
-  const styles$1d = css `
+  const styles$1c = css `
     ${display$2('none')}
 `;
 
@@ -27695,7 +27695,7 @@ so this becomes the fallback color for the slot */ ''}
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
       template: template$18,
-      styles: styles$1d
+      styles: styles$1c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -27766,7 +27766,7 @@ so this becomes the fallback color for the slot */ ''}
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
       template: template$18,
-      styles: styles$1d
+      styles: styles$1c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -27790,7 +27790,7 @@ so this becomes the fallback color for the slot */ ''}
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
       template: template$18,
-      styles: styles$1d
+      styles: styles$1c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -27807,7 +27807,7 @@ so this becomes the fallback color for the slot */ ''}
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
       template: template$18,
-      styles: styles$1d
+      styles: styles$1c
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -28126,7 +28126,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$1c = css `
+  const styles$1b = css `
     ${display$2('grid')}
 
     :host {
@@ -28198,7 +28198,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu',
       baseClass: Menu$1,
       template: template$17,
-      styles: styles$1c
+      styles: styles$1b
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   const menuTag = 'nimble-menu';
@@ -28215,7 +28215,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$1b = css `
+  const styles$1a = css `
     ${display$2('inline-block')}
 
     :host {
@@ -28484,7 +28484,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$16,
-      styles: styles$1b,
+      styles: styles$1a,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -28492,7 +28492,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$1a = css `
+  const styles$19 = css `
     ${display$2('grid')}
 
     :host {
@@ -28589,7 +28589,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$1a,
+      styles: styles$19,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -28605,10 +28605,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$19 = css `
+  const styles$18 = css `
     ${display$2('inline-block')}
-    ${styles$1p}
-    ${styles$1k}
+    ${styles$1o}
+    ${styles$1j}
 
     :host {
         font: ${bodyFont};
@@ -28994,7 +28994,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: template$15,
-      styles: styles$19,
+      styles: styles$18,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -29037,7 +29037,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$18 = css `
+  const styles$17 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -29137,15 +29137,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$18,
+      styles: styles$17,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$17 = css `
+  const styles$16 = css `
     ${display$2('inline-block')}
-    ${styles$1p}
-    ${styles$1k}
+    ${styles$1o}
+    ${styles$1j}
 
     .positioning-region {
         display: flex;
@@ -29225,7 +29225,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: template$14,
-      styles: styles$17,
+      styles: styles$16,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -50156,7 +50156,7 @@ img.ProseMirror-separator {
   //#region src/index.ts
   var src_default$7 = HardBreak;
 
-  const styles$16 = css `
+  const styles$15 = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -50193,7 +50193,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$16
+      styles: styles$15
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -50222,8 +50222,8 @@ img.ProseMirror-separator {
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$15 = css `
-    ${styles$1l}
+  const styles$14 = css `
+    ${styles$1k}
 
     :host {
         height: auto;
@@ -50530,7 +50530,7 @@ img.ProseMirror-separator {
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
       template: template$13,
-      styles: styles$15
+      styles: styles$14
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -50639,9 +50639,9 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$14 = css `
+  const styles$13 = css `
     ${display$2('inline-flex')}
-    ${styles$1p}
+    ${styles$1o}
 
     :host {
         font: ${bodyFont};
@@ -69513,7 +69513,7 @@ img.ProseMirror-separator {
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
       template: template$12,
-      styles: styles$14,
+      styles: styles$13,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -69528,7 +69528,7 @@ img.ProseMirror-separator {
     </template>
 `;
 
-  const styles$13 = css `
+  const styles$12 = css `
     ${display$2('flex')}
 
     :host {
@@ -69642,16 +69642,16 @@ img.ProseMirror-separator {
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
       template: template$11,
-      styles: styles$13
+      styles: styles$12
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$12 = css `
-    ${styles$1l}
-    ${styles$1p}
+  const styles$11 = css `
     ${styles$1k}
+    ${styles$1o}
+    ${styles$1j}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -69814,7 +69814,7 @@ img.ProseMirror-separator {
             }
         `));
 
-  const styles$11 = css `
+  const styles$10 = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -70032,7 +70032,7 @@ img.ProseMirror-separator {
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
       template: template$10,
-      styles: styles$11
+      styles: styles$10
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -71261,7 +71261,7 @@ img.ProseMirror-separator {
       baseName: 'select',
       baseClass: Select$2,
       template: template$$,
-      styles: styles$12,
+      styles: styles$11,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -71274,8 +71274,8 @@ img.ProseMirror-separator {
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$10 = css `
-    ${styles$1C}
+  const styles$$ = css `
+    ${styles$1B}
     ${'' /* Button specific styles */}
     @layer base {
         .control {
@@ -71409,14 +71409,14 @@ img.ProseMirror-separator {
   const nimbleStep = Step.compose({
       baseName: 'step',
       template: template$_,
-      styles: styles$10,
+      styles: styles$$,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
 
-  const styles$$ = css `
+  const styles$_ = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -71633,11 +71633,11 @@ img.ProseMirror-separator {
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
       template: template$Z,
-      styles: styles$$
+      styles: styles$_
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
 
-  const styles$_ = css `
+  const styles$Z = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -71912,11 +71912,11 @@ img.ProseMirror-separator {
       baseClass: Switch$1,
       baseName: 'switch',
       template: template$Y,
-      styles: styles$_
+      styles: styles$Z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$Z = css `
+  const styles$Y = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -72027,11 +72027,11 @@ img.ProseMirror-separator {
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$Z
+      styles: styles$Y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$Y = css `
+  const styles$X = css `
     ${display$2('block')}
 
     :host {
@@ -72050,7 +72050,7 @@ img.ProseMirror-separator {
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$Y
+      styles: styles$X
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -75793,7 +75793,7 @@ img.ProseMirror-separator {
       }
   }
 
-  const styles$X = css `
+  const styles$W = css `
     ${display$2('flex')}
 
     :host {
@@ -76031,7 +76031,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$W = css `
+  const styles$V = css `
     ${display$2('flex')}
 
     :host {
@@ -76151,12 +76151,12 @@ focus outline in that case.
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
       template: template$X,
-      styles: styles$W
+      styles: styles$V
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$V = css `
+  const styles$U = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -76181,9 +76181,9 @@ focus outline in that case.
     }
 `;
 
-  const styles$U = css `
+  const styles$T = css `
     ${display$2('flex')}
-    ${styles$V}
+    ${styles$U}
 
     :host {
         width: fit-content;
@@ -76429,7 +76429,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$T = css `
+  const styles$S = css `
     ${display$2('flex')}
 
     :host {
@@ -76572,7 +76572,7 @@ focus outline in that case.
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
       template: template$W,
-      styles: styles$T
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
@@ -76985,14 +76985,14 @@ focus outline in that case.
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
       template: template$V,
-      styles: styles$U
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$S = css `
+  const styles$R = css `
     ${display$2('grid')}
-    ${styles$V}
+    ${styles$U}
 
     :host {
         align-items: center;
@@ -77342,7 +77342,7 @@ focus outline in that case.
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
       template: template$U,
-      styles: styles$S
+      styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
@@ -82736,11 +82736,11 @@ focus outline in that case.
   const nimbleTable = Table$1.compose({
       baseName: 'table',
       template: template$T,
-      styles: styles$X
+      styles: styles$W
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$R = css `
+  const styles$Q = css `
     ${display$2('contents')}
 
     .header-content {
@@ -82817,7 +82817,7 @@ focus outline in that case.
       return ColumnWithPlaceholder;
   }
 
-  const styles$Q = css `
+  const styles$P = css `
     ${display$2('flex')}
 
     :host {
@@ -82941,7 +82941,7 @@ focus outline in that case.
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
       template: template$R,
-      styles: styles$Q
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -83027,7 +83027,7 @@ focus outline in that case.
     </span>
 `;
 
-  const styles$P = css `
+  const styles$O = css `
     ${display$2('flex')}
 
     span {
@@ -83052,7 +83052,7 @@ focus outline in that case.
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
       template: template$Q,
-      styles: styles$P
+      styles: styles$O
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -83297,7 +83297,7 @@ focus outline in that case.
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
       template: template$S,
-      styles: styles$R
+      styles: styles$Q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -83336,7 +83336,7 @@ focus outline in that case.
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
       template: template$Q,
-      styles: styles$P
+      styles: styles$O
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -83359,7 +83359,7 @@ focus outline in that case.
     </template>
 `;
 
-  const styles$O = css `
+  const styles$N = css `
     ${display$2('flex')}
 
     :host {
@@ -83462,7 +83462,7 @@ focus outline in that case.
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
       template: template$P,
-      styles: styles$O
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -83797,7 +83797,7 @@ focus outline in that case.
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
       template: template$S,
-      styles: styles$R
+      styles: styles$Q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -83814,7 +83814,7 @@ focus outline in that case.
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
       template: template$P,
-      styles: styles$O
+      styles: styles$N
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -83916,7 +83916,7 @@ focus outline in that case.
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
       template: template$Q,
-      styles: styles$P
+      styles: styles$O
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -83969,7 +83969,7 @@ focus outline in that case.
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
       template: template$S,
-      styles: styles$R
+      styles: styles$Q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -84077,8 +84077,8 @@ focus outline in that case.
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$N = css `
-    ${styles$R}
+  const styles$M = css `
+    ${styles$Q}
 
     slot[name='mapping'] {
         display: none;
@@ -84188,7 +84188,7 @@ focus outline in that case.
       }
   }
 
-  const styles$M = css `
+  const styles$L = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -84357,14 +84357,14 @@ focus outline in that case.
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
       template: template$N,
-      styles: styles$M
+      styles: styles$L
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$L = css `
+  const styles$K = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -84476,7 +84476,7 @@ focus outline in that case.
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
       template: template$M,
-      styles: styles$L
+      styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -84560,7 +84560,7 @@ focus outline in that case.
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
       template: template$O,
-      styles: styles$N
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -84594,7 +84594,7 @@ focus outline in that case.
     `)}
 `;
 
-  const styles$K = css `
+  const styles$J = css `
     :host {
         align-self: center;
         width: 100%;
@@ -84670,7 +84670,7 @@ focus outline in that case.
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
       template: template$K,
-      styles: styles$K
+      styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
   const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
@@ -84726,7 +84726,7 @@ focus outline in that case.
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
       template: template$L,
-      styles: styles$R
+      styles: styles$Q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -84754,7 +84754,7 @@ focus outline in that case.
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
       template: template$Q,
-      styles: styles$P
+      styles: styles$O
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -84776,7 +84776,7 @@ focus outline in that case.
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
       template: template$P,
-      styles: styles$O
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -85317,7 +85317,7 @@ focus outline in that case.
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
       template: template$J,
-      styles: styles$R
+      styles: styles$Q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -85336,7 +85336,7 @@ focus outline in that case.
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
       template: template$P,
-      styles: styles$O
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -85391,14 +85391,14 @@ focus outline in that case.
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
       template: template$S,
-      styles: styles$R
+      styles: styles$Q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$J = css `
-    ${styles$1y}
+  const styles$I = css `
+    ${styles$1x}
 
     .tabpanel {
         overflow: auto;
@@ -85480,11 +85480,11 @@ focus outline in that case.
       baseName: 'tabs',
       baseClass: Tabs$1,
       template: template$1k,
-      styles: styles$J
+      styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$I = css `
+  const styles$H = css `
     ${display$2('flex')}
 
     :host {
@@ -85549,7 +85549,7 @@ focus outline in that case.
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
       template: template$I,
-      styles: styles$I
+      styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
   applyMixins(TabsToolbar, StartEnd);
@@ -85559,10 +85559,10 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$H = css `
+  const styles$G = css `
     ${display$2('inline-flex')}
-    ${styles$1p}
-    ${styles$1k}
+    ${styles$1o}
+    ${styles$1j}
 
     :host {
         font: ${bodyFont};
@@ -85906,7 +85906,7 @@ focus outline in that case.
       baseName: 'text-area',
       baseClass: TextArea$1,
       template: template$H,
-      styles: styles$H,
+      styles: styles$G,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -85923,10 +85923,10 @@ focus outline in that case.
       frameless: 'frameless'
   };
 
-  const styles$G = css `
+  const styles$F = css `
     ${display$2('inline-block')}
-    ${styles$1p}
-    ${styles$1k}
+    ${styles$1o}
+    ${styles$1j}
 
     :host {
         font: ${bodyFont};
@@ -86293,7 +86293,7 @@ focus outline in that case.
       baseName: 'text-field',
       baseClass: TextField$1,
       template: template$G,
-      styles: styles$G,
+      styles: styles$F,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -86310,7 +86310,7 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$F = css `
+  const styles$E = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -86449,7 +86449,7 @@ focus outline in that case.
       baseName: 'tooltip',
       baseClass: Tooltip$1,
       template: template$F,
-      styles: styles$F
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
   const tooltipTag = 'nimble-tooltip';
@@ -86538,7 +86538,7 @@ focus outline in that case.
       }
   }
 
-  const styles$E = css `
+  const styles$D = css `
     ${display$2('block')}
 
     :host {
@@ -86755,12 +86755,12 @@ focus outline in that case.
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$E,
+      styles: styles$D,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$D = css `
+  const styles$C = css `
     ${display$2('flex')}
 
     :host {
@@ -86871,7 +86871,7 @@ focus outline in that case.
       baseName: 'tree-view',
       baseClass: TreeView$1,
       template: template$E,
-      styles: styles$D
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -86989,7 +86989,7 @@ focus outline in that case.
 
   const template$D = html `<template slot="unit"></template>`;
 
-  const styles$C = css `
+  const styles$B = css `
     ${display$2('none')}
 `;
 
@@ -87018,7 +87018,7 @@ focus outline in that case.
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
       template: template$D,
-      styles: styles$C
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -87071,7 +87071,7 @@ focus outline in that case.
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
       template: template$D,
-      styles: styles$C
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -102148,7 +102148,7 @@ focus outline in that case.
     </div>
 `;
 
-  const styles$B = css `
+  const styles$A = css `
     ${display$2('inline-block')}
 
     :host {
@@ -105174,7 +105174,7 @@ focus outline in that case.
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
       template: template$C,
-      styles: styles$B
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
@@ -105186,7 +105186,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$A = css `
+  const styles$z = css `
     ${display$1('flex')}
 
     :host {
@@ -105677,15 +105677,15 @@ focus outline in that case.
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
       template: template$B,
-      styles: styles$A
+      styles: styles$z
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightChatConversation());
 
-  const styles$z = css `
+  const styles$y = css `
     ${display$1('flex')}
-    ${styles$1p}
+    ${styles$1o}
 
     :host {
         width: 100%;
@@ -106090,7 +106090,7 @@ focus outline in that case.
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
       template: template$A,
-      styles: styles$z,
+      styles: styles$y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -106108,7 +106108,7 @@ focus outline in that case.
       inbound: 'inbound'
   };
 
-  const styles$y = css `
+  const styles$x = css `
     ${display$1('flex')}
 
     :host {
@@ -106232,11 +106232,11 @@ focus outline in that case.
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
       template: template$z,
-      styles: styles$y
+      styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
 
-  const styles$x = css `
+  const styles$w = css `
     ${display$1('flex')}
 
     :host {
@@ -106339,11 +106339,11 @@ focus outline in that case.
   const sprightChatMessageInbound = ChatMessageInbound.compose({
       baseName: 'chat-message-inbound',
       template: template$y,
-      styles: styles$x
+      styles: styles$w
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
 
-  const styles$w = css `
+  const styles$v = css `
     ${display$1('flex')}
 
     :host {
@@ -106401,11 +106401,11 @@ focus outline in that case.
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
       template: template$x,
-      styles: styles$w
+      styles: styles$v
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
 
-  const styles$v = css `
+  const styles$u = css `
     ${display$1('flex')}
 
     :host {
@@ -106457,11 +106457,11 @@ focus outline in that case.
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',
       template: template$w,
-      styles: styles$v
+      styles: styles$u
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
 
-  const styles$u = css `
+  const styles$t = css `
     ${display$1('flex')}
 
     :host {
@@ -106577,8 +106577,8 @@ focus outline in that case.
     <div class="icon dark-icon" aria-hidden="true" :innerHTML="${() => nigelChatDarkData}"></div>
 `;
 
-  const styles$t = css `
-    ${styles$1A}
+  const styles$s = css `
+    ${styles$1z}
 
     .dark-icon {
         display: none;
@@ -106602,7 +106602,7 @@ focus outline in that case.
   const sprightIconNigelChat = IconNigelChat.compose({
       baseName: 'icon-nigel-chat',
       template: template$v,
-      styles: styles$t
+      styles: styles$s
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -106656,7 +106656,7 @@ focus outline in that case.
   const sprightChatMessageWelcome = ChatMessageWelcome.compose({
       baseName: 'chat-message-welcome',
       template: template$u,
-      styles: styles$u
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());
 
@@ -106683,7 +106683,7 @@ focus outline in that case.
   const sprightIconBreakpointConditional = IconBreakpointConditional.compose({
       baseName: 'icon-breakpoint-conditional',
       template: template$t,
-      styles: styles$1A
+      styles: styles$1z
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -106714,7 +106714,7 @@ focus outline in that case.
   const sprightIconBreakpointDisabled = IconBreakpointDisabled.compose({
       baseName: 'icon-breakpoint-disabled',
       template: template$s,
-      styles: styles$1A
+      styles: styles$1z
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -106744,7 +106744,7 @@ focus outline in that case.
   const sprightIconBreakpointEnabled = IconBreakpointEnabled.compose({
       baseName: 'icon-breakpoint-enabled',
       template: template$r,
-      styles: styles$1A
+      styles: styles$1z
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -106774,7 +106774,7 @@ focus outline in that case.
   const sprightIconBreakpointExecutionPointer = IconBreakpointExecutionPointer.compose({
       baseName: 'icon-breakpoint-execution-pointer',
       template: template$q,
-      styles: styles$1A
+      styles: styles$1z
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -106808,7 +106808,7 @@ focus outline in that case.
   const sprightIconBreakpointHitDisabled = IconBreakpointHitDisabled.compose({
       baseName: 'icon-breakpoint-hit-disabled',
       template: template$p,
-      styles: styles$1A
+      styles: styles$1z
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -106843,7 +106843,7 @@ focus outline in that case.
   const sprightIconBreakpointHit = IconBreakpointHit.compose({
       baseName: 'icon-breakpoint-hit',
       template: template$o,
-      styles: styles$1A
+      styles: styles$1z
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -106874,15 +106874,15 @@ focus outline in that case.
   const sprightIconBreakpointHover = IconBreakpointHover.compose({
       baseName: 'icon-breakpoint-hover',
       template: template$n,
-      styles: styles$1A
+      styles: styles$1z
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointHover());
   const iconBreakpointHoverTag = 'spright-icon-breakpoint-hover';
 
-  const styles$s = css `
-    ${styles$1A}
+  const styles$r = css `
+    ${styles$1z}
 
     .icon svg {
         fill: ${calendarEventBorderReservationColor};
@@ -106900,14 +106900,14 @@ focus outline in that case.
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
       template: template$1o,
-      styles: styles$s
+      styles: styles$r
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalendarWeek());
 
-  const styles$r = css `
-    ${styles$1A}
+  const styles$q = css `
+    ${styles$1z}
 
     .icon svg {
         fill: ${calendarEventBorderCalibrationColor};
@@ -106925,14 +106925,14 @@ focus outline in that case.
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
       template: template$1o,
-      styles: styles$r
+      styles: styles$q
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalipers());
 
-  const styles$q = css `
-    ${styles$1A}
+  const styles$p = css `
+    ${styles$1z}
 
     .icon svg {
         fill: ${calendarEventBorderTransportOrderColor};
@@ -106950,14 +106950,14 @@ focus outline in that case.
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
       template: template$1o,
-      styles: styles$q
+      styles: styles$p
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemForklift());
 
-  const styles$p = css `
-    ${styles$1A}
+  const styles$o = css `
+    ${styles$1z}
 
     .icon svg {
         fill: ${calendarEventBorderStaticColor};
@@ -106975,14 +106975,14 @@ focus outline in that case.
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
       template: template$1o,
-      styles: styles$p
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemRectangleCheckLines());
 
-  const styles$o = css `
-    ${styles$1A}
+  const styles$n = css `
+    ${styles$1z}
 
     .icon svg {
         fill: ${calendarEventBorderWorkOrderColor};
@@ -107000,14 +107000,14 @@ focus outline in that case.
   const sprightIconWorkItemSquareListCog = IconWorkItemSquareListCog.compose({
       baseName: 'icon-work-item-square-list-cog',
       template: template$1o,
-      styles: styles$o
+      styles: styles$n
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemSquareListCog());
 
-  const styles$n = css `
-    ${styles$1A}
+  const styles$m = css `
+    ${styles$1z}
 
     .icon svg {
         fill: ${calendarEventBorderJobColor};
@@ -107025,14 +107025,14 @@ focus outline in that case.
   const sprightIconWorkItemUserHelmetSafety = IconWorkItemUserHelmetSafety.compose({
       baseName: 'icon-work-item-user-helmet-safety',
       template: template$1o,
-      styles: styles$n
+      styles: styles$m
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemUserHelmetSafety());
 
-  const styles$m = css `
-    ${styles$1A}
+  const styles$l = css `
+    ${styles$1z}
 
     .icon svg {
         fill: ${calendarEventBorderMaintenanceColor};
@@ -107050,7 +107050,7 @@ focus outline in that case.
   const sprightIconWorkItemWrenchHammer = IconWorkItemWrenchHammer.compose({
       baseName: 'icon-work-item-wrench-hammer',
       template: template$1o,
-      styles: styles$m
+      styles: styles$l
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -107077,13 +107077,13 @@ focus outline in that case.
   ], LabelProviderChat.prototype, "stop", void 0);
   const sprightLabelProviderChat = LabelProviderChat.compose({
       baseName: 'label-provider-chat',
-      styles: styles$1g
+      styles: styles$1f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightLabelProviderChat());
 
-  const styles$l = css `
+  const styles$k = css `
     ${display$1('inline-block')}
 
     :host {
@@ -107118,7 +107118,7 @@ focus outline in that case.
   const sprightRectangle = Rectangle.compose({
       baseName: 'rectangle',
       template: template$m,
-      styles: styles$l
+      styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightRectangle());
 
@@ -107145,7 +107145,7 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$k = css `
+  const styles$j = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -107303,7 +107303,7 @@ focus outline in that case.
   const okFvAccordionItem = FvAccordionItem.compose({
       baseName: 'fv-accordion-item',
       template: template$l,
-      styles: styles$k
+      styles: styles$j
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')
@@ -107318,7 +107318,7 @@ focus outline in that case.
       card: 'card'
   };
 
-  const styles$j = css `
+  const styles$i = css `
     ${display('block')}
 
     :host {
@@ -107818,13 +107818,13 @@ focus outline in that case.
   const okFvCard = FvCard.compose({
       baseName: 'fv-card',
       template: template$k,
-      styles: styles$j
+      styles: styles$i
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')
       .register(okFvCard());
 
-  const styles$i = css `
+  const styles$h = css `
     ${display('block')}
 
     :host {
@@ -108051,11 +108051,11 @@ focus outline in that case.
   const okFvBulkEditField = FvBulkEditField.compose({
       baseName: 'fv-bulk-edit-field',
       template: template$j,
-      styles: styles$i
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvBulkEditField());
 
-  const styles$h = css `
+  const styles$g = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -108794,11 +108794,11 @@ focus outline in that case.
   const okFvChipSelector = FvChipSelector.compose({
       baseName: 'fv-chip-selector',
       template: template$i,
-      styles: styles$h
+      styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvChipSelector());
 
-  const styles$g = css `
+  const styles$f = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -108899,11 +108899,11 @@ focus outline in that case.
   const okFvContextHelp = FvContextHelp.compose({
       baseName: 'fv-context-help',
       template: template$h,
-      styles: styles$g
+      styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvContextHelp());
 
-  const styles$f = css `
+  const styles$e = css `
     ${display('block')}
 
     :host {
@@ -109087,11 +109087,11 @@ focus outline in that case.
   const okFvEditCommitBar = FvEditCommitBar.compose({
       baseName: 'fv-edit-commit-bar',
       template: template$g,
-      styles: styles$f
+      styles: styles$e
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvEditCommitBar());
 
-  const styles$e = css `
+  const styles$d = css `
     @layer base, hover, focusVisible, disabled, top;
 
     @layer base {
@@ -109348,11 +109348,11 @@ focus outline in that case.
   const okFvFilterBar = FvFilterBar.compose({
       baseName: 'fv-filter-bar',
       template: template$f,
-      styles: styles$e
+      styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvFilterBar());
 
-  const styles$d = css `
+  const styles$c = css `
     @layer base, hover, selected;
 
     @layer base {
@@ -109551,12 +109551,12 @@ focus outline in that case.
   const okFvMasterDetailListItem = FvMasterDetailListItem.compose({
       baseName: 'fv-master-detail-list-item',
       template: template$e,
-      styles: styles$d
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailListItem());
   const fvMasterDetailListItemTag = 'ok-fv-master-detail-list-item';
 
-  const styles$c = css `
+  const styles$b = css `
     @layer base, hover, focusVisible;
 
     @layer base {
@@ -109816,14 +109816,14 @@ focus outline in that case.
   const okFvMasterDetailList = FvMasterDetailList.compose({
       baseName: 'fv-master-detail-list',
       template: template$d,
-      styles: styles$c,
+      styles: styles$b,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvMasterDetailList());
 
-  const styles$b = css `
+  const styles$a = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -109931,9 +109931,32 @@ focus outline in that case.
         }
 
         .split-button-primary {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             padding: 0 ${standardPadding};
             padding-inline-end: ${mediumPadding};
             white-space: nowrap;
+            text-decoration: none;
+        }
+
+        slot[name='start']::slotted(*),
+        slot[name='end']::slotted(*) {
+            flex-shrink: 0;
+            color: currentColor;
+            ${iconColor.cssCustomProperty}: currentColor;
+        }
+
+        slot[name='start']::slotted(*) {
+            margin-inline-end: ${smallPadding};
+        }
+
+        slot[name='end']::slotted(*) {
+            margin-inline-start: ${smallPadding};
+        }
+
+        .split-button-primary-disabled {
+            cursor: default;
         }
 
         .split-button-toggle {
@@ -109967,21 +109990,21 @@ focus outline in that case.
     }
 
     @layer hover {
-        .split-button-primary:enabled:hover,
+        .split-button-primary:is(:enabled, [href]):hover,
         .split-button-toggle:enabled:hover {
             border-color: ${borderHoverColor};
             box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
             z-index: 1;
         }
 
-        .split-button-primary:enabled:hover + .split-button-toggle::after,
+        .split-button-primary:is(:enabled, [href]):hover + .split-button-toggle::after,
         .split-button-toggle:enabled:hover::after {
             visibility: hidden;
         }
     }
 
     @layer focusVisible {
-        .split-button-primary:enabled:focus-visible,
+        .split-button-primary:is(:enabled, [href]):focus-visible,
         .split-button-toggle:enabled:focus-visible {
             border-color: ${borderHoverColor};
             box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
@@ -110000,7 +110023,7 @@ focus outline in that case.
     }
 
     @layer active {
-        .split-button-primary:enabled:active,
+        .split-button-primary:is(:enabled, [href]):active,
         .split-button-toggle:enabled:active,
         :host([open]) .split-button-toggle {
             border-color: ${borderHoverColor};
@@ -110018,7 +110041,7 @@ focus outline in that case.
             visibility: hidden;
         }
 
-        :host([appearance='block']) .split-button-primary:enabled:active,
+        :host([appearance='block']) .split-button-primary:is(:enabled, [href]):active,
         :host([appearance='block']) .split-button-toggle:enabled:active,
         :host([appearance='block'][open]) .split-button-toggle {
             background-color: ${applicationBackgroundColor};
@@ -110036,6 +110059,14 @@ focus outline in that case.
             --ni-private-ok-fv-split-button-color: ${buttonLabelDisabledFontColor};
         }
 
+        :host([disabled][appearance='block']) {
+            --ni-private-ok-fv-split-button-background-image: linear-gradient(
+                rgba(${borderRgbPartialColor}, 0.1),
+                rgba(${borderRgbPartialColor}, 0.1)
+            );
+            --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.1);
+        }
+
         :host([disabled][appearance='outline']) {
             --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.3);
         }
@@ -110044,6 +110075,15 @@ focus outline in that case.
         :host([disabled]) .split-button-toggle {
             cursor: default;
             box-shadow: none;
+            background-image: none;
+            background-size: 100% 100%;
+        }
+
+        :host([disabled]) slot[name='start']::slotted(*),
+        :host([disabled]) slot[name='end']::slotted(*),
+        :host([disabled]) .split-button-toggle > * {
+            opacity: 0.3;
+            ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
         }
 
         :host([disabled][appearance='ghost']) .split-button-primary,
@@ -110068,7 +110108,9 @@ focus outline in that case.
     return true;
 }}"
         >
-            ${x => x.label}
+            <slot name="start"></slot>
+            <span>${x => x.label}</span>
+            <slot name="end"></slot>
         </button>
         <button
             class="split-button-toggle"
@@ -110228,239 +110270,18 @@ focus outline in that case.
   const okFvSplitButton = FvSplitButton.compose({
       baseName: 'fv-split-button',
       template: template$c,
-      styles: styles$b
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButton());
 
-  const styles$a = css `
-    @layer base, hover, focusVisible, active, disabled, top;
-
-    @layer base {
-        ${display('inline-block')}
-
-        :host {
-            --ni-private-ok-fv-split-button-anchor-background-image: none;
-            --ni-private-ok-fv-split-button-anchor-background-size: 100% 100%;
-            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: 100% 100%;
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${actionRgbPartialColor}, 0.3);
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelFontColor};
-            position: relative;
-            height: ${controlHeight};
-            vertical-align: middle;
-        }
-
-        :host([appearance='ghost']) {
-            --ni-private-ok-fv-split-button-anchor-border: transparent;
-        }
-
-        :host([appearance='block']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                rgba(${borderRgbPartialColor}, 0.1),
-                rgba(${borderRgbPartialColor}, 0.1)
-            );
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.1);
-            --ni-private-ok-fv-split-button-anchor-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);
-        }
-
-        :host([appearance='outline'][appearance-variant='primary']) {
-            --ni-private-ok-fv-split-button-anchor-border: rgb(${actionRgbPartialColor});
-        }
-
-        :host([appearance='outline'][appearance-variant='accent']) {
-            --ni-private-ok-fv-split-button-anchor-border: ${buttonBorderAccentOutlineColor};
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentOutlineFontColor};
-        }
-
-        :host([appearance='block'][appearance-variant='primary']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                ${buttonFillPrimaryColor},
-                ${buttonFillPrimaryColor}
-            );
-            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillPrimaryColor};
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonPrimaryFontColor};
-        }
-
-        :host([appearance='block'][appearance-variant='accent']) {
-            --ni-private-ok-fv-split-button-anchor-background-image: linear-gradient(
-                ${buttonFillAccentColor},
-                ${buttonFillAccentColor}
-            );
-            --ni-private-ok-fv-split-button-anchor-border: ${buttonFillAccentColor};
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonAccentBlockFontColor};
-        }
-
-        .split-button-container {
-            position: relative;
-            display: inline-flex;
-            align-items: stretch;
-            height: 100%;
-        }
-
-        .split-button-primary,
-        .split-button-toggle {
-            appearance: none;
-            position: relative;
-            z-index: 0;
-            height: 100%;
-            box-sizing: border-box;
-            margin: 0;
-            border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-anchor-border);
-            background-color: transparent;
-            background-image: var(--ni-private-ok-fv-split-button-anchor-background-image);
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size);
-            color: var(--ni-private-ok-fv-split-button-anchor-color);
-            fill: currentcolor;
-            font: ${buttonLabelFont};
-            cursor: pointer;
-            outline: none;
-            transition:
-                box-shadow ${smallDelay} ease-in-out,
-                border-color ${smallDelay} ease-in-out,
-                background-size ${smallDelay} ease-in-out;
-        }
-
-        .split-button-primary {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0 ${standardPadding};
-            border-inline-end-color: transparent;
-            white-space: nowrap;
-            text-decoration: none;
-        }
-
-        .split-button-primary::before,
-        .split-button-toggle::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            pointer-events: none;
-            outline: 0px solid transparent;
-            outline-offset: -3px;
-            transition: outline ${smallDelay} ease-in-out;
-        }
-
-        .split-button-toggle {
-            width: ${controlHeight};
-            min-width: ${controlHeight};
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            border-inline-start-color: var(--ni-private-ok-fv-split-button-anchor-border);
-            margin-inline-start: calc(-1 * ${borderWidth});
-        }
-
-        .split-button-toggle > * {
-            color: currentColor;
-            ${iconColor.cssCustomProperty}: currentColor;
-        }
-
-        .split-button-primary-disabled {
-            cursor: default;
-        }
-
-        :host([appearance='ghost']) .split-button-primary,
-        :host([appearance='ghost']) .split-button-toggle {
-            border-color: transparent;
-            box-shadow: none;
-        }
-
-        slot[name='menu']::slotted(*) {
-            min-width: 100%;
-            margin: 4px 0 0;
-        }
-    }
-
-    @layer hover {
-        .split-button-primary:hover,
-        .split-button-toggle:hover {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);
-            z-index: 1;
-        }
-
-        :host([appearance='ghost']) .split-button-primary:hover,
-        :host([appearance='ghost']) .split-button-toggle:hover {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-        }
-    }
-
-    @layer focusVisible {
-        .split-button-primary:focus-visible,
-        .split-button-toggle:focus-visible {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-            background-size: var(--ni-private-ok-fv-split-button-anchor-background-size-emphasis);
-            z-index: 1;
-        }
-
-        .split-button-primary:focus-visible::before,
-        .split-button-toggle:focus-visible::before {
-            outline: ${borderWidth} solid ${borderHoverColor};
-        }
-
-        :host([appearance='ghost']) .split-button-primary:focus-visible,
-        :host([appearance='ghost']) .split-button-toggle:focus-visible {
-            border-color: ${borderHoverColor};
-            box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
-        }
-    }
-
-    @layer active {
-        .split-button-primary:active,
-        .split-button-toggle:active,
-        :host([open]) .split-button-toggle {
-            border-color: ${borderHoverColor};
-            box-shadow: none;
-            background-image: linear-gradient(${fillSelectedColor}, ${fillSelectedColor});
-            background-size: calc(100% - 2px) calc(100% - 2px);
-        }
-
-        :host([appearance='block']) .split-button-primary:active,
-        :host([appearance='block']) .split-button-toggle:active,
-        :host([appearance='block'][open]) .split-button-toggle {
-            background-size: calc(100% - 4px) calc(100% - 4px);
-        }
-
-        :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,
-        :host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,
-        :host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {
-            color: ${buttonAccentOutlineFontColor};
-        }
-    }
-
-    @layer disabled {
-        :host([disabled]) {
-            --ni-private-ok-fv-split-button-anchor-color: ${buttonLabelDisabledFontColor};
-        }
-
-        :host([disabled][appearance='outline']) {
-            --ni-private-ok-fv-split-button-anchor-border: rgba(${borderRgbPartialColor}, 0.3);
-        }
-
-        :host([disabled]) .split-button-primary,
-        :host([disabled]) .split-button-toggle {
-            cursor: default;
-            box-shadow: none;
-        }
-
-        :host([disabled][appearance='ghost']) .split-button-primary,
-        :host([disabled][appearance='ghost']) .split-button-toggle {
-            border-color: transparent;
-        }
-    }
-
-    @layer top {}
+  const primaryContent = html `
+    <slot name="start"></slot>
+    <span>${x => x.label}</span>
+    <slot name="end"></slot>
 `;
-
   const template$b = html `
     <div
         class="split-button-container"
-        ${ref('splitButtonContainer')}
     >
         ${when(x => !x.disabled && x.href.length > 0, html `
                 <a
@@ -110474,7 +110295,7 @@ focus outline in that case.
     return true;
 }}"
                 >
-                    ${x => x.label}
+                    ${primaryContent}
                 </a>
             `)}
         ${when(x => x.disabled || x.href.length === 0, html `
@@ -110482,11 +110303,12 @@ focus outline in that case.
                     class="split-button-primary split-button-primary-disabled"
                     aria-disabled="${x => x.disabled}"
                 >
-                    ${x => x.label}
+                    ${primaryContent}
                 </span>
             `)}
         <button
             class="split-button-toggle"
+            ${ref('toggleButton')}
             type="button"
             ?disabled="${x => x.disabled}"
             aria-label="${x => `More actions for ${x.label}`}"
@@ -110506,9 +110328,9 @@ focus outline in that case.
                 auto-update-mode="auto"
                 horizontal-inset
                 horizontal-positioning-mode="dynamic"
+                horizontal-default-position="end"
                 vertical-positioning-mode="locktodefault"
                 vertical-default-position="bottom"
-                horizontal-scaling="anchor"
                 ${ref('region')}
             >
                 <span part="menu">
@@ -110600,14 +110422,14 @@ focus outline in that case.
               prev.removeEventListener('change', this.menuChangeHandler);
           }
           if (this.region) {
-              this.region.anchorElement = this.splitButtonContainer ?? this;
+              this.region.anchorElement = this.toggleButton ?? this;
               this.region.addEventListener('change', this.menuChangeHandler, { capture: true });
           }
       }
       /** @internal */
-      splitButtonContainerChanged() {
+      toggleButtonChanged() {
           if (this.region) {
-              this.region.anchorElement = this.splitButtonContainer ?? this;
+              this.region.anchorElement = this.toggleButton ?? this;
           }
       }
       setOpen(nextOpen) {
@@ -110651,7 +110473,7 @@ focus outline in that case.
   ], FvSplitButtonAnchor.prototype, "appearanceVariant", void 0);
   __decorate([
       observable
-  ], FvSplitButtonAnchor.prototype, "splitButtonContainer", void 0);
+  ], FvSplitButtonAnchor.prototype, "toggleButton", void 0);
   __decorate([
       observable
   ], FvSplitButtonAnchor.prototype, "region", void 0);
@@ -112072,7 +111894,7 @@ focus outline in that case.
   DesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitLayout());
 
   const styles$3 = css `
-    ${styles$16}
+    ${styles$15}
 
     :host {
         display: block;
@@ -113022,7 +112844,7 @@ focus outline in that case.
   const tsTableColumnBreakpoint = TsTableColumnBreakpoint.compose({
       baseName: 'ts-table-column-breakpoint',
       template,
-      styles: styles$R
+      styles: styles$Q
   });
   DesignSystem.getOrCreate()
       .withPrefix('ok')