@ni/nimble-components 33.9.0 → 33.11.0

package/dist/all-components-bundle.js

@@ -16098,6 +16098,7 @@
       calendarEventBackgroundHoverStaticColor: 'calendar-event-background-hover-static-color',
       calendarEventBackgroundHoverDynamicColor: 'calendar-event-background-hover-dynamic-color',
       calendarEventBackgroundHoverTransientColor: 'calendar-event-background-hover-transient-color',
+      calendarEventOuterBorderHighlightedColor: 'calendar-event-outer-border-highlighted-color',
       calendarRowBackgroundSelectedColor: 'calendar-row-background-selected-color',
       calendarEventFillBlockedColor: 'calendar-event-fill-blocked-color',
       calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color',
@@ -16297,6 +16298,7 @@
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverStaticColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight30, PowerGreen30, PowerGreen30));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverDynamicColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventBackgroundHoverTransientColor)).withDefault((element) => getColorForTheme(element, DigitalGreenDark110, DigitalGreenDark105, DigitalGreenDark105));
+  DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventOuterBorderHighlightedColor)).withDefault((element) => getColorForTheme(element, Black88, hexToRgbaCssColor(White, 0.85), hexToRgbaCssColor(White, 0.85)));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarRowBackgroundSelectedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(DigitalGreenLight, 0.2), hexToRgbaCssColor(PowerGreen, 0.2), hexToRgbaCssColor(PowerGreen, 0.2)));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarEventFillBlockedColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.07), Black82, Black82));
   DesignToken.create(styleNameFromTokenName(tokenNames.calendarGrabHandleBackgroundColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, PowerGreen));
@@ -74753,12 +74755,33 @@ focus outline in that case.
             rgba(${borderRgbPartialColor}, 0.3);
         margin: ${smallPadding} ${mediumPadding};
     }
+
+    [part='start'] {
+        display: none;
+    }
+
+    [part='end'] {
+        margin-left: auto;
+        display: flex;
+    }
 `;
 
-  const template$6 = html `
+  /* eslint-disable @typescript-eslint/indent */
+  // prettier-ignore
+  const template$6 = (context, definition) => html `
     <template slot="end">
-        <div class="separator"></div>
-        <slot></slot>
+        ${when(x => x.defaultSlottedElements.length > 0, html `
+            <div class="separator"></div>
+        `)}
+        ${startSlotTemplate(context, definition)}
+        <slot
+            ${slotted({
+    filter: (n) => n instanceof HTMLElement,
+    property: 'defaultSlottedElements',
+})}
+        >
+        </slot>
+        ${endSlotTemplate(context, definition)}
     </template>
 `;
 
@@ -74766,13 +74789,22 @@ focus outline in that case.
    * A nimble-styled container for toolbar content next to tabs.
    */
   class TabsToolbar extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.defaultSlottedElements = [];
+      }
   }
+  __decorate([
+      observable
+  ], TabsToolbar.prototype, "defaultSlottedElements", void 0);
   const nimbleTabsToolbar = TabsToolbar.compose({
       baseName: 'tabs-toolbar',
       template: template$6,
       styles: styles$7
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
+  applyMixins(TabsToolbar, StartEnd);
 
   const TextAreaAppearance = {
       outline: 'outline',