@ni/ok-components 1.3.5 → 1.3.7

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$1h = html `<slot></slot>`;
 
-  const styles$1x = css `
+  const styles$1y = css `
     ${display$2('contents')}
 
     :host {
@@ -15025,7 +15026,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$1x,
+      styles: styles$1y,
       template: template$1h
   });
   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$1w = css `
+  const styles$1x = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -16852,7 +16855,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$1g,
-      styles: styles$1w,
+      styles: styles$1x,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16961,7 +16964,7 @@
     padding: 0;
 `;
 
-  const styles$1v = css `
+  const styles$1w = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17245,8 +17248,8 @@
             }
         `));
 
-  const styles$1u = css `
-    ${styles$1v}
+  const styles$1v = css `
+    ${styles$1w}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17349,7 +17352,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$1f,
-      styles: styles$1u,
+      styles: styles$1v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17357,7 +17360,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$1t = css `
+  const styles$1u = css `
     ${display$2('grid')}
 
     :host {
@@ -17542,7 +17545,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$1e,
-      styles: styles$1t,
+      styles: styles$1u,
       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$1s = cssPartial `
+  const styles$1t = 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$1r = css `
+  const styles$1s = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$2('inline-flex')}
-        ${styles$1s}
+        ${styles$1t}
         :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$1q = css `
-    ${styles$1r}
+  const styles$1r = css `
+    ${styles$1s}
     ${'' /* 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$1p = css `
+  const styles$1q = css `
     ${display$2('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$1d,
-          styles: styles$1p
+          styles: styles$1q
       });
       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$1c,
-      styles: styles$1q,
+      styles: styles$1r,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
 
-  const styles$1o = css `
+  const styles$1p = css `
     ${display$2('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$1b,
-      styles: styles$1o,
+      styles: styles$1p,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$1n = css `
+  const styles$1o = css `
     ${display$2('flex')}
 
     :host {
@@ -19829,8 +19832,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const styles$1m = css `
-    ${styles$1v}
+  const styles$1n = css `
+    ${styles$1w}
     ${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$1a,
-      styles: styles$1m,
+      styles: styles$1n,
       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$19,
-      styles: styles$1n,
+      styles: styles$1o,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$1l = css `
+  const styles$1m = css `
     ${display$2('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$18,
-      styles: styles$1l,
+      styles: styles$1m,
       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$1k = css `
+  const styles$1l = css `
     ${display$2('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$1k
+      styles: styles$1l
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  const styles$1j = css `
+  const styles$1k = css `
     ${display$2('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$17,
-      styles: styles$1j
+      styles: styles$1k
   });
   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$1i = css `
+  const styles$1j = css `
     ${display$2('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$1i
+      styles: styles$1j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$1h = css `
+  const styles$1i = 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$1h,
+      styles: styles$1i,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$1g = css `
+  const styles$1h = css `
     ${display$2('flex')}
 
     :host {
@@ -21130,11 +21133,11 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'card',
       baseClass: Card$1,
       template: template$16,
-      styles: styles$1g
+      styles: styles$1h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$1f = css `
+  const styles$1g = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21292,7 +21295,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$1f,
+      styles: styles$1g,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21300,7 +21303,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   const cardButtonTag = 'nimble-card-button';
 
-  const styles$1e = css `
+  const styles$1f = css `
     .error-icon {
         display: none;
     }
@@ -21334,9 +21337,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$1d = css `
+  const styles$1e = css `
     ${display$2('inline-grid')}
-    ${styles$1e}
+    ${styles$1f}
 
     :host {
         font: ${bodyFont};
@@ -21574,7 +21577,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: template$15,
-      styles: styles$1d,
+      styles: styles$1e,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
@@ -21586,7 +21589,7 @@ so this becomes the fallback color for the slot */ ''}
       block: 'block'
   };
 
-  const styles$1c = css `
+  const styles$1d = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21734,7 +21737,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleChip = Chip.compose({
       baseName: 'chip',
       template: template$14,
-      styles: styles$1c,
+      styles: styles$1d,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21742,8 +21745,8 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleChip());
   const chipTag = 'nimble-chip';
 
-  const styles$1b = css `
-    ${styles$1v}
+  const styles$1c = css `
+    ${styles$1w}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -21886,7 +21889,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$13,
-      styles: styles$1b,
+      styles: styles$1c,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21916,7 +21919,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$1a = css `
+  const styles$1b = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -22206,7 +22209,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$19 = css `
+  const styles$1a = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -22233,10 +22236,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$18 = css `
+  const styles$19 = css `
+    ${styles$1b}
+    ${styles$1f}
     ${styles$1a}
-    ${styles$1e}
-    ${styles$19}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -23133,7 +23136,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
       template: template$12,
-      styles: styles$18,
+      styles: styles$19,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -23177,7 +23180,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$17 = css `
+  const styles$18 = css `
     ${display$2('grid')}
 
     dialog {
@@ -23419,12 +23422,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
       template: template$11,
-      styles: styles$17,
+      styles: styles$18,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$16 = css `
+  const styles$17 = css `
     ${display$2('block')}
 
     :host {
@@ -23710,7 +23713,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$10,
-      styles: styles$16
+      styles: styles$17
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -26508,7 +26511,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$15 = css `
+  const styles$16 = css `
     ${display$2('none')}
 `;
 
@@ -26581,7 +26584,7 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderCore.prototype, "itemRemove", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$15
+      styles: styles$16
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26748,13 +26751,13 @@ so this becomes the fallback color for the slot */ ''}
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$15
+      styles: styles$16
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$14 = css `
+  const styles$15 = css `
     ${display$2('flex')}
 
     :host {
@@ -26933,12 +26936,12 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: template$$,
-      styles: styles$14
+      styles: styles$15
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$13 = css `
+  const styles$14 = css `
     ${display$2('flex')}
 
     :host {
@@ -27143,7 +27146,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'list-option-group',
       baseClass: FoundationElement,
       template: template$_,
-      styles: styles$13
+      styles: styles$14
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -27172,7 +27175,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const template$Z = html `<template slot="mapping"></template>`;
 
-  const styles$12 = css `
+  const styles$13 = css `
     ${display$2('none')}
 `;
 
@@ -27189,7 +27192,7 @@ so this becomes the fallback color for the slot */ ''}
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
       template: template$Z,
-      styles: styles$12
+      styles: styles$13
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -27260,7 +27263,7 @@ so this becomes the fallback color for the slot */ ''}
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
       template: template$Z,
-      styles: styles$12
+      styles: styles$13
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -27284,7 +27287,7 @@ so this becomes the fallback color for the slot */ ''}
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
       template: template$Z,
-      styles: styles$12
+      styles: styles$13
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -27301,7 +27304,7 @@ so this becomes the fallback color for the slot */ ''}
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
       template: template$Z,
-      styles: styles$12
+      styles: styles$13
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -27620,7 +27623,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$11 = css `
+  const styles$12 = css `
     ${display$2('grid')}
 
     :host {
@@ -27692,7 +27695,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu',
       baseClass: Menu$1,
       template: template$Y,
-      styles: styles$11
+      styles: styles$12
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   const menuTag = 'nimble-menu';
@@ -27708,7 +27711,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$10 = css `
+  const styles$11 = css `
     ${display$2('inline-block')}
 
     :host {
@@ -27977,7 +27980,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$X,
-      styles: styles$10,
+      styles: styles$11,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -27985,7 +27988,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$$ = css `
+  const styles$10 = css `
     ${display$2('grid')}
 
     :host {
@@ -28082,7 +28085,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$$,
+      styles: styles$10,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -28098,10 +28101,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$_ = css `
+  const styles$$ = css `
     ${display$2('inline-block')}
-    ${styles$1e}
-    ${styles$19}
+    ${styles$1f}
+    ${styles$1a}
 
     :host {
         font: ${bodyFont};
@@ -28479,7 +28482,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: template$W,
-      styles: styles$_,
+      styles: styles$$,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -28522,7 +28525,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$Z = css `
+  const styles$_ = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -28622,15 +28625,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$Z,
+      styles: styles$_,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$Y = css `
+  const styles$Z = css `
     ${display$2('inline-block')}
-    ${styles$1e}
-    ${styles$19}
+    ${styles$1f}
+    ${styles$1a}
 
     .positioning-region {
         display: flex;
@@ -28710,7 +28713,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: template$V,
-      styles: styles$Y,
+      styles: styles$Z,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -48124,7 +48127,7 @@ ${indentedChild}`;
   // src/index.ts
   var index_default$7 = HardBreak;
 
-  const styles$X = css `
+  const styles$Y = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -48161,7 +48164,7 @@ ${indentedChild}`;
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$X
+      styles: styles$Y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -48190,8 +48193,8 @@ ${indentedChild}`;
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$W = css `
-    ${styles$1a}
+  const styles$X = css `
+    ${styles$1b}
 
     :host {
         height: auto;
@@ -48498,7 +48501,7 @@ ${indentedChild}`;
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
       template: template$U,
-      styles: styles$W
+      styles: styles$X
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -48607,9 +48610,9 @@ ${indentedChild}`;
     </template>
 `;
 
-  const styles$V = css `
+  const styles$W = css `
     ${display$2('inline-flex')}
-    ${styles$1e}
+    ${styles$1f}
 
     :host {
         font: ${bodyFont};
@@ -65413,7 +65416,7 @@ ${indentedChild}`;
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
       template: template$T,
-      styles: styles$V,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -65428,7 +65431,7 @@ ${indentedChild}`;
     </template>
 `;
 
-  const styles$U = css `
+  const styles$V = css `
     ${display$2('flex')}
 
     :host {
@@ -65542,16 +65545,16 @@ ${indentedChild}`;
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
       template: template$S,
-      styles: styles$U
+      styles: styles$V
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$T = css `
+  const styles$U = css `
+    ${styles$1b}
+    ${styles$1f}
     ${styles$1a}
-    ${styles$1e}
-    ${styles$19}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -65714,7 +65717,7 @@ ${indentedChild}`;
             }
         `));
 
-  const styles$S = css `
+  const styles$T = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -65932,7 +65935,7 @@ ${indentedChild}`;
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
       template: template$R,
-      styles: styles$S
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -67161,7 +67164,7 @@ ${indentedChild}`;
       baseName: 'select',
       baseClass: Select$2,
       template: template$Q,
-      styles: styles$T,
+      styles: styles$U,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -67174,8 +67177,8 @@ ${indentedChild}`;
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$R = css `
-    ${styles$1r}
+  const styles$S = css `
+    ${styles$1s}
     ${'' /* Button specific styles */}
     @layer base {
         .control {
@@ -67309,14 +67312,14 @@ ${indentedChild}`;
   const nimbleStep = Step.compose({
       baseName: 'step',
       template: template$P,
-      styles: styles$R,
+      styles: styles$S,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -67533,11 +67536,11 @@ ${indentedChild}`;
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
       template: template$O,
-      styles: styles$Q
+      styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
 
-  const styles$P = css `
+  const styles$Q = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -67809,11 +67812,11 @@ ${indentedChild}`;
       baseClass: Switch$1,
       baseName: 'switch',
       template: template$N,
-      styles: styles$P
+      styles: styles$Q
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$O = css `
+  const styles$P = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -67924,11 +67927,11 @@ ${indentedChild}`;
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$O
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$N = css `
+  const styles$O = css `
     ${display$2('block')}
 
     :host {
@@ -67947,7 +67950,7 @@ ${indentedChild}`;
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$N
+      styles: styles$O
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -71673,7 +71676,7 @@ ${indentedChild}`;
       }
   }
 
-  const styles$M = css `
+  const styles$N = css `
     ${display$2('flex')}
 
     :host {
@@ -71893,7 +71896,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$L = css `
+  const styles$M = css `
     ${display$2('flex')}
 
     :host {
@@ -72013,12 +72016,12 @@ focus outline in that case.
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
       template: template$M,
-      styles: styles$L
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$K = css `
+  const styles$L = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -72043,9 +72046,9 @@ focus outline in that case.
     }
 `;
 
-  const styles$J = css `
+  const styles$K = css `
     ${display$2('flex')}
-    ${styles$K}
+    ${styles$L}
 
     :host {
         width: fit-content;
@@ -72215,7 +72218,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$I = css `
+  const styles$J = css `
     ${display$2('flex')}
 
     :host {
@@ -72358,7 +72361,7 @@ focus outline in that case.
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
       template: template$L,
-      styles: styles$I
+      styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
@@ -72759,14 +72762,14 @@ focus outline in that case.
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
       template: template$K,
-      styles: styles$J
+      styles: styles$K
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$H = css `
+  const styles$I = css `
     ${display$2('grid')}
-    ${styles$K}
+    ${styles$L}
 
     :host {
         align-items: center;
@@ -73012,7 +73015,7 @@ focus outline in that case.
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
       template: template$J,
-      styles: styles$H
+      styles: styles$I
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
@@ -77659,11 +77662,11 @@ focus outline in that case.
   const nimbleTable = Table$1.compose({
       baseName: 'table',
       template: template$I,
-      styles: styles$M
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$G = css `
+  const styles$H = css `
     ${display$2('contents')}
 
     .header-content {
@@ -77740,7 +77743,7 @@ focus outline in that case.
       return ColumnWithPlaceholder;
   }
 
-  const styles$F = css `
+  const styles$G = css `
     ${display$2('flex')}
 
     :host {
@@ -77864,7 +77867,7 @@ focus outline in that case.
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
       template: template$G,
-      styles: styles$F
+      styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -77950,7 +77953,7 @@ focus outline in that case.
     </span>
 `;
 
-  const styles$E = css `
+  const styles$F = css `
     ${display$2('flex')}
 
     span {
@@ -77975,7 +77978,7 @@ focus outline in that case.
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
       template: template$F,
-      styles: styles$E
+      styles: styles$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78220,7 +78223,7 @@ focus outline in that case.
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
       template: template$H,
-      styles: styles$G
+      styles: styles$H
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78273,7 +78276,7 @@ focus outline in that case.
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
       template: template$F,
-      styles: styles$E
+      styles: styles$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78296,7 +78299,7 @@ focus outline in that case.
     </template>
 `;
 
-  const styles$D = css `
+  const styles$E = css `
     ${display$2('flex')}
 
     :host {
@@ -78399,7 +78402,7 @@ focus outline in that case.
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
       template: template$E,
-      styles: styles$D
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -78658,7 +78661,7 @@ focus outline in that case.
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
       template: template$H,
-      styles: styles$G
+      styles: styles$H
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78675,7 +78678,7 @@ focus outline in that case.
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
       template: template$E,
-      styles: styles$D
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78777,7 +78780,7 @@ focus outline in that case.
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
       template: template$F,
-      styles: styles$E
+      styles: styles$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78830,7 +78833,7 @@ focus outline in that case.
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
       template: template$H,
-      styles: styles$G
+      styles: styles$H
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78938,8 +78941,8 @@ focus outline in that case.
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$C = css `
-    ${styles$G}
+  const styles$D = css `
+    ${styles$H}
 
     slot[name='mapping'] {
         display: none;
@@ -79032,7 +79035,7 @@ focus outline in that case.
       }
   }
 
-  const styles$B = css `
+  const styles$C = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -79201,14 +79204,14 @@ focus outline in that case.
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
       template: template$C,
-      styles: styles$B
+      styles: styles$C
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$A = css `
+  const styles$B = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -79320,7 +79323,7 @@ focus outline in that case.
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
       template: template$B,
-      styles: styles$A
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -79404,7 +79407,7 @@ focus outline in that case.
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
       template: template$D,
-      styles: styles$C
+      styles: styles$D
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79438,7 +79441,7 @@ focus outline in that case.
     `)}
 `;
 
-  const styles$z = css `
+  const styles$A = css `
     :host {
         align-self: center;
         width: 100%;
@@ -79514,7 +79517,7 @@ focus outline in that case.
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
       template: template$z,
-      styles: styles$z
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
   const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
@@ -79570,7 +79573,7 @@ focus outline in that case.
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
       template: template$A,
-      styles: styles$G
+      styles: styles$H
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79598,7 +79601,7 @@ focus outline in that case.
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
       template: template$F,
-      styles: styles$E
+      styles: styles$F
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -79620,7 +79623,7 @@ focus outline in that case.
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
       template: template$E,
-      styles: styles$D
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -80161,7 +80164,7 @@ focus outline in that case.
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
       template: template$y,
-      styles: styles$G
+      styles: styles$H
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -80180,7 +80183,7 @@ focus outline in that case.
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
       template: template$E,
-      styles: styles$D
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -80235,14 +80238,14 @@ focus outline in that case.
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
       template: template$H,
-      styles: styles$G
+      styles: styles$H
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$y = css `
-    ${styles$1n}
+  const styles$z = css `
+    ${styles$1o}
 
     .tabpanel {
         overflow: auto;
@@ -80324,11 +80327,11 @@ focus outline in that case.
       baseName: 'tabs',
       baseClass: Tabs$1,
       template: template$19,
-      styles: styles$y
+      styles: styles$z
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$x = css `
+  const styles$y = css `
     ${display$2('flex')}
 
     :host {
@@ -80393,7 +80396,7 @@ focus outline in that case.
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
       template: template$x,
-      styles: styles$x
+      styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
   applyMixins(TabsToolbar, StartEnd);
@@ -80403,10 +80406,10 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$w = css `
+  const styles$x = css `
     ${display$2('inline-flex')}
-    ${styles$1e}
-    ${styles$19}
+    ${styles$1f}
+    ${styles$1a}
 
     :host {
         font: ${bodyFont};
@@ -80747,7 +80750,7 @@ focus outline in that case.
       baseName: 'text-area',
       baseClass: TextArea$1,
       template: template$w,
-      styles: styles$w,
+      styles: styles$x,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -80764,10 +80767,10 @@ focus outline in that case.
       frameless: 'frameless'
   };
 
-  const styles$v = css `
+  const styles$w = css `
     ${display$2('inline-block')}
-    ${styles$1e}
-    ${styles$19}
+    ${styles$1f}
+    ${styles$1a}
 
     :host {
         font: ${bodyFont};
@@ -81127,7 +81130,7 @@ focus outline in that case.
       baseName: 'text-field',
       baseClass: TextField$1,
       template: template$v,
-      styles: styles$v,
+      styles: styles$w,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -81144,7 +81147,7 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$u = css `
+  const styles$v = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -81283,7 +81286,7 @@ focus outline in that case.
       baseName: 'tooltip',
       baseClass: Tooltip$1,
       template: template$u,
-      styles: styles$u
+      styles: styles$v
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
   const tooltipTag = 'nimble-tooltip';
@@ -81372,7 +81375,7 @@ focus outline in that case.
       }
   }
 
-  const styles$t = css `
+  const styles$u = css `
     ${display$2('block')}
 
     :host {
@@ -81589,12 +81592,12 @@ focus outline in that case.
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$t,
+      styles: styles$u,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$s = css `
+  const styles$t = css `
     ${display$2('flex')}
 
     :host {
@@ -81705,7 +81708,7 @@ focus outline in that case.
       baseName: 'tree-view',
       baseClass: TreeView$1,
       template: template$t,
-      styles: styles$s
+      styles: styles$t
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -81823,7 +81826,7 @@ focus outline in that case.
 
   const template$s = html `<template slot="unit"></template>`;
 
-  const styles$r = css `
+  const styles$s = css `
     ${display$2('none')}
 `;
 
@@ -81852,7 +81855,7 @@ focus outline in that case.
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
       template: template$s,
-      styles: styles$r
+      styles: styles$s
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -81905,7 +81908,7 @@ focus outline in that case.
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
       template: template$s,
-      styles: styles$r
+      styles: styles$s
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -96252,7 +96255,7 @@ focus outline in that case.
     </div>
 `;
 
-  const styles$q = css `
+  const styles$r = css `
     ${display$2('inline-block')}
 
     :host {
@@ -99278,7 +99281,7 @@ focus outline in that case.
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
       template: template$r,
-      styles: styles$q
+      styles: styles$r
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
@@ -99290,7 +99293,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$p = css `
+  const styles$q = css `
     ${display$1('flex')}
 
     :host {
@@ -99446,15 +99449,15 @@ focus outline in that case.
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
       template: template$q,
-      styles: styles$p
+      styles: styles$q
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightChatConversation());
 
-  const styles$o = css `
+  const styles$p = css `
     ${display$1('flex')}
-    ${styles$1e}
+    ${styles$1f}
 
     :host {
         width: 100%;
@@ -99850,7 +99853,7 @@ focus outline in that case.
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
       template: template$p,
-      styles: styles$o,
+      styles: styles$p,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -99868,7 +99871,7 @@ focus outline in that case.
       inbound: 'inbound'
   };
 
-  const styles$n = css `
+  const styles$o = css `
     ${display$1('flex')}
 
     :host {
@@ -99992,11 +99995,11 @@ focus outline in that case.
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
       template: template$o,
-      styles: styles$n
+      styles: styles$o
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
 
-  const styles$m = css `
+  const styles$n = css `
     ${display$1('flex')}
 
     :host {
@@ -100093,11 +100096,11 @@ focus outline in that case.
   const sprightChatMessageInbound = ChatMessageInbound.compose({
       baseName: 'chat-message-inbound',
       template: template$n,
-      styles: styles$m
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
 
-  const styles$l = css `
+  const styles$m = css `
     ${display$1('flex')}
 
     :host {
@@ -100147,11 +100150,11 @@ focus outline in that case.
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
       template: template$m,
-      styles: styles$l
+      styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
 
-  const styles$k = css `
+  const styles$l = css `
     ${display$1('flex')}
 
     :host {
@@ -100194,11 +100197,11 @@ focus outline in that case.
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',
       template: template$l,
-      styles: styles$k
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
 
-  const styles$j = css `
+  const styles$k = css `
     ${display$1('flex')}
 
     :host {
@@ -100306,8 +100309,8 @@ focus outline in that case.
     <div class="icon dark-icon" aria-hidden="true" :innerHTML="${() => nigelChatDarkData}"></div>
 `;
 
-  const styles$i = css `
-    ${styles$1p}
+  const styles$j = css `
+    ${styles$1q}
 
     .dark-icon {
         display: none;
@@ -100331,7 +100334,7 @@ focus outline in that case.
   const sprightIconNigelChat = IconNigelChat.compose({
       baseName: 'icon-nigel-chat',
       template: template$k,
-      styles: styles$i
+      styles: styles$j
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100371,7 +100374,7 @@ focus outline in that case.
   const sprightChatMessageWelcome = ChatMessageWelcome.compose({
       baseName: 'chat-message-welcome',
       template: template$j,
-      styles: styles$j
+      styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageWelcome());
 
@@ -100398,7 +100401,7 @@ focus outline in that case.
   const sprightIconBreakpointConditional = IconBreakpointConditional.compose({
       baseName: 'icon-breakpoint-conditional',
       template: template$i,
-      styles: styles$1p
+      styles: styles$1q
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100428,7 +100431,7 @@ focus outline in that case.
   const sprightIconBreakpointDisabled = IconBreakpointDisabled.compose({
       baseName: 'icon-breakpoint-disabled',
       template: template$h,
-      styles: styles$1p
+      styles: styles$1q
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100457,7 +100460,7 @@ focus outline in that case.
   const sprightIconBreakpointEnabled = IconBreakpointEnabled.compose({
       baseName: 'icon-breakpoint-enabled',
       template: template$g,
-      styles: styles$1p
+      styles: styles$1q
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100486,7 +100489,7 @@ focus outline in that case.
   const sprightIconBreakpointExecutionPointer = IconBreakpointExecutionPointer.compose({
       baseName: 'icon-breakpoint-execution-pointer',
       template: template$f,
-      styles: styles$1p
+      styles: styles$1q
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100520,7 +100523,7 @@ focus outline in that case.
   const sprightIconBreakpointHitDisabled = IconBreakpointHitDisabled.compose({
       baseName: 'icon-breakpoint-hit-disabled',
       template: template$e,
-      styles: styles$1p
+      styles: styles$1q
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100554,7 +100557,7 @@ focus outline in that case.
   const sprightIconBreakpointHit = IconBreakpointHit.compose({
       baseName: 'icon-breakpoint-hit',
       template: template$d,
-      styles: styles$1p
+      styles: styles$1q
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
@@ -100584,14 +100587,14 @@ focus outline in that case.
   const sprightIconBreakpointHover = IconBreakpointHover.compose({
       baseName: 'icon-breakpoint-hover',
       template: template$c,
-      styles: styles$1p
+      styles: styles$1q
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconBreakpointHover());
 
-  const styles$h = css `
-    ${styles$1p}
+  const styles$i = css `
+    ${styles$1q}
 
     .icon svg {
         fill: ${calendarEventBorderReservationColor};
@@ -100609,14 +100612,14 @@ focus outline in that case.
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
       template: template$1d,
-      styles: styles$h
+      styles: styles$i
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalendarWeek());
 
-  const styles$g = css `
-    ${styles$1p}
+  const styles$h = css `
+    ${styles$1q}
 
     .icon svg {
         fill: ${calendarEventBorderCalibrationColor};
@@ -100634,14 +100637,14 @@ focus outline in that case.
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
       template: template$1d,
-      styles: styles$g
+      styles: styles$h
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalipers());
 
-  const styles$f = css `
-    ${styles$1p}
+  const styles$g = css `
+    ${styles$1q}
 
     .icon svg {
         fill: ${calendarEventBorderTransportOrderColor};
@@ -100659,14 +100662,14 @@ focus outline in that case.
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
       template: template$1d,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemForklift());
 
-  const styles$e = css `
-    ${styles$1p}
+  const styles$f = css `
+    ${styles$1q}
 
     .icon svg {
         fill: ${calendarEventBorderStaticColor};
@@ -100684,14 +100687,39 @@ focus outline in that case.
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
       template: template$1d,
-      styles: styles$e
+      styles: styles$f
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemRectangleCheckLines());
 
+  const styles$e = css `
+    ${styles$1q}
+
+    .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$1d,
+      styles: styles$e
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('spright')
+      .register(sprightIconWorkItemSquareListCog());
+
   const styles$d = css `
-    ${styles$1p}
+    ${styles$1q}
 
     .icon svg {
         fill: ${calendarEventBorderJobColor};
@@ -100716,7 +100744,7 @@ focus outline in that case.
       .register(sprightIconWorkItemUserHelmetSafety());
 
   const styles$c = css `
-    ${styles$1p}
+    ${styles$1q}
 
     .icon svg {
         fill: ${calendarEventBorderMaintenanceColor};