@ni/nimble-components 33.10.0 → 33.11.1

package/dist/all-components-bundle.js

@@ -74755,12 +74755,37 @@ focus outline in that case.
             rgba(${borderRgbPartialColor}, 0.3);
         margin: ${smallPadding} ${mediumPadding};
     }
+
+    [part='start'] {
+        display: none;
+    }
+
+    [part='end'] {
+        display: none;
+    }
+
+    [part='end'].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>
 `;
 
@@ -74768,13 +74793,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',