@ni/nimble-components 35.5.8 → 35.6.0

package/dist/all-components-bundle.js

@@ -14898,9 +14898,9 @@
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-  const template$R = html `<slot></slot>`;
+  const template$S = html `<slot></slot>`;
 
-  const styles$16 = css `
+  const styles$17 = css `
     ${display('contents')}
 `;
 
@@ -15015,8 +15015,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$16,
-      template: template$R
+      styles: styles$17,
+      template: template$S
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -16658,7 +16658,7 @@
   }
   // #endregion
 
-  const styles$15 = css `
+  const styles$16 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -16736,7 +16736,7 @@
     }
 `;
 
-  const template$Q = (_context, definition) => html `${
+  const template$R = (_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$Q,
-      styles: styles$15,
+      template: template$R,
+      styles: styles$16,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -16949,7 +16949,7 @@
     padding: 0;
 `;
 
-  const styles$14 = css `
+  const styles$15 = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17233,8 +17233,8 @@
             }
         `));
 
-  const styles$13 = css `
-    ${styles$14}
+  const styles$14 = css `
+    ${styles$15}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17254,7 +17254,7 @@
     }
 `;
 
-  const template$P = (context, definition) => html `
+  const template$Q = (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$P,
-      styles: styles$13,
+      template: template$Q,
+      styles: styles$14,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17345,7 +17345,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$12 = css `
+  const styles$13 = css `
     ${display('grid')}
 
     :host {
@@ -17428,7 +17428,7 @@
     }
 `;
 
-  const template$O = (context, definition) => html `
+  const template$P = (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$O,
-      styles: styles$12,
+      template: template$P,
+      styles: styles$13,
       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$11 = cssPartial `
+  const styles$12 = 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$10 = css `
+  const styles$11 = css `
     @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display('inline-flex')}
-        ${styles$11}
+        ${styles$12}
         :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$$ = css `
-    ${styles$10}
+  const styles$10 = css `
+    ${styles$11}
     ${'' /* 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$N = html `<div
+  const template$O = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$_ = css `
+  const styles$$ = css `
     ${display('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$N,
-          styles: styles$_
+          template: template$O,
+          styles: styles$$
       });
       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$M = (context, definition) => html `
+  const template$N = (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$M,
-      styles: styles$$,
+      template: template$N,
+      styles: styles$10,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());
 
-  const styles$Z = css `
+  const styles$_ = css `
     ${display('inline-flex')}
 
     :host {
@@ -19712,7 +19712,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$L = (context, definition) => html `
+  const template$M = (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$L,
-      styles: styles$Z,
+      template: template$M,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$Y = css `
+  const styles$Z = css `
     ${display('flex')}
 
     :host {
@@ -19812,12 +19812,12 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const styles$X = css `
-    ${styles$14}
+  const styles$Y = css `
+    ${styles$15}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$K = (context, definition) => html `
+  const template$L = (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.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$K,
-      styles: styles$X,
+      template: template$L,
+      styles: styles$Y,
       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$J = (context, definition) => html `
+  const template$K = (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$J,
-      styles: styles$Y,
+      template: template$K,
+      styles: styles$Z,
       shadowOptions: {
           delegatesFocus: false
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
 
-  const styles$W = css `
+  const styles$X = css `
     ${display('block')}
 
     :host {
@@ -20357,7 +20357,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     }
 `;
 
-  const template$I = (context, definition) => html `
+  const template$J = (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$I,
-      styles: styles$W,
+      template: template$J,
+      styles: styles$X,
       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$V = css `
+  const styles$W = css `
     ${display('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$V
+      styles: styles$W
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchoredRegion());
   const anchoredRegionTag = 'nimble-anchored-region';
 
-  const styles$U = css `
+  const styles$V = css `
     ${display('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$H = html `
+  const template$I = 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$H,
-      styles: styles$U
+      template: template$I,
+      styles: styles$V
   });
   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$T = css `
+  const styles$U = css `
     ${display('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$T
+      styles: styles$U
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$S = css `
+  const styles$T = 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$S,
+      styles: styles$T,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$R = css `
+  const styles$S = css `
     ${display('flex')}
 
     :host {
@@ -21097,7 +21097,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const template$G = html `
+  const template$H = 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$G,
-      styles: styles$R
+      template: template$H,
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$Q = css `
+  const styles$R = css `
     ${display('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$Q,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$P = css `
+  const styles$Q = css `
     .error-icon {
         display: none;
     }
@@ -21316,9 +21316,9 @@ so this becomes the fallback color for the slot */ ''}
     }
 `;
 
-  const styles$O = css `
+  const styles$P = css `
     ${display('inline-grid')}
-    ${styles$P}
+    ${styles$Q}
 
     :host {
         font: ${bodyFont};
@@ -21457,7 +21457,7 @@ so this becomes the fallback color for the slot */ ''}
     </div>
 `;
 
-  const template$F = (_context, definition) => html `
+  const template$G = (_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$F,
-      styles: styles$O,
+      template: template$G,
+      styles: styles$P,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
+  const ChipAppearance = {
+      outline: 'outline',
+      block: 'block'
+  };
+
+  const styles$O = css `
+    ${display('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$F = (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$F,
+      styles: styles$O,
+      shadowOptions: {
+          delegatesFocus: true
+      }
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleChip());
+
   const styles$N = css `
-    ${styles$14}
+    ${styles$15}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -22043,7 +22203,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$K = css `
     ${styles$M}
-    ${styles$P}
+    ${styles$Q}
     ${styles$L}
 
     :host {
@@ -26648,17 +26808,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
    */
@@ -27901,7 +28050,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$A = css `
     ${display('inline-block')}
-    ${styles$P}
+    ${styles$Q}
     ${styles$L}
 
     :host {
@@ -28430,7 +28579,7 @@ so this becomes the fallback color for the slot */ ''}
 
   const styles$y = css `
     ${display('inline-block')}
-    ${styles$P}
+    ${styles$Q}
     ${styles$L}
 
     .positioning-region {
@@ -48287,7 +48436,7 @@ ${indentedChild}`;
 
   const styles$v = css `
     ${display('inline-flex')}
-    ${styles$P}
+    ${styles$Q}
 
     :host {
         font: ${bodyFont};
@@ -64871,7 +65020,7 @@ ${nextLine.slice(indentLevel + 2)}`;
 
   const styles$t = css `
     ${styles$M}
-    ${styles$P}
+    ${styles$Q}
     ${styles$L}
 
     ${
@@ -66496,7 +66645,7 @@ ${nextLine.slice(indentLevel + 2)}`;
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
   const styles$r = css `
-    ${styles$10}
+    ${styles$11}
     ${'' /* Button specific styles */}
     @layer base {
         .control {
@@ -79232,7 +79381,7 @@ focus outline in that case.
       .register(nimbleTableColumnText());
 
   const styles$8 = css `
-    ${styles$Y}
+    ${styles$Z}
 
     .tabpanel {
         overflow: auto;
@@ -79313,7 +79462,7 @@ focus outline in that case.
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: template$J,
+      template: template$K,
       styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
@@ -79395,7 +79544,7 @@ focus outline in that case.
 
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$P}
+    ${styles$Q}
     ${styles$L}
 
     :host {
@@ -79756,7 +79905,7 @@ focus outline in that case.
 
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$P}
+    ${styles$Q}
     ${styles$L}
 
     :host {