@ni/spright-components 6.19.1 → 6.20.0

package/dist/all-components-bundle.js

@@ -14893,6 +14893,7 @@
       calendarEventBackgroundTransportOrderColor: 'calendar-event-background-transport-order-color',
       calendarEventBackgroundHoverTransportOrderColor: 'calendar-event-background-hover-transport-order-color',
       calendarEventBorderTransportOrderColor: 'calendar-event-border-transport-order-color',
+      calendarEventBorderWorkOrderColor: 'calendar-event-border-work-order-color',
       calendarEventBackgroundAggregateAvailabilityColor: 'calendar-event-background-aggregate-availability-color',
       calendarEventBorderAggregateAvailabilityColor: 'calendar-event-border-aggregate-availability-color'
   };
@@ -14901,7 +14902,7 @@
 
   const template$16 = html `<slot></slot>`;
 
-  const styles$1m = css `
+  const styles$1n = css `
     ${display$1('contents')}
 
     :host {
@@ -15025,7 +15026,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$1m,
+      styles: styles$1n,
       template: template$16
   });
   DesignSystem.getOrCreate()
@@ -16387,6 +16388,7 @@
       calendarEventBackgroundTransportOrderColor: createThemeColor(BrownLight10, BrownDark10, BrownDark10),
       calendarEventBackgroundHoverTransportOrderColor: createThemeColor(BrownLight20, BrownDark20, BrownDark20),
       calendarEventBorderTransportOrderColor: createThemeColor(BrownLight, BrownDark, BrownDark),
+      calendarEventBorderWorkOrderColor: createThemeColor(NiIndigo, NiIndigo, NiIndigo),
       calendarEventBackgroundAggregateAvailabilityColor: createThemeColor(Black91V10, Black82, Black82),
       calendarEventBorderAggregateAvailabilityColor: hexToRgbaCssThemeColor(createThemeColor(Black91, Black82V100, Black82V100), 0.5, 1, 1),
       controlHeight: '32px',
@@ -16563,6 +16565,7 @@
   createThemeColorToken(tokenNames.calendarEventBackgroundTransportOrderColor, tokenValues.calendarEventBackgroundTransportOrderColor);
   createThemeColorToken(tokenNames.calendarEventBackgroundHoverTransportOrderColor, tokenValues.calendarEventBackgroundHoverTransportOrderColor);
   const calendarEventBorderTransportOrderColor = createThemeColorToken(tokenNames.calendarEventBorderTransportOrderColor, tokenValues.calendarEventBorderTransportOrderColor);
+  const calendarEventBorderWorkOrderColor = createThemeColorToken(tokenNames.calendarEventBorderWorkOrderColor, tokenValues.calendarEventBorderWorkOrderColor);
   createThemeColorToken(tokenNames.calendarEventBackgroundAggregateAvailabilityColor, tokenValues.calendarEventBackgroundAggregateAvailabilityColor);
   createThemeColorToken(tokenNames.calendarEventBorderAggregateAvailabilityColor, tokenValues.calendarEventBorderAggregateAvailabilityColor);
   // #endregion
@@ -16670,7 +16673,7 @@
   }
   // #endregion
 
-  const styles$1l = css `
+  const styles$1m = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -16852,7 +16855,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$15,
-      styles: styles$1l,
+      styles: styles$1m,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16961,7 +16964,7 @@
     padding: 0;
 `;
 
-  const styles$1k = css `
+  const styles$1l = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17245,8 +17248,8 @@
             }
         `));
 
-  const styles$1j = css `
-    ${styles$1k}
+  const styles$1k = css `
+    ${styles$1l}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17349,7 +17352,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$14,
-      styles: styles$1j,
+      styles: styles$1k,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17357,7 +17360,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$1i = css `
+  const styles$1j = css `
     ${display$1('grid')}
 
     :host {
@@ -17542,7 +17545,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$13,
-      styles: styles$1i,
+      styles: styles$1j,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17554,7 +17557,7 @@
 
   // These styles end up inside a @layer block so must use the
   // cssPartial tag instead of the css tag
-  const styles$1h = cssPartial `
+  const styles$1i = cssPartial `
     .severity-text {
         display: none;
         font: ${errorTextFont};
@@ -17664,12 +17667,12 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$1g = css `
+  const styles$1h = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$1('inline-flex')}
-        ${styles$1h}
+        ${styles$1i}
         :host {
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
@@ -18215,8 +18218,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             }
         `));
 
-  const styles$1f = css `
-    ${styles$1g}
+  const styles$1g = css `
+    ${styles$1h}
     ${'' /* Anchor specific styles */}
     @layer base {
         .control {
@@ -19269,7 +19272,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$1e = css `
+  const styles$1f = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -19333,7 +19336,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       const composedIcon = iconClass.compose({
           baseName,
           template: template$12,
-          styles: styles$1e
+          styles: styles$1f
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19605,14 +19608,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$11,
-      styles: styles$1f,
+      styles: styles$1g,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
 
-  const styles$1d = css `
+  const styles$1e = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -19782,14 +19785,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$10,
-      styles: styles$1d,
+      styles: styles$1e,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$1c = css `
+  const styles$1d = css `
     ${display$1('flex')}
 
     :host {
@@ -19829,8 +19832,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const styles$1b = css `
-    ${styles$1k}
+  const styles$1c = css `
+    ${styles$1l}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -19926,7 +19929,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       baseName: 'button',
       baseClass: Button$1,
       template: template$$,
-      styles: styles$1b,
+      styles: styles$1c,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20262,14 +20265,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$_,
-      styles: styles$1c,
+      styles: styles$1d,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$1a = css `
+  const styles$1b = css `
     ${display$1('block')}
 
     :host {
@@ -20512,7 +20515,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$Z,
-      styles: styles$1a,
+      styles: styles$1b,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20528,7 +20531,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       zIndex1000: '1000'
   };
 
-  const styles$19 = css `
+  const styles$1a = css `
     ${display$1('block')}
 
     :host {
@@ -20559,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$19
+      styles: styles$1a
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  const styles$18 = css `
+  const styles$19 = css `
     ${display$1('flex')}
 
     :host {
@@ -20837,7 +20840,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$Y,
-      styles: styles$18
+      styles: styles$19
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -20878,7 +20881,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     </template>
 `;
 
-  const styles$17 = css `
+  const styles$18 = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -20982,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$17
+      styles: styles$18
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$16 = css `
+  const styles$17 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -21083,14 +21086,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$16,
+      styles: styles$17,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$15 = css `
+  const styles$16 = css `
     ${display$1('flex')}
 
     :host {
@@ -21130,11 +21133,11 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'card',
       baseClass: Card$1,
       template: template$X,
-      styles: styles$15
+      styles: styles$16
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$14 = css `
+  const styles$15 = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -21292,14 +21295,14 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$14,
+      styles: styles$15,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$13 = css `
+  const styles$14 = css `
     .error-icon {
         display: none;
     }
@@ -21333,9 +21336,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$12 = css `
+  const styles$13 = css `
     ${display$1('inline-grid')}
-    ${styles$13}
+    ${styles$14}
 
     :host {
         font: ${bodyFont};
@@ -21573,7 +21576,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: template$W,
-      styles: styles$12,
+      styles: styles$13,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
@@ -21585,7 +21588,7 @@ so this becomes the fallback color for the slot */ ''}
       block: 'block'
   };
 
-  const styles$11 = css `
+  const styles$12 = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -21733,15 +21736,15 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleChip = Chip.compose({
       baseName: 'chip',
       template: template$V,
-      styles: styles$11,
+      styles: styles$12,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleChip());
 
-  const styles$10 = css `
-    ${styles$1k}
+  const styles$11 = css `
+    ${styles$1l}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -21884,7 +21887,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$U,
-      styles: styles$10,
+      styles: styles$11,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21914,7 +21917,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$$ = css `
+  const styles$10 = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -22204,7 +22207,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$_ = css `
+  const styles$$ = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -22231,10 +22234,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$Z = css `
+  const styles$_ = css `
+    ${styles$10}
+    ${styles$14}
     ${styles$$}
-    ${styles$13}
-    ${styles$_}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -23131,7 +23134,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
       template: template$T,
-      styles: styles$Z,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -23175,7 +23178,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$Y = css `
+  const styles$Z = css `
     ${display$1('grid')}
 
     dialog {
@@ -23417,12 +23420,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
       template: template$S,
-      styles: styles$Y,
+      styles: styles$Z,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$X = css `
+  const styles$Y = css `
     ${display$1('block')}
 
     :host {
@@ -23708,7 +23711,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$R,
-      styles: styles$X
+      styles: styles$Y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -26504,7 +26507,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$W = css `
+  const styles$X = css `
     ${display$1('none')}
 `;
 
@@ -26577,7 +26580,7 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderCore.prototype, "itemRemove", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$W
+      styles: styles$X
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26744,13 +26747,13 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$W
+      styles: styles$X
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$V = css `
+  const styles$W = css `
     ${display$1('flex')}
 
     :host {
@@ -26929,12 +26932,12 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: template$Q,
-      styles: styles$V
+      styles: styles$W
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$U = css `
+  const styles$V = css `
     ${display$1('flex')}
 
     :host {
@@ -27139,7 +27142,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'list-option-group',
       baseClass: FoundationElement,
       template: template$P,
-      styles: styles$U
+      styles: styles$V
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -27168,7 +27171,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const template$O = html `<template slot="mapping"></template>`;
 
-  const styles$T = css `
+  const styles$U = css `
     ${display$1('none')}
 `;
 
@@ -27185,7 +27188,7 @@ so this becomes the fallback color for the slot */ ''}
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
       template: template$O,
-      styles: styles$T
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -27256,7 +27259,7 @@ so this becomes the fallback color for the slot */ ''}
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
       template: template$O,
-      styles: styles$T
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -27280,7 +27283,7 @@ so this becomes the fallback color for the slot */ ''}
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
       template: template$O,
-      styles: styles$T
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -27297,7 +27300,7 @@ so this becomes the fallback color for the slot */ ''}
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
       template: template$O,
-      styles: styles$T
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -27616,7 +27619,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$S = css `
+  const styles$T = css `
     ${display$1('grid')}
 
     :host {
@@ -27688,7 +27691,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu',
       baseClass: Menu$1,
       template: template$N,
-      styles: styles$S
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -27703,7 +27706,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$R = css `
+  const styles$S = css `
     ${display$1('inline-block')}
 
     :host {
@@ -27972,7 +27975,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$M,
-      styles: styles$R,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -27980,7 +27983,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display$1('grid')}
 
     :host {
@@ -28077,7 +28080,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$Q,
+      styles: styles$R,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -28092,10 +28095,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$P = css `
+  const styles$Q = css `
     ${display$1('inline-block')}
-    ${styles$13}
-    ${styles$_}
+    ${styles$14}
+    ${styles$$}
 
     :host {
         font: ${bodyFont};
@@ -28473,7 +28476,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: template$L,
-      styles: styles$P,
+      styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -28516,7 +28519,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$O = css `
+  const styles$P = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -28616,15 +28619,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$O,
+      styles: styles$P,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$N = css `
+  const styles$O = css `
     ${display$1('inline-block')}
-    ${styles$13}
-    ${styles$_}
+    ${styles$14}
+    ${styles$$}
 
     .positioning-region {
         display: flex;
@@ -28704,7 +28707,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: template$K,
-      styles: styles$N,
+      styles: styles$O,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -48118,7 +48121,7 @@ ${indentedChild}`;
   // src/index.ts
   var index_default$7 = HardBreak;
 
-  const styles$M = css `
+  const styles$N = css `
     ${display$1('inline')}
 
     .positioning-region {
@@ -48155,7 +48158,7 @@ ${indentedChild}`;
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$M
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -48184,8 +48187,8 @@ ${indentedChild}`;
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$L = css `
-    ${styles$$}
+  const styles$M = css `
+    ${styles$10}
 
     :host {
         height: auto;
@@ -48492,7 +48495,7 @@ ${indentedChild}`;
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
       template: template$J,
-      styles: styles$L
+      styles: styles$M
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -48601,9 +48604,9 @@ ${indentedChild}`;
     </template>
 `;
 
-  const styles$K = css `
+  const styles$L = css `
     ${display$1('inline-flex')}
-    ${styles$13}
+    ${styles$14}
 
     :host {
         font: ${bodyFont};
@@ -65407,7 +65410,7 @@ ${indentedChild}`;
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
       template: template$I,
-      styles: styles$K,
+      styles: styles$L,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -65422,7 +65425,7 @@ ${indentedChild}`;
     </template>
 `;
 
-  const styles$J = css `
+  const styles$K = css `
     ${display$1('flex')}
 
     :host {
@@ -65536,16 +65539,16 @@ ${indentedChild}`;
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
       template: template$H,
-      styles: styles$J
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$I = css `
+  const styles$J = css `
+    ${styles$10}
+    ${styles$14}
     ${styles$$}
-    ${styles$13}
-    ${styles$_}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -65708,7 +65711,7 @@ ${indentedChild}`;
             }
         `));
 
-  const styles$H = css `
+  const styles$I = css `
     ${display$1('inline-grid')}
 
     :host {
@@ -65926,7 +65929,7 @@ ${indentedChild}`;
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
       template: template$G,
-      styles: styles$H
+      styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -67155,7 +67158,7 @@ ${indentedChild}`;
       baseName: 'select',
       baseClass: Select$2,
       template: template$F,
-      styles: styles$I,
+      styles: styles$J,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -67168,8 +67171,8 @@ ${indentedChild}`;
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$G = css `
-    ${styles$1g}
+  const styles$H = css `
+    ${styles$1h}
     ${'' /* Button specific styles */}
     @layer base {
         .control {
@@ -67303,14 +67306,14 @@ ${indentedChild}`;
   const nimbleStep = Step.compose({
       baseName: 'step',
       template: template$E,
-      styles: styles$G,
+      styles: styles$H,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
 
-  const styles$F = css `
+  const styles$G = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -67527,11 +67530,11 @@ ${indentedChild}`;
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
       template: template$D,
-      styles: styles$F
+      styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
 
-  const styles$E = css `
+  const styles$F = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -67803,11 +67806,11 @@ ${indentedChild}`;
       baseClass: Switch$1,
       baseName: 'switch',
       template: template$C,
-      styles: styles$E
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$D = css `
+  const styles$E = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -67918,11 +67921,11 @@ ${indentedChild}`;
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$D
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$C = css `
+  const styles$D = css `
     ${display$1('block')}
 
     :host {
@@ -67941,7 +67944,7 @@ ${indentedChild}`;
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$C
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -71667,7 +71670,7 @@ ${indentedChild}`;
       }
   }
 
-  const styles$B = css `
+  const styles$C = css `
     ${display$1('flex')}
 
     :host {
@@ -71887,7 +71890,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$A = css `
+  const styles$B = css `
     ${display$1('flex')}
 
     :host {
@@ -72007,12 +72010,12 @@ focus outline in that case.
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
       template: template$B,
-      styles: styles$A
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$z = css `
+  const styles$A = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -72037,9 +72040,9 @@ focus outline in that case.
     }
 `;
 
-  const styles$y = css `
+  const styles$z = css `
     ${display$1('flex')}
-    ${styles$z}
+    ${styles$A}
 
     :host {
         width: fit-content;
@@ -72209,7 +72212,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$x = css `
+  const styles$y = css `
     ${display$1('flex')}
 
     :host {
@@ -72352,7 +72355,7 @@ focus outline in that case.
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
       template: template$A,
-      styles: styles$x
+      styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
@@ -72753,14 +72756,14 @@ focus outline in that case.
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
       template: template$z,
-      styles: styles$y
+      styles: styles$z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$w = css `
+  const styles$x = css `
     ${display$1('grid')}
-    ${styles$z}
+    ${styles$A}
 
     :host {
         align-items: center;
@@ -73006,7 +73009,7 @@ focus outline in that case.
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
       template: template$y,
-      styles: styles$w
+      styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
@@ -77653,11 +77656,11 @@ focus outline in that case.
   const nimbleTable = Table$1.compose({
       baseName: 'table',
       template: template$x,
-      styles: styles$B
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$v = css `
+  const styles$w = css `
     ${display$1('contents')}
 
     .header-content {
@@ -77734,7 +77737,7 @@ focus outline in that case.
       return ColumnWithPlaceholder;
   }
 
-  const styles$u = css `
+  const styles$v = css `
     ${display$1('flex')}
 
     :host {
@@ -77858,7 +77861,7 @@ focus outline in that case.
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
       template: template$v,
-      styles: styles$u
+      styles: styles$v
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -77944,7 +77947,7 @@ focus outline in that case.
     </span>
 `;
 
-  const styles$t = css `
+  const styles$u = css `
     ${display$1('flex')}
 
     span {
@@ -77969,7 +77972,7 @@ focus outline in that case.
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
       template: template$u,
-      styles: styles$t
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78214,7 +78217,7 @@ focus outline in that case.
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
       template: template$w,
-      styles: styles$v
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78267,7 +78270,7 @@ focus outline in that case.
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
       template: template$u,
-      styles: styles$t
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78290,7 +78293,7 @@ focus outline in that case.
     </template>
 `;
 
-  const styles$s = css `
+  const styles$t = css `
     ${display$1('flex')}
 
     :host {
@@ -78393,7 +78396,7 @@ focus outline in that case.
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
       template: template$t,
-      styles: styles$s
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -78652,7 +78655,7 @@ focus outline in that case.
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
       template: template$w,
-      styles: styles$v
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78669,7 +78672,7 @@ focus outline in that case.
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
       template: template$t,
-      styles: styles$s
+      styles: styles$t
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78771,7 +78774,7 @@ focus outline in that case.
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
       template: template$u,
-      styles: styles$t
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78824,7 +78827,7 @@ focus outline in that case.
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
       template: template$w,
-      styles: styles$v
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78932,8 +78935,8 @@ focus outline in that case.
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$r = css `
-    ${styles$v}
+  const styles$s = css `
+    ${styles$w}
 
     slot[name='mapping'] {
         display: none;
@@ -79026,7 +79029,7 @@ focus outline in that case.
       }
   }
 
-  const styles$q = css `
+  const styles$r = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -79195,14 +79198,14 @@ focus outline in that case.
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
       template: template$r,
-      styles: styles$q
+      styles: styles$r
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$p = css `
+  const styles$q = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -79314,7 +79317,7 @@ focus outline in that case.
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
       template: template$q,
-      styles: styles$p
+      styles: styles$q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -79398,7 +79401,7 @@ focus outline in that case.
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
       template: template$s,
-      styles: styles$r
+      styles: styles$s
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79432,7 +79435,7 @@ focus outline in that case.
     `)}
 `;
 
-  const styles$o = css `
+  const styles$p = css `
     :host {
         align-self: center;
         width: 100%;
@@ -79508,7 +79511,7 @@ focus outline in that case.
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
       template: template$o,
-      styles: styles$o
+      styles: styles$p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
   const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
@@ -79564,7 +79567,7 @@ focus outline in that case.
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
       template: template$p,
-      styles: styles$v
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79592,7 +79595,7 @@ focus outline in that case.
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
       template: template$u,
-      styles: styles$t
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79614,7 +79617,7 @@ focus outline in that case.
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
       template: template$t,
-      styles: styles$s
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -80155,7 +80158,7 @@ focus outline in that case.
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
       template: template$n,
-      styles: styles$v
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -80174,7 +80177,7 @@ focus outline in that case.
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
       template: template$t,
-      styles: styles$s
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -80229,14 +80232,14 @@ focus outline in that case.
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
       template: template$w,
-      styles: styles$v
+      styles: styles$w
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$n = css `
-    ${styles$1c}
+  const styles$o = css `
+    ${styles$1d}
 
     .tabpanel {
         overflow: auto;
@@ -80318,11 +80321,11 @@ focus outline in that case.
       baseName: 'tabs',
       baseClass: Tabs$1,
       template: template$_,
-      styles: styles$n
+      styles: styles$o
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$m = css `
+  const styles$n = css `
     ${display$1('flex')}
 
     :host {
@@ -80387,7 +80390,7 @@ focus outline in that case.
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
       template: template$m,
-      styles: styles$m
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
   applyMixins(TabsToolbar, StartEnd);
@@ -80397,10 +80400,10 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$l = css `
+  const styles$m = css `
     ${display$1('inline-flex')}
-    ${styles$13}
-    ${styles$_}
+    ${styles$14}
+    ${styles$$}
 
     :host {
         font: ${bodyFont};
@@ -80741,7 +80744,7 @@ focus outline in that case.
       baseName: 'text-area',
       baseClass: TextArea$1,
       template: template$l,
-      styles: styles$l,
+      styles: styles$m,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -80758,10 +80761,10 @@ focus outline in that case.
       frameless: 'frameless'
   };
 
-  const styles$k = css `
+  const styles$l = css `
     ${display$1('inline-block')}
-    ${styles$13}
-    ${styles$_}
+    ${styles$14}
+    ${styles$$}
 
     :host {
         font: ${bodyFont};
@@ -81121,7 +81124,7 @@ focus outline in that case.
       baseName: 'text-field',
       baseClass: TextField$1,
       template: template$k,
-      styles: styles$k,
+      styles: styles$l,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -81138,7 +81141,7 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$j = css `
+  const styles$k = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -81277,7 +81280,7 @@ focus outline in that case.
       baseName: 'tooltip',
       baseClass: Tooltip$1,
       template: template$j,
-      styles: styles$j
+      styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
 
@@ -81365,7 +81368,7 @@ focus outline in that case.
       }
   }
 
-  const styles$i = css `
+  const styles$j = css `
     ${display$1('block')}
 
     :host {
@@ -81582,12 +81585,12 @@ focus outline in that case.
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$i,
+      styles: styles$j,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$h = css `
+  const styles$i = css `
     ${display$1('flex')}
 
     :host {
@@ -81698,7 +81701,7 @@ focus outline in that case.
       baseName: 'tree-view',
       baseClass: TreeView$1,
       template: template$i,
-      styles: styles$h
+      styles: styles$i
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -81816,7 +81819,7 @@ focus outline in that case.
 
   const template$h = html `<template slot="unit"></template>`;
 
-  const styles$g = css `
+  const styles$h = css `
     ${display$1('none')}
 `;
 
@@ -81845,7 +81848,7 @@ focus outline in that case.
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
       template: template$h,
-      styles: styles$g
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -81898,7 +81901,7 @@ focus outline in that case.
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
       template: template$h,
-      styles: styles$g
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -96245,7 +96248,7 @@ focus outline in that case.
     </div>
 `;
 
-  const styles$f = css `
+  const styles$g = css `
     ${display$1('inline-block')}
 
     :host {
@@ -99271,7 +99274,7 @@ focus outline in that case.
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
       template: template$g,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
@@ -99283,7 +99286,7 @@ focus outline in that case.
    */
   const display = (displayValue) => `${display$2(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 
-  const styles$e = css `
+  const styles$f = css `
     ${display('flex')}
 
     :host {
@@ -99439,15 +99442,15 @@ focus outline in that case.
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
       template: template$f,
-      styles: styles$e
+      styles: styles$f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightChatConversation());
 
-  const styles$d = css `
+  const styles$e = css `
     ${display('flex')}
-    ${styles$13}
+    ${styles$14}
 
     :host {
         width: 100%;
@@ -99843,7 +99846,7 @@ focus outline in that case.
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
       template: template$e,
-      styles: styles$d,
+      styles: styles$e,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -99861,7 +99864,7 @@ focus outline in that case.
       inbound: 'inbound'
   };
 
-  const styles$c = css `
+  const styles$d = css `
     ${display('flex')}
 
     :host {
@@ -99985,11 +99988,11 @@ focus outline in that case.
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
       template: template$d,
-      styles: styles$c
+      styles: styles$d
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
 
-  const styles$b = css `
+  const styles$c = css `
     ${display('flex')}
 
     :host {
@@ -100086,11 +100089,11 @@ focus outline in that case.
   const sprightChatMessageInbound = ChatMessageInbound.compose({
       baseName: 'chat-message-inbound',
       template: template$c,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
 
-  const styles$a = css `
+  const styles$b = css `
     ${display('flex')}
 
     :host {
@@ -100140,11 +100143,11 @@ focus outline in that case.
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
       template: template$b,
-      styles: styles$a
+      styles: styles$b
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
 
-  const styles$9 = css `
+  const styles$a = css `
     ${display('flex')}
 
     :host {
@@ -100187,11 +100190,11 @@ focus outline in that case.
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',
       template: template$a,
-      styles: styles$9
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
 
-  const styles$8 = css `
+  const styles$9 = css `
     ${display('flex')}
 
     :host {
@@ -100299,8 +100302,8 @@ focus outline in that case.
     <div class="icon dark-icon" aria-hidden="true" :innerHTML="${() => nigelChatDarkData}"></div>
 `;
 
-  const styles$7 = css `
-    ${styles$1e}
+  const styles$8 = css `
+    ${styles$1f}
 
     .dark-icon {
         display: none;
@@ -100324,7 +100327,7 @@ focus outline in that case.
   const sprightIconNigelChat = IconNigelChat.compose({
       baseName: 'icon-nigel-chat',
       template: template$9,
-      styles: styles$7
+      styles: styles$8
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100364,7 +100367,7 @@ focus outline in that case.
   const sprightChatMessageWelcome = ChatMessageWelcome.compose({
       baseName: 'chat-message-welcome',
       template: template$8,
-      styles: styles$8
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());
 
@@ -100391,7 +100394,7 @@ focus outline in that case.
   const sprightIconBreakpointConditional = IconBreakpointConditional.compose({
       baseName: 'icon-breakpoint-conditional',
       template: template$7,
-      styles: styles$1e
+      styles: styles$1f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100421,7 +100424,7 @@ focus outline in that case.
   const sprightIconBreakpointDisabled = IconBreakpointDisabled.compose({
       baseName: 'icon-breakpoint-disabled',
       template: template$6,
-      styles: styles$1e
+      styles: styles$1f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100450,7 +100453,7 @@ focus outline in that case.
   const sprightIconBreakpointEnabled = IconBreakpointEnabled.compose({
       baseName: 'icon-breakpoint-enabled',
       template: template$5,
-      styles: styles$1e
+      styles: styles$1f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100479,7 +100482,7 @@ focus outline in that case.
   const sprightIconBreakpointExecutionPointer = IconBreakpointExecutionPointer.compose({
       baseName: 'icon-breakpoint-execution-pointer',
       template: template$4,
-      styles: styles$1e
+      styles: styles$1f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100513,7 +100516,7 @@ focus outline in that case.
   const sprightIconBreakpointHitDisabled = IconBreakpointHitDisabled.compose({
       baseName: 'icon-breakpoint-hit-disabled',
       template: template$3,
-      styles: styles$1e
+      styles: styles$1f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100547,7 +100550,7 @@ focus outline in that case.
   const sprightIconBreakpointHit = IconBreakpointHit.compose({
       baseName: 'icon-breakpoint-hit',
       template: template$2,
-      styles: styles$1e
+      styles: styles$1f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100577,14 +100580,14 @@ focus outline in that case.
   const sprightIconBreakpointHover = IconBreakpointHover.compose({
       baseName: 'icon-breakpoint-hover',
       template: template$1,
-      styles: styles$1e
+      styles: styles$1f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointHover());
 
-  const styles$6 = css `
-    ${styles$1e}
+  const styles$7 = css `
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderReservationColor};
@@ -100602,14 +100605,14 @@ focus outline in that case.
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
       template: template$12,
-      styles: styles$6
+      styles: styles$7
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalendarWeek());
 
-  const styles$5 = css `
-    ${styles$1e}
+  const styles$6 = css `
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderCalibrationColor};
@@ -100627,14 +100630,14 @@ focus outline in that case.
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
       template: template$12,
-      styles: styles$5
+      styles: styles$6
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalipers());
 
-  const styles$4 = css `
-    ${styles$1e}
+  const styles$5 = css `
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderTransportOrderColor};
@@ -100652,14 +100655,14 @@ focus outline in that case.
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
       template: template$12,
-      styles: styles$4
+      styles: styles$5
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemForklift());
 
-  const styles$3 = css `
-    ${styles$1e}
+  const styles$4 = css `
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderStaticColor};
@@ -100677,14 +100680,39 @@ focus outline in that case.
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
       template: template$12,
-      styles: styles$3
+      styles: styles$4
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemRectangleCheckLines());
 
+  const styles$3 = css `
+    ${styles$1f}
+
+    .icon svg {
+        fill: ${calendarEventBorderWorkOrderColor};
+    }
+`;
+
+  /**
+   * Spright square list cog icon for work order items
+   */
+  class IconWorkItemSquareListCog extends IconSvg {
+      constructor() {
+          super(squareListCog16X16);
+      }
+  }
+  const sprightIconWorkItemSquareListCog = IconWorkItemSquareListCog.compose({
+      baseName: 'icon-work-item-square-list-cog',
+      template: template$12,
+      styles: styles$3
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('spright')
+      .register(sprightIconWorkItemSquareListCog());
+
   const styles$2 = css `
-    ${styles$1e}
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderJobColor};
@@ -100709,7 +100737,7 @@ focus outline in that case.
       .register(sprightIconWorkItemUserHelmetSafety());
 
   const styles$1 = css `
-    ${styles$1e}
+    ${styles$1f}
 
     .icon svg {
         fill: ${calendarEventBorderMaintenanceColor};