@ni/ok-components 0.2.21 → 0.3.0

package/dist/all-components-bundle.js

@@ -14903,7 +14903,7 @@
 
   const template$_ = html `<slot></slot>`;
 
-  const styles$1k = css `
+  const styles$1l = css `
     ${display$2('contents')}
 `;
 
@@ -15018,7 +15018,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$1k,
+      styles: styles$1l,
       template: template$_
   });
   DesignSystem.getOrCreate()
@@ -16540,7 +16540,7 @@
   createThemeColorToken(tokenNames.calendarGroupHeaderBackgroundColor, tokenValues.calendarGroupHeaderBackgroundColor);
   createThemeColorToken(tokenNames.calendarEventBackgroundJobColor, tokenValues.calendarEventBackgroundJobColor);
   createThemeColorToken(tokenNames.calendarEventBackgroundHoverJobColor, tokenValues.calendarEventBackgroundHoverJobColor);
-  createThemeColorToken(tokenNames.calendarEventBorderJobColor, tokenValues.calendarEventBorderJobColor);
+  const calendarEventBorderJobColor = createThemeColorToken(tokenNames.calendarEventBorderJobColor, tokenValues.calendarEventBorderJobColor);
   createThemeColorToken(tokenNames.calendarEventJobFontColor, tokenValues.calendarEventJobFontColor);
   createThemeColorToken(tokenNames.calendarEventBackgroundMaintenanceColor, tokenValues.calendarEventBackgroundMaintenanceColor);
   createThemeColorToken(tokenNames.calendarEventBackgroundHoverMaintenanceColor, tokenValues.calendarEventBackgroundHoverMaintenanceColor);
@@ -16661,7 +16661,7 @@
   }
   // #endregion
 
-  const styles$1j = css `
+  const styles$1k = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -16843,7 +16843,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$Z,
-      styles: styles$1j,
+      styles: styles$1k,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16952,7 +16952,7 @@
     padding: 0;
 `;
 
-  const styles$1i = css `
+  const styles$1j = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17236,8 +17236,8 @@
             }
         `));
 
-  const styles$1h = css `
-    ${styles$1i}
+  const styles$1i = css `
+    ${styles$1j}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17340,7 +17340,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$Y,
-      styles: styles$1h,
+      styles: styles$1i,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17348,7 +17348,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$1g = css `
+  const styles$1h = css `
     ${display$2('grid')}
 
     :host {
@@ -17533,7 +17533,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$X,
-      styles: styles$1g,
+      styles: styles$1h,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17545,7 +17545,7 @@
 
   // These styles end up inside a @layer block so must use the
   // cssPartial tag instead of the css tag
-  const styles$1f = cssPartial `
+  const styles$1g = cssPartial `
     .severity-text {
         display: none;
         font: ${errorTextFont};
@@ -17657,12 +17657,12 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$1e = css `
+  const styles$1f = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$2('inline-flex')}
-        ${styles$1f}
+        ${styles$1g}
         :host {
             ${'' /* Based on text layout: Top padding + title height + subtitle height + bottom padding */}
             height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight} + ${smallPadding});
@@ -18077,8 +18077,8 @@
             }
         `));
 
-  const styles$1d = css `
-    ${styles$1e}
+  const styles$1e = css `
+    ${styles$1f}
     ${'' /* Anchor specific styles */}
     @layer base {
         .control {
@@ -19070,6 +19070,10 @@
       name: 'user_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.004 2a2.18 2.18 0 0 1 2.184 2.182v1.09c.647 0 .378.932 0 1.455a4 4 0 0 1-.335.364 9 9 0 0 1-.31.742l.208 1.076h.437l2.75 1.527A2.15 2.15 0 0 1 14 12.291V14H2v-1.673a2.16 2.16 0 0 1 1.063-1.869l2.758-1.55h.437l.21-1.068a9 9 0 0 1-.312-.749 4 4 0 0 1-.335-.364c-.378-.523-.647-1.454 0-1.454v-1.09A2.18 2.18 0 0 1 8.004 2" class="cls-1"/></svg>`,
   };
+  const userHelmetSafety16X16 = {
+      name: 'user_helmet_safety_16_x_16',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 11.95c.9 0 1.72-.31 2.39-.83V14H5.62v-2.88c.66.52 1.49.83 2.39.83Zm3.19-1.31h-.1V14H14v-.48c0-1.59-1.26-2.89-2.81-2.89ZM2 13.52V14h2.91v-3.36h-.1C3.26 10.64 2 11.93 2 13.53Zm6-2.29c1.78 0 3.22-1.48 3.22-3.31V7.4H4.78v.52c0 1.82 1.44 3.31 3.22 3.31m4-4.42v-.73h-.8a3.29 3.29 0 0 0-1.79-2.61v1.8h-.7V3H7.3v2.27h-.7v-1.8a3.28 3.28 0 0 0-1.79 2.61H4v.73h8.01Z" class="cls-1"/></svg>`,
+  };
   const watch16X16 = {
       name: 'watch_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m12.57 7.28-.06.013a4.56 4.56 0 0 0-1.38-2.609V3.44a.48.48 0 0 0-.48-.48h-.48V2H5.85v.96h-.48a.48.48 0 0 0-.48.48v1.24a4.545 4.545 0 0 0 0 6.64v1.24a.48.48 0 0 0 .48.48h.48V14h4.32v-.96h.48a.48.48 0 0 0 .48-.48v-1.24a4.55 4.55 0 0 0 1.379-2.612l.061.012a.48.48 0 0 0 .48-.48v-.48a.48.48 0 0 0-.48-.48m-2.3 2.662a1.6 1.6 0 0 0-.182-.26L8.747 8.338a.79.79 0 0 0 0-.666c.132-.133.894-.899.965-1a1.2 1.2 0 0 0 .14-.485 1 1 0 0 0-.515.157l-.955.957a.784.784 0 1 0 0 1.408c.163.167.956.974 1.236 1.254a1.5 1.5 0 0 0 .36.276 3.055 3.055 0 1 1 .291-.297" class="cls-1"/></svg>`,
@@ -19122,7 +19126,7 @@
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$1c = css `
+  const styles$1d = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19186,7 +19190,7 @@
       const composedIcon = iconClass.compose({
           baseName,
           template: template$W,
-          styles: styles$1c
+          styles: styles$1d
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19374,14 +19378,14 @@
   const nimbleAnchorStep = AnchorStep.compose({
       baseName: 'anchor-step',
       template: template$V,
-      styles: styles$1d,
+      styles: styles$1e,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
 
-  const styles$1b = css `
+  const styles$1c = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19551,14 +19555,14 @@
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
       template: template$U,
-      styles: styles$1b,
+      styles: styles$1c,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$1a = css `
+  const styles$1b = css `
     ${display$2('flex')}
 
     :host {
@@ -19598,8 +19602,8 @@
     }
 `;
 
-  const styles$19 = css `
-    ${styles$1i}
+  const styles$1a = css `
+    ${styles$1j}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -19695,7 +19699,7 @@
       baseName: 'button',
       baseClass: Button$2,
       template: template$T,
-      styles: styles$19,
+      styles: styles$1a,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20095,14 +20099,14 @@
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$S,
-      styles: styles$1a,
+      styles: styles$1b,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$18 = css `
+  const styles$19 = css `
     ${display$2('block')}
 
     :host {
@@ -20345,7 +20349,7 @@
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
       template: template$R,
-      styles: styles$18,
+      styles: styles$19,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20361,7 +20365,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$17 = css `
+  const styles$18 = css `
     ${display$2('block')}
 
     :host {
@@ -20392,14 +20396,14 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$17
+      styles: styles$18
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  const styles$16 = css `
+  const styles$17 = css `
     ${display$2('flex')}
 
     :host {
@@ -20670,7 +20674,7 @@
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$Q,
-      styles: styles$16
+      styles: styles$17
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -20711,7 +20715,7 @@
     </template>
 `;
 
-  const styles$15 = css `
+  const styles$16 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20815,11 +20819,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$15
+      styles: styles$16
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$14 = css `
+  const styles$15 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -20916,14 +20920,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$14,
+      styles: styles$15,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$13 = css `
+  const styles$14 = css `
     ${display$2('flex')}
 
     :host {
@@ -20963,11 +20967,11 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'card',
       baseClass: Card$1,
       template: template$P,
-      styles: styles$13
+      styles: styles$14
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$12 = css `
+  const styles$13 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21125,14 +21129,14 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$12,
+      styles: styles$13,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$11 = css `
+  const styles$12 = css `
     .error-icon {
         display: none;
     }
@@ -21166,9 +21170,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$10 = css `
+  const styles$11 = css `
     ${display$2('inline-grid')}
-    ${styles$11}
+    ${styles$12}
 
     :host {
         font: ${bodyFont};
@@ -21393,15 +21397,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: template$O,
-      styles: styles$10,
+      styles: styles$11,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$$ = css `
-    ${styles$1i}
+  const styles$10 = css `
+    ${styles$1j}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -21544,7 +21548,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$N,
-      styles: styles$$,
+      styles: styles$10,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -21574,7 +21578,7 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$_ = css `
+  const styles$$ = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21864,7 +21868,7 @@ so this becomes the fallback color for the slot */ ''}
             }
         `));
 
-  const styles$Z = css `
+  const styles$_ = css `
     .annotated-label {
         display: flex;
         flex-direction: row;
@@ -21891,10 +21895,10 @@ so this becomes the fallback color for the slot */ ''}
       none: undefined,
       standard: 'standard'};
 
-  const styles$Y = css `
+  const styles$Z = css `
+    ${styles$$}
+    ${styles$12}
     ${styles$_}
-    ${styles$11}
-    ${styles$Z}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -22791,7 +22795,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
       template: template$M,
-      styles: styles$Y,
+      styles: styles$Z,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -22835,7 +22839,7 @@ so this becomes the fallback color for the slot */ ''}
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$X = css `
+  const styles$Y = css `
     ${display$2('grid')}
 
     dialog {
@@ -23077,12 +23081,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
       template: template$L,
-      styles: styles$X,
+      styles: styles$Y,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$W = css `
+  const styles$X = css `
     ${display$2('block')}
 
     :host {
@@ -23368,7 +23372,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$K,
-      styles: styles$W
+      styles: styles$X
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -25954,6 +25958,18 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIconSvg('icon-user', IconUser);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'userHelmetSafety' icon
+   */
+  class IconUserHelmetSafety extends IconSvg {
+      constructor() {
+          super(userHelmetSafety16X16);
+      }
+  }
+  registerIconSvg('icon-user-helmet-safety', IconUserHelmetSafety);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -26139,7 +26155,7 @@ so this becomes the fallback color for the slot */ ''}
       }
   }
 
-  const styles$V = css `
+  const styles$W = css `
     ${display$2('none')}
 `;
 
@@ -26204,7 +26220,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$V
+      styles: styles$W
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26371,13 +26387,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$V
+      styles: styles$W
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$U = css `
+  const styles$V = css `
     ${display$2('flex')}
 
     :host {
@@ -26567,12 +26583,12 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: template$J,
-      styles: styles$U
+      styles: styles$V
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
-  const styles$T = css `
+  const styles$U = css `
     ${display$2('flex')}
 
     :host {
@@ -26777,7 +26793,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'list-option-group',
       baseClass: FoundationElement,
       template: template$I,
-      styles: styles$T
+      styles: styles$U
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -26806,7 +26822,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const template$H = html `<template slot="mapping"></template>`;
 
-  const styles$S = css `
+  const styles$T = css `
     ${display$2('none')}
 `;
 
@@ -26823,7 +26839,7 @@ so this becomes the fallback color for the slot */ ''}
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
       template: template$H,
-      styles: styles$S
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -26894,7 +26910,7 @@ so this becomes the fallback color for the slot */ ''}
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
       template: template$H,
-      styles: styles$S
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -26918,7 +26934,7 @@ so this becomes the fallback color for the slot */ ''}
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
       template: template$H,
-      styles: styles$S
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -26935,7 +26951,7 @@ so this becomes the fallback color for the slot */ ''}
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
       template: template$H,
-      styles: styles$S
+      styles: styles$T
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
@@ -27254,7 +27270,7 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  const styles$R = css `
+  const styles$S = css `
     ${display$2('grid')}
 
     :host {
@@ -27326,7 +27342,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu',
       baseClass: Menu$1,
       template: template$G,
-      styles: styles$R
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -27341,7 +27357,7 @@ so this becomes the fallback color for the slot */ ''}
       auto: 'auto'
   };
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display$2('inline-block')}
 
     :host {
@@ -27610,7 +27626,7 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$F,
-      styles: styles$Q,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -27618,7 +27634,7 @@ so this becomes the fallback color for the slot */ ''}
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$P = css `
+  const styles$Q = css `
     ${display$2('grid')}
 
     :host {
@@ -27715,7 +27731,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$P,
+      styles: styles$Q,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -27730,10 +27746,10 @@ so this becomes the fallback color for the slot */ ''}
       frameless: 'frameless'
   };
 
-  const styles$O = css `
+  const styles$P = css `
     ${display$2('inline-block')}
-    ${styles$11}
-    ${styles$Z}
+    ${styles$12}
+    ${styles$_}
 
     :host {
         font: ${bodyFont};
@@ -28111,7 +28127,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: template$E,
-      styles: styles$O,
+      styles: styles$P,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -28154,7 +28170,7 @@ so this becomes the fallback color for the slot */ ''}
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$N = css `
+  const styles$O = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -28254,15 +28270,15 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$N,
+      styles: styles$O,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$M = css `
+  const styles$N = css `
     ${display$2('inline-block')}
-    ${styles$11}
-    ${styles$Z}
+    ${styles$12}
+    ${styles$_}
 
     .positioning-region {
         display: flex;
@@ -28342,7 +28358,7 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: template$D,
-      styles: styles$M,
+      styles: styles$N,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -47539,7 +47555,7 @@ ${renderedContent}
   // src/index.ts
   var index_default$7 = HardBreak;
 
-  const styles$L = css `
+  const styles$M = css `
     ${display$2('inline')}
 
     .positioning-region {
@@ -47576,7 +47592,7 @@ ${renderedContent}
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$L
+      styles: styles$M
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToolbar());
   const toolbarTag = 'nimble-toolbar';
@@ -47605,8 +47621,8 @@ ${renderedContent}
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$K = css `
-    ${styles$_}
+  const styles$L = css `
+    ${styles$$}
 
     :host {
         height: auto;
@@ -47913,7 +47929,7 @@ ${renderedContent}
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
       template: template$C,
-      styles: styles$K
+      styles: styles$L
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -48022,9 +48038,9 @@ ${renderedContent}
     </template>
 `;
 
-  const styles$J = css `
+  const styles$K = css `
     ${display$2('inline-flex')}
-    ${styles$11}
+    ${styles$12}
 
     :host {
         font: ${bodyFont};
@@ -64410,7 +64426,7 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
       template: template$B,
-      styles: styles$J,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -64425,7 +64441,7 @@ ${nextLine.slice(indentLevel + 2)}`;
     </template>
 `;
 
-  const styles$I = css `
+  const styles$J = css `
     ${display$2('flex')}
 
     :host {
@@ -64539,16 +64555,16 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
       template: template$A,
-      styles: styles$I
+      styles: styles$J
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
 
-  const styles$H = css `
+  const styles$I = css `
+    ${styles$$}
+    ${styles$12}
     ${styles$_}
-    ${styles$11}
-    ${styles$Z}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -64711,7 +64727,7 @@ ${nextLine.slice(indentLevel + 2)}`;
             }
         `));
 
-  const styles$G = css `
+  const styles$H = css `
     ${display$2('inline-grid')}
 
     :host {
@@ -64929,7 +64945,7 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
       template: template$z,
-      styles: styles$G
+      styles: styles$H
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   const spinnerTag = 'nimble-spinner';
@@ -66158,7 +66174,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       baseName: 'select',
       baseClass: Select$2,
       template: template$y,
-      styles: styles$H,
+      styles: styles$I,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -66171,8 +66187,8 @@ ${nextLine.slice(indentLevel + 2)}`;
   applyMixins(Select, StartEnd, DelegatesARIASelect);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-  const styles$F = css `
-    ${styles$1e}
+  const styles$G = css `
+    ${styles$1f}
     ${'' /* Button specific styles */}
     @layer base {
         .control {
@@ -66300,14 +66316,14 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleStep = Step.compose({
       baseName: 'step',
       template: template$x,
-      styles: styles$F,
+      styles: styles$G,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
 
-  const styles$E = css `
+  const styles$F = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -66349,11 +66365,11 @@ ${nextLine.slice(indentLevel + 2)}`;
   const nimbleStepper = Stepper.compose({
       baseName: 'stepper',
       template: template$w,
-      styles: styles$E
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());
 
-  const styles$D = css `
+  const styles$E = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -66625,11 +66641,11 @@ ${nextLine.slice(indentLevel + 2)}`;
       baseClass: Switch$1,
       baseName: 'switch',
       template: template$v,
-      styles: styles$D
+      styles: styles$E
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-  const styles$C = css `
+  const styles$D = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -66740,11 +66756,11 @@ ${nextLine.slice(indentLevel + 2)}`;
       baseName: 'tab',
       baseClass: Tab$1,
       template: tabTemplate,
-      styles: styles$C
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-  const styles$B = css `
+  const styles$C = css `
     ${display$2('block')}
 
     :host {
@@ -66763,7 +66779,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       baseName: 'tab-panel',
       baseClass: TabPanel$1,
       template: tabPanelTemplate,
-      styles: styles$B
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -70489,7 +70505,7 @@ ${nextLine.slice(indentLevel + 2)}`;
       }
   }
 
-  const styles$A = css `
+  const styles$B = css `
     ${display$2('flex')}
 
     :host {
@@ -70709,7 +70725,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$z = css `
+  const styles$A = css `
     ${display$2('flex')}
 
     :host {
@@ -70829,12 +70845,12 @@ focus outline in that case.
   const nimbleTableHeader = TableHeader.compose({
       baseName: 'table-header',
       template: template$u,
-      styles: styles$z
+      styles: styles$A
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
   const tableHeaderTag = 'nimble-table-header';
 
-  const styles$y = css `
+  const styles$z = css `
     :host .animating {
         transition: ${mediumDelay} ease-in;
     }
@@ -70859,9 +70875,9 @@ focus outline in that case.
     }
 `;
 
-  const styles$x = css `
+  const styles$y = css `
     ${display$2('flex')}
-    ${styles$y}
+    ${styles$z}
 
     :host {
         width: fit-content;
@@ -71031,7 +71047,7 @@ focus outline in that case.
             }
         `));
 
-  const styles$w = css `
+  const styles$x = css `
     ${display$2('flex')}
 
     :host {
@@ -71174,7 +71190,7 @@ focus outline in that case.
   const nimbleTableCell = TableCell.compose({
       baseName: 'table-cell',
       template: template$t,
-      styles: styles$w
+      styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
   const tableCellTag = 'nimble-table-cell';
@@ -71580,14 +71596,14 @@ focus outline in that case.
   const nimbleTableRow = TableRow.compose({
       baseName: 'table-row',
       template: template$s,
-      styles: styles$x
+      styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
   const tableRowTag = 'nimble-table-row';
 
-  const styles$v = css `
+  const styles$w = css `
     ${display$2('grid')}
-    ${styles$y}
+    ${styles$z}
 
     :host {
         align-items: center;
@@ -71833,7 +71849,7 @@ focus outline in that case.
   const nimbleTableGroupRow = TableGroupRow.compose({
       baseName: 'table-group-row',
       template: template$r,
-      styles: styles$v
+      styles: styles$w
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());
   const tableGroupRowTag = 'nimble-table-group-row';
@@ -76103,11 +76119,11 @@ focus outline in that case.
   const nimbleTable = Table$1.compose({
       baseName: 'table',
       template: template$q,
-      styles: styles$A
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
-  const styles$u = css `
+  const styles$v = css `
     ${display$2('contents')}
 
     .header-content {
@@ -76184,7 +76200,7 @@ focus outline in that case.
       return ColumnWithPlaceholder;
   }
 
-  const styles$t = css `
+  const styles$u = css `
     ${display$2('flex')}
 
     :host {
@@ -76308,7 +76324,7 @@ focus outline in that case.
   const anchorCellView = TableColumnAnchorCellView.compose({
       baseName: 'table-column-anchor-cell-view',
       template: template$o,
-      styles: styles$t
+      styles: styles$u
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(anchorCellView());
   const tableColumnAnchorCellViewTag = 'nimble-table-column-anchor-cell-view';
@@ -76394,7 +76410,7 @@ focus outline in that case.
     </span>
 `;
 
-  const styles$s = css `
+  const styles$t = css `
     ${display$2('flex')}
 
     span {
@@ -76419,7 +76435,7 @@ focus outline in that case.
   const tableColumnTextGroupHeaderView = TableColumnTextGroupHeaderView.compose({
       baseName: 'table-column-text-group-header-view',
       template: template$n,
-      styles: styles$s
+      styles: styles$t
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -76664,7 +76680,7 @@ focus outline in that case.
   const nimbleTableColumnAnchor = TableColumnAnchor.compose({
       baseName: 'table-column-anchor',
       template: template$p,
-      styles: styles$u
+      styles: styles$v
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -76717,7 +76733,7 @@ focus outline in that case.
   const tableColumnDateTextGroupHeaderView = TableColumnDateTextGroupHeaderView.compose({
       baseName: 'table-column-date-text-group-header-view',
       template: template$n,
-      styles: styles$s
+      styles: styles$t
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -76740,7 +76756,7 @@ focus outline in that case.
     </template>
 `;
 
-  const styles$r = css `
+  const styles$s = css `
     ${display$2('flex')}
 
     :host {
@@ -76843,7 +76859,7 @@ focus outline in that case.
   const dateTextCellView = TableColumnDateTextCellView.compose({
       baseName: 'table-column-date-text-cell-view',
       template: template$m,
-      styles: styles$r
+      styles: styles$s
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(dateTextCellView());
   const tableColumnDateTextCellViewTag = 'nimble-table-column-date-text-cell-view';
@@ -77102,7 +77118,7 @@ focus outline in that case.
   const nimbleTableColumnDateText = TableColumnDateText.compose({
       baseName: 'table-column-date-text',
       template: template$p,
-      styles: styles$u
+      styles: styles$v
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77119,7 +77135,7 @@ focus outline in that case.
   const durationTextCellView = TableColumnDurationTextCellView.compose({
       baseName: 'table-column-duration-text-cell-view',
       template: template$m,
-      styles: styles$r
+      styles: styles$s
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77221,7 +77237,7 @@ focus outline in that case.
   const tableColumnDurationTextGroupHeaderView = TableColumnDurationTextGroupHeaderView.compose({
       baseName: 'table-column-duration-text-group-header-view',
       template: template$n,
-      styles: styles$s
+      styles: styles$t
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77274,7 +77290,7 @@ focus outline in that case.
   const nimbleTableColumnDurationText = TableColumnDurationText.compose({
       baseName: 'table-column-duration-text',
       template: template$p,
-      styles: styles$u
+      styles: styles$v
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77382,8 +77398,8 @@ focus outline in that case.
       attr({ attribute: 'key-type' })
   ], TableColumnEnumBase.prototype, "keyType", void 0);
 
-  const styles$q = css `
-    ${styles$u}
+  const styles$r = css `
+    ${styles$v}
 
     slot[name='mapping'] {
         display: none;
@@ -77476,7 +77492,7 @@ focus outline in that case.
       }
   }
 
-  const styles$p = css `
+  const styles$q = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -77645,14 +77661,14 @@ focus outline in that case.
   const mappingGroupHeaderView = TableColumnMappingGroupHeaderView.compose({
       baseName: 'table-column-mapping-group-header-view',
       template: template$k,
-      styles: styles$p
+      styles: styles$q
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(mappingGroupHeaderView());
   const tableColumnMappingGroupHeaderViewTag = 'nimble-table-column-mapping-group-header-view';
 
-  const styles$o = css `
+  const styles$p = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -77764,7 +77780,7 @@ focus outline in that case.
   const mappingCellView = TableColumnMappingCellView.compose({
       baseName: 'table-column-mapping-cell-view',
       template: template$j,
-      styles: styles$o
+      styles: styles$p
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(mappingCellView());
   const tableColumnMappingCellViewTag = 'nimble-table-column-mapping-cell-view';
@@ -77848,7 +77864,7 @@ focus outline in that case.
   const nimbleTableColumnMapping = TableColumnMapping.compose({
       baseName: 'table-column-mapping',
       template: template$l,
-      styles: styles$q
+      styles: styles$r
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -77882,7 +77898,7 @@ focus outline in that case.
     `)}
 `;
 
-  const styles$n = css `
+  const styles$o = css `
     :host {
         align-self: center;
         width: 100%;
@@ -77958,7 +77974,7 @@ focus outline in that case.
   const menuButtonCellView = TableColumnMenuButtonCellView.compose({
       baseName: 'table-column-menu-button-cell-view',
       template: template$h,
-      styles: styles$n
+      styles: styles$o
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(menuButtonCellView());
   const tableColumnMenuButtonCellViewTag = 'nimble-table-column-menu-button-cell-view';
@@ -78014,7 +78030,7 @@ focus outline in that case.
   const nimbleTableColumnMenuButton = TableColumnMenuButton.compose({
       baseName: 'table-column-menu-button',
       template: template$i,
-      styles: styles$u
+      styles: styles$v
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78042,7 +78058,7 @@ focus outline in that case.
   const tableColumnNumberTextGroupHeaderView = TableColumnNumberTextGroupHeaderView.compose({
       baseName: 'table-column-number-text-group-header-view',
       template: template$n,
-      styles: styles$s
+      styles: styles$t
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78064,7 +78080,7 @@ focus outline in that case.
   const numberTextCellView = TableColumnNumberTextCellView.compose({
       baseName: 'table-column-number-text-cell-view',
       template: template$m,
-      styles: styles$r
+      styles: styles$s
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(numberTextCellView());
   const tableColumnNumberTextCellViewTag = 'nimble-table-column-number-text-cell-view';
@@ -78605,7 +78621,7 @@ focus outline in that case.
   const nimbleTableColumnNumberText = TableColumnNumberText.compose({
       baseName: 'table-column-number-text',
       template: template$g,
-      styles: styles$u
+      styles: styles$v
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -78624,7 +78640,7 @@ focus outline in that case.
   const textCellView = TableColumnTextCellView.compose({
       baseName: 'table-column-text-cell-view',
       template: template$m,
-      styles: styles$r
+      styles: styles$s
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textCellView());
   const tableColumnTextCellViewTag = 'nimble-table-column-text-cell-view';
@@ -78679,14 +78695,14 @@ focus outline in that case.
   const nimbleTableColumnText = TableColumnText.compose({
       baseName: 'table-column-text',
       template: template$p,
-      styles: styles$u
+      styles: styles$v
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleTableColumnText());
 
-  const styles$m = css `
-    ${styles$1a}
+  const styles$n = css `
+    ${styles$1b}
 
     .tabpanel {
         overflow: auto;
@@ -78768,11 +78784,11 @@ focus outline in that case.
       baseName: 'tabs',
       baseClass: Tabs$1,
       template: template$S,
-      styles: styles$m
+      styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 
-  const styles$l = css `
+  const styles$m = css `
     ${display$2('flex')}
 
     :host {
@@ -78837,7 +78853,7 @@ focus outline in that case.
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
       template: template$f,
-      styles: styles$l
+      styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
   applyMixins(TabsToolbar, StartEnd);
@@ -78847,10 +78863,10 @@ focus outline in that case.
       block: 'block'
   };
 
-  const styles$k = css `
+  const styles$l = css `
     ${display$2('inline-flex')}
-    ${styles$11}
-    ${styles$Z}
+    ${styles$12}
+    ${styles$_}
 
     :host {
         font: ${bodyFont};
@@ -79191,7 +79207,7 @@ focus outline in that case.
       baseName: 'text-area',
       baseClass: TextArea$1,
       template: template$e,
-      styles: styles$k,
+      styles: styles$l,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -79208,10 +79224,10 @@ focus outline in that case.
       frameless: 'frameless'
   };
 
-  const styles$j = css `
+  const styles$k = css `
     ${display$2('inline-block')}
-    ${styles$11}
-    ${styles$Z}
+    ${styles$12}
+    ${styles$_}
 
     :host {
         font: ${bodyFont};
@@ -79571,7 +79587,7 @@ focus outline in that case.
       baseName: 'text-field',
       baseClass: TextField$1,
       template: template$d,
-      styles: styles$j,
+      styles: styles$k,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -79588,7 +79604,7 @@ focus outline in that case.
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 
-  const styles$i = css `
+  const styles$j = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -79727,7 +79743,7 @@ focus outline in that case.
       baseName: 'tooltip',
       baseClass: Tooltip$1,
       template: template$c,
-      styles: styles$i
+      styles: styles$j
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
 
@@ -79815,7 +79831,7 @@ focus outline in that case.
       }
   }
 
-  const styles$h = css `
+  const styles$i = css `
     ${display$2('block')}
 
     :host {
@@ -80032,12 +80048,12 @@ focus outline in that case.
       baseName: 'tree-item',
       baseClass: TreeItem$1,
       template: treeItemTemplate,
-      styles: styles$h,
+      styles: styles$i,
       expandCollapseGlyph: arrowExpanderUp16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeItem());
 
-  const styles$g = css `
+  const styles$h = css `
     ${display$2('flex')}
 
     :host {
@@ -80148,7 +80164,7 @@ focus outline in that case.
       baseName: 'tree-view',
       baseClass: TreeView$1,
       template: template$b,
-      styles: styles$g
+      styles: styles$h
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTreeView());
 
@@ -80266,7 +80282,7 @@ focus outline in that case.
 
   const template$a = html `<template slot="unit"></template>`;
 
-  const styles$f = css `
+  const styles$g = css `
     ${display$2('none')}
 `;
 
@@ -80295,7 +80311,7 @@ focus outline in that case.
   const nimbleUnitByte = UnitByte.compose({
       baseName: 'unit-byte',
       template: template$a,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 
@@ -80348,7 +80364,7 @@ focus outline in that case.
   const nimbleUnitVolt = UnitVolt.compose({
       baseName: 'unit-volt',
       template: template$a,
-      styles: styles$f
+      styles: styles$g
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 
@@ -94695,7 +94711,7 @@ focus outline in that case.
     </div>
 `;
 
-  const styles$e = css `
+  const styles$f = css `
     ${display$2('inline-block')}
 
     :host {
@@ -97721,7 +97737,7 @@ focus outline in that case.
   const nimbleWaferMap = WaferMap.compose({
       baseName: 'wafer-map',
       template: template$9,
-      styles: styles$e
+      styles: styles$f
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleWaferMap());
 
@@ -97733,7 +97749,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$d = css `
+  const styles$e = css `
     ${display$1('flex')}
 
     :host {
@@ -97858,15 +97874,15 @@ focus outline in that case.
   const sprightChatConversation = ChatConversation.compose({
       baseName: 'chat-conversation',
       template: template$8,
-      styles: styles$d
+      styles: styles$e
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightChatConversation());
 
-  const styles$c = css `
+  const styles$d = css `
     ${display$1('flex')}
-    ${styles$11}
+    ${styles$12}
 
     :host {
         width: 100%;
@@ -98169,7 +98185,7 @@ focus outline in that case.
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
       template: template$7,
-      styles: styles$c,
+      styles: styles$d,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -98187,7 +98203,7 @@ focus outline in that case.
       inbound: 'inbound'
   };
 
-  const styles$b = css `
+  const styles$c = css `
     ${display$1('flex')}
 
     :host {
@@ -98311,11 +98327,11 @@ focus outline in that case.
   const sprightChatMessage = ChatMessage.compose({
       baseName: 'chat-message',
       template: template$6,
-      styles: styles$b
+      styles: styles$c
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
 
-  const styles$a = css `
+  const styles$b = css `
     ${display$1('flex')}
 
     :host {
@@ -98412,11 +98428,11 @@ focus outline in that case.
   const sprightChatMessageInbound = ChatMessageInbound.compose({
       baseName: 'chat-message-inbound',
       template: template$5,
-      styles: styles$a
+      styles: styles$b
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageInbound());
 
-  const styles$9 = css `
+  const styles$a = css `
     ${display$1('flex')}
 
     :host {
@@ -98466,11 +98482,11 @@ focus outline in that case.
   const sprightChatMessageOutbound = ChatMessageOutbound.compose({
       baseName: 'chat-message-outbound',
       template: template$4,
-      styles: styles$9
+      styles: styles$a
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageOutbound());
 
-  const styles$8 = css `
+  const styles$9 = css `
     ${display$1('flex')}
 
     :host {
@@ -98513,12 +98529,12 @@ focus outline in that case.
   const sprightChatMessageSystem = ChatMessageSystem.compose({
       baseName: 'chat-message-system',
       template: template$3,
-      styles: styles$8
+      styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
 
-  const styles$7 = css `
-    ${styles$1c}
+  const styles$8 = css `
+    ${styles$1d}
 
     .icon svg {
         fill: ${calendarEventBorderReservationColor};
@@ -98536,14 +98552,14 @@ focus outline in that case.
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
       template: template$W,
-      styles: styles$7
+      styles: styles$8
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalendarWeek());
 
-  const styles$6 = css `
-    ${styles$1c}
+  const styles$7 = css `
+    ${styles$1d}
 
     .icon svg {
         fill: ${calendarEventBorderCalibrationColor};
@@ -98561,14 +98577,14 @@ focus outline in that case.
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
       template: template$W,
-      styles: styles$6
+      styles: styles$7
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemCalipers());
 
-  const styles$5 = css `
-    ${styles$1c}
+  const styles$6 = css `
+    ${styles$1d}
 
     .icon svg {
         fill: ${calendarEventBorderTransportOrderColor};
@@ -98586,14 +98602,14 @@ focus outline in that case.
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
       template: template$W,
-      styles: styles$5
+      styles: styles$6
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemForklift());
 
-  const styles$4 = css `
-    ${styles$1c}
+  const styles$5 = css `
+    ${styles$1d}
 
     .icon svg {
         fill: ${calendarEventBorderStaticColor};
@@ -98611,14 +98627,39 @@ focus outline in that case.
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
       template: template$W,
-      styles: styles$4
+      styles: styles$5
   });
   DesignSystem.getOrCreate()
       .withPrefix('spright')
       .register(sprightIconWorkItemRectangleCheckLines());
 
+  const styles$4 = css `
+    ${styles$1d}
+
+    .icon svg {
+        fill: ${calendarEventBorderJobColor};
+    }
+`;
+
+  /**
+   * Spright user helmet safety icon for work items
+   */
+  class IconWorkItemUserHelmetSafety extends IconSvg {
+      constructor() {
+          super(userHelmetSafety16X16);
+      }
+  }
+  const sprightIconWorkItemUserHelmetSafety = IconWorkItemUserHelmetSafety.compose({
+      baseName: 'icon-work-item-user-helmet-safety',
+      template: template$W,
+      styles: styles$4
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('spright')
+      .register(sprightIconWorkItemUserHelmetSafety());
+
   const styles$3 = css `
-    ${styles$1c}
+    ${styles$1d}
 
     .icon svg {
         fill: ${calendarEventBorderMaintenanceColor};