@ni/ok-components 0.3.12 → 0.3.13

package/dist/all-components-bundle.js

@@ -14898,9 +14898,9 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$_ = html `<slot></slot>`;
+  const template$$ = html `<slot></slot>`;
 
-  const styles$1l = css `
+  const styles$1m = css `
     ${display$2('contents')}
 `;
 
@@ -15015,8 +15015,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$1l,
-      template: template$_
+      styles: styles$1m,
+      template: template$$
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16658,7 +16658,7 @@
   }
   // #endregion
 
-  const styles$1k = css `
+  const styles$1l = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -16736,7 +16736,7 @@
     }
 `;
 
-  const template$Z = (_context, definition) => html `${
+  const template$_ = (_context, definition) => html `${
 /* top-container div is necessary because setting contenteditable directly on the native anchor instead
    leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.
 */ ''}<div
@@ -16839,8 +16839,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$Z,
-      styles: styles$1k,
+      template: template$_,
+      styles: styles$1l,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16949,7 +16949,7 @@
     padding: 0;
 `;
 
-  const styles$1j = css `
+  const styles$1k = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17233,8 +17233,8 @@
             }
         `));
 
-  const styles$1i = css `
-    ${styles$1j}
+  const styles$1j = css `
+    ${styles$1k}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17254,7 +17254,7 @@
     }
 `;
 
-  const template$Y = (context, definition) => html `
+  const template$Z = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17336,8 +17336,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$Y,
-      styles: styles$1i,
+      template: template$Z,
+      styles: styles$1j,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17345,7 +17345,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$1h = css `
+  const styles$1i = css `
     ${display$2('grid')}
 
     :host {
@@ -17428,7 +17428,7 @@
     }
 `;
 
-  const template$X = (context, definition) => html `
+  const template$Y = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17529,8 +17529,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$X,
-      styles: styles$1h,
+      template: template$Y,
+      styles: styles$1i,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17542,7 +17542,7 @@
 
   // These styles end up inside a @layer block so must use the
   // cssPartial tag instead of the css tag
-  const styles$1g = cssPartial `
+  const styles$1h = cssPartial `
     .severity-text {
         display: none;
         font: ${errorTextFont};
@@ -17652,12 +17652,12 @@
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
   /* eslint-enable max-classes-per-file */
 
-  const styles$1f = css `
+  const styles$1g = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display$2('inline-flex')}
-        ${styles$1g}
+        ${styles$1h}
         :host {
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
@@ -18203,8 +18203,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             }
         `));
 
-  const styles$1e = css `
-    ${styles$1f}
+  const styles$1f = css `
+    ${styles$1g}
     ${'' /* Anchor specific styles */}
     @layer base {
         .control {
@@ -19247,13 +19247,13 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$W = html `<div
+  const template$X = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$1d = css `
+  const styles$1e = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19316,8 +19316,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const registerIconSvg = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$W,
-          styles: styles$1d
+          template: template$X,
+          styles: styles$1e
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19441,7 +19441,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
    */
   const StepperOrientation = Orientation;
 
-  const template$V = (context, definition) => html `
+  const template$W = (context, definition) => html `
     <template slot="step">
         <li class="
             container
@@ -19587,15 +19587,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   ], AnchorStep.prototype, "tabIndex", void 0);
   const nimbleAnchorStep = AnchorStep.compose({
       baseName: 'anchor-step',
-      template: template$V,
-      styles: styles$1e,
+      template: template$W,
+      styles: styles$1f,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
 
-  const styles$1c = css `
+  const styles$1d = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -19712,7 +19712,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$U = (context, definition) => html `
+  const template$V = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -19764,15 +19764,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$U,
-      styles: styles$1c,
+      template: template$V,
+      styles: styles$1d,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$1b = css `
+  const styles$1c = css `
     ${display$2('flex')}
 
     :host {
@@ -19812,12 +19812,12 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const styles$1a = css `
-    ${styles$1j}
+  const styles$1b = css `
+    ${styles$1k}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$T = (context, definition) => html `
+  const template$U = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -19908,8 +19908,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   const nimbleButton = Button$1.compose({
       baseName: 'button',
       baseClass: Button$2,
-      template: template$T,
-      styles: styles$1a,
+      template: template$U,
+      styles: styles$1b,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19943,7 +19943,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   registerIconSvg('icon-arrow-expander-right', IconArrowExpanderRight);
   const iconArrowExpanderRightTag = 'nimble-icon-arrow-expander-right';
 
-  const template$S = (context, definition) => html `
+  const template$T = (context, definition) => html `
     <div
         class="tab-bar"
     >
@@ -20244,15 +20244,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$S,
-      styles: styles$1b,
+      template: template$T,
+      styles: styles$1c,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$19 = css `
+  const styles$1a = css `
     ${display$2('block')}
 
     :host {
@@ -20357,7 +20357,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$R = (context, definition) => html `
+  const template$S = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -20494,8 +20494,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$R,
-      styles: styles$19,
+      template: template$S,
+      styles: styles$1a,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20511,7 +20511,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       zIndex1000: '1000'
   };
 
-  const styles$18 = css `
+  const styles$19 = css `
     ${display$2('block')}
 
     :host {
@@ -20542,14 +20542,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$18
+      styles: styles$19
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  const styles$17 = css `
+  const styles$18 = css `
     ${display$2('flex')}
 
     :host {
@@ -20701,7 +20701,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
       information: 'information'
   };
 
-  const template$Q = html `
+  const template$R = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -20819,8 +20819,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$Q,
-      styles: styles$17
+      template: template$R,
+      styles: styles$18
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -20861,7 +20861,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     </template>
 `;
 
-  const styles$16 = css `
+  const styles$17 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -20965,11 +20965,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$16
+      styles: styles$17
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$15 = css `
+  const styles$16 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -21066,14 +21066,14 @@ so this becomes the fallback color for the slot */ ''}
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$15,
+      styles: styles$16,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$14 = css `
+  const styles$15 = css `
     ${display$2('flex')}
 
     :host {
@@ -21097,7 +21097,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$P = html `
+  const template$Q = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -21112,12 +21112,12 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$P,
-      styles: styles$14
+      template: template$Q,
+      styles: styles$15
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$13 = css `
+  const styles$14 = css `
     ${display$2('inline-flex')}
 
     :host {
@@ -21275,14 +21275,14 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$13,
+      styles: styles$14,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$12 = css `
+  const styles$13 = css `
     .error-icon {
         display: none;
     }
@@ -21316,9 +21316,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$11 = css `
+  const styles$12 = css `
     ${display$2('inline-grid')}
-    ${styles$12}
+    ${styles$13}
 
     :host {
         font: ${bodyFont};
@@ -21457,7 +21457,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$O = (_context, definition) => html `
+  const template$P = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -21542,16 +21542,176 @@ so this becomes the fallback color for the slot */ ''}
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$O,
-      styles: styles$11,
+      template: template$P,
+      styles: styles$12,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
+  const ChipAppearance = {
+      outline: 'outline',
+      block: 'block'
+  };
+
+  const styles$11 = css `
+    ${display$2('inline-flex')}
+
+    :host {
+        height: ${controlHeight};
+        width: fit-content;
+        max-width: 300px;
+        color: ${bodyFontColor};
+        font: ${bodyFont};
+        padding: 0 ${mediumPadding};
+        gap: 4px;
+        background-color: transparent;
+        border: ${borderWidth} solid rgba(${actionRgbPartialColor}, 0.3);
+        border-radius: 4px;
+        justify-content: center;
+        align-items: center;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        color: ${bodyDisabledFontColor};
+        border-color: rgba(${borderRgbPartialColor}, 0.3);
+    }
+
+    :host([disabled]) slot[name='start']::slotted(*) {
+        opacity: 0.3;
+        ${iconColor.cssCustomProperty}: ${bodyFontColor};
+    }
+
+    slot[name='start']::slotted(*) {
+        flex-shrink: 0;
+    }
+
+    [part='start'] {
+        display: contents;
+        ${iconColor.cssCustomProperty}: ${bodyFontColor};
+    }
+
+    .content {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .remove-button {
+        height: ${iconSize};
+        width: ${iconSize};
+        margin-right: calc(-1 * ${smallPadding});
+    }
+
+    [part='end'] {
+        display: none;
+    }
+`.withBehaviors(appearanceBehavior(ChipAppearance.block, css `
+            :host,
+            :host([disabled]) {
+                background-color: rgba(${borderRgbPartialColor}, 0.1);
+                border-color: transparent;
+            }
+        `));
+
+  const template$O = (context, definition) => html `
+    ${startSlotTemplate(context, definition)}
+    <span
+        class="content"
+        part="content"
+        ${overflow('hasOverflow')}
+        title=${x => (x.hasOverflow && x.elementTextContent
+    ? x.elementTextContent
+    : null)}
+    >
+        <slot
+            ${ref('contentSlot')}
+            ${slotted({ property: 'content' })}
+        ></slot>
+    </span>
+    ${when(x => x.removable && !x.disabled, html `
+        <${buttonTag}
+            class="remove-button"
+            content-hidden
+            appearance="${ButtonAppearance.ghost}"
+            tabindex="${x => x.tabIndex}"
+            @click="${x => x.handleRemoveClick()}"
+        >
+            <${iconTimesTag} slot="start"></${iconTimesTag}>
+            ${x => x.removeButtonContent}
+        </${buttonTag}>
+    `)}
+    ${endSlotTemplate(context, definition)}
+`;
+
+  /**
+   * Finds all text content within a slot and returns it as a space-delimited string.
+   */
+  const slotTextContent = (slot) => {
+      return slot
+          .assignedNodes()
+          .map(node => node.textContent?.trim())
+          .filter(content => content !== undefined && content !== '')
+          .join(' ');
+  };
+
+  /**
+   * A Nimble chip component
+   */
+  class Chip extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          this.removable = false;
+          this.disabled = false;
+          this.appearance = ChipAppearance.outline;
+          /** @internal */
+          this.hasOverflow = false;
+      }
+      /** @internal */
+      get elementTextContent() {
+          return slotTextContent(this.contentSlot);
+      }
+      /** @internal */
+      get removeButtonContent() {
+          return itemRemoveLabel.getValueFor(this);
+      }
+      /** @internal */
+      handleRemoveClick() {
+          if (this.removable) {
+              this.$emit('remove');
+          }
+      }
+  }
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], Chip.prototype, "removable", void 0);
+  __decorate([
+      attr({ mode: 'boolean' })
+  ], Chip.prototype, "disabled", void 0);
+  __decorate([
+      attr()
+  ], Chip.prototype, "appearance", void 0);
+  __decorate([
+      attr({ attribute: 'tabindex', converter: nullableNumberConverter })
+  ], Chip.prototype, "tabIndex", void 0);
+  __decorate([
+      observable
+  ], Chip.prototype, "hasOverflow", void 0);
+  applyMixins(Chip, StartEnd);
+  const nimbleChip = Chip.compose({
+      baseName: 'chip',
+      template: template$O,
+      styles: styles$11,
+      shadowOptions: {
+          delegatesFocus: true
+      }
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleChip());
+
   const styles$10 = css `
-    ${styles$1j}
+    ${styles$1k}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -22043,7 +22203,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$Z = css `
     ${styles$$}
-    ${styles$12}
+    ${styles$13}
     ${styles$_}
 
     :host {
@@ -26650,17 +26810,6 @@ so this becomes the fallback color for the slot */ ''}
     </template>
 `;
 
-  /**
-   * Finds all text content within a slot and returns it as a space-delimited string.
-   */
-  const slotTextContent = (slot) => {
-      return slot
-          .assignedNodes()
-          .map(node => node.textContent?.trim())
-          .filter(content => content !== undefined && content !== '')
-          .join(' ');
-  };
-
   /**
    * A nimble-styled HTML listbox option
    */
@@ -27903,7 +28052,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$P = css `
     ${display$2('inline-block')}
-    ${styles$12}
+    ${styles$13}
     ${styles$_}
 
     :host {
@@ -28432,7 +28581,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$N = css `
     ${display$2('inline-block')}
-    ${styles$12}
+    ${styles$13}
     ${styles$_}
 
     .positioning-region {
@@ -48289,7 +48438,7 @@ ${indentedChild}`;
 
   const styles$K = css `
     ${display$2('inline-flex')}
-    ${styles$12}
+    ${styles$13}
 
     :host {
         font: ${bodyFont};
@@ -64873,7 +65022,7 @@ ${nextLine.slice(indentLevel + 2)}`;
 
   const styles$I = css `
     ${styles$$}
-    ${styles$12}
+    ${styles$13}
     ${styles$_}
 
     ${
@@ -66498,7 +66647,7 @@ ${nextLine.slice(indentLevel + 2)}`;
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
   const styles$G = css `
-    ${styles$1f}
+    ${styles$1g}
     ${'' /* Button specific styles */}
     @layer base {
         .control {
@@ -79234,7 +79383,7 @@ focus outline in that case.
       .register(nimbleTableColumnText());
 
   const styles$n = css `
-    ${styles$1b}
+    ${styles$1c}
 
     .tabpanel {
         overflow: auto;
@@ -79315,7 +79464,7 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$S,
+      template: template$T,
       styles: styles$n
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
@@ -79397,7 +79546,7 @@ focus outline in that case.
 
   const styles$l = css `
     ${display$2('inline-flex')}
-    ${styles$12}
+    ${styles$13}
     ${styles$_}
 
     :host {
@@ -79758,7 +79907,7 @@ focus outline in that case.
 
   const styles$k = css `
     ${display$2('inline-block')}
-    ${styles$12}
+    ${styles$13}
     ${styles$_}
 
     :host {
@@ -98445,7 +98594,7 @@ focus outline in that case.
 
   const styles$d = css `
     ${display$1('flex')}
-    ${styles$12}
+    ${styles$13}
 
     :host {
         width: 100%;
@@ -99113,7 +99262,7 @@ focus outline in that case.
   DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessageSystem());
 
   const styles$8 = css `
-    ${styles$1d}
+    ${styles$1e}
 
     .icon svg {
         fill: ${calendarEventBorderReservationColor};
@@ -99130,7 +99279,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalendarWeek = IconWorkItemCalendarWeek.compose({
       baseName: 'icon-work-item-calendar-week',
-      template: template$W,
+      template: template$X,
       styles: styles$8
   });
   DesignSystem.getOrCreate()
@@ -99138,7 +99287,7 @@ focus outline in that case.
       .register(sprightIconWorkItemCalendarWeek());
 
   const styles$7 = css `
-    ${styles$1d}
+    ${styles$1e}
 
     .icon svg {
         fill: ${calendarEventBorderCalibrationColor};
@@ -99155,7 +99304,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemCalipers = IconWorkItemCalipers.compose({
       baseName: 'icon-work-item-calipers',
-      template: template$W,
+      template: template$X,
       styles: styles$7
   });
   DesignSystem.getOrCreate()
@@ -99163,7 +99312,7 @@ focus outline in that case.
       .register(sprightIconWorkItemCalipers());
 
   const styles$6 = css `
-    ${styles$1d}
+    ${styles$1e}
 
     .icon svg {
         fill: ${calendarEventBorderTransportOrderColor};
@@ -99180,7 +99329,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemForklift = IconWorkItemForklift.compose({
       baseName: 'icon-work-item-forklift',
-      template: template$W,
+      template: template$X,
       styles: styles$6
   });
   DesignSystem.getOrCreate()
@@ -99188,7 +99337,7 @@ focus outline in that case.
       .register(sprightIconWorkItemForklift());
 
   const styles$5 = css `
-    ${styles$1d}
+    ${styles$1e}
 
     .icon svg {
         fill: ${calendarEventBorderStaticColor};
@@ -99205,7 +99354,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemRectangleCheckLines = IconWorkItemRectangleCheckLines.compose({
       baseName: 'icon-work-item-rectangle-check-lines',
-      template: template$W,
+      template: template$X,
       styles: styles$5
   });
   DesignSystem.getOrCreate()
@@ -99213,7 +99362,7 @@ focus outline in that case.
       .register(sprightIconWorkItemRectangleCheckLines());
 
   const styles$4 = css `
-    ${styles$1d}
+    ${styles$1e}
 
     .icon svg {
         fill: ${calendarEventBorderJobColor};
@@ -99230,7 +99379,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemUserHelmetSafety = IconWorkItemUserHelmetSafety.compose({
       baseName: 'icon-work-item-user-helmet-safety',
-      template: template$W,
+      template: template$X,
       styles: styles$4
   });
   DesignSystem.getOrCreate()
@@ -99238,7 +99387,7 @@ focus outline in that case.
       .register(sprightIconWorkItemUserHelmetSafety());
 
   const styles$3 = css `
-    ${styles$1d}
+    ${styles$1e}
 
     .icon svg {
         fill: ${calendarEventBorderMaintenanceColor};
@@ -99255,7 +99404,7 @@ focus outline in that case.
   }
   const sprightIconWorkItemWrenchHammer = IconWorkItemWrenchHammer.compose({
       baseName: 'icon-work-item-wrench-hammer',
-      template: template$W,
+      template: template$X,
       styles: styles$3
   });
   DesignSystem.getOrCreate()