@ni/nimble-components 20.14.9 → 20.14.10

package/dist/all-components-bundle.js

@@ -10270,30 +10270,6 @@
     return isNodeMatchingSelectorFocusable(options, node);
   };
 
-  /**
-   * The template for the {@link @microsoft/fast-foundation#(ListboxOption:class)} component.
-   * @public
-   */
-  const listboxOptionTemplate = (context, definition) => html `
-    <template
-        aria-checked="${x => x.ariaChecked}"
-        aria-disabled="${x => x.ariaDisabled}"
-        aria-posinset="${x => x.ariaPosInSet}"
-        aria-selected="${x => x.ariaSelected}"
-        aria-setsize="${x => x.ariaSetSize}"
-        class="${x => [x.checked && "checked", x.selected && "selected", x.disabled && "disabled"]
-    .filter(Boolean)
-    .join(" ")}"
-        role="option"
-    >
-        ${startSlotTemplate(context, definition)}
-        <span class="content" part="content">
-            <slot ${slotted("content")}></slot>
-        </span>
-        ${endSlotTemplate(context, definition)}
-    </template>
-`;
-
   /**
    * A Listbox Custom HTML Element.
    * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox }.
@@ -16298,7 +16274,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 23 Nov 2023 07:56:58 GMT
+   * Generated on Mon, 27 Nov 2023 15:57:15 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16698,7 +16674,7 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$B = html `<slot></slot>`;
+  const template$C = html `<slot></slot>`;
 
   const styles$U = css `
     :host {
@@ -16818,7 +16794,7 @@
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
       styles: styles$U,
-      template: template$B
+      template: template$C
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -17104,7 +17080,7 @@
 `;
 
   // prettier-ignore
-  const template$A = (_context, definition) => html `<a
+  const template$B = (_context, definition) => html `<a
         class="control"
         part="control"
         download="${x => x.download}"
@@ -17194,7 +17170,7 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$A,
+      template: template$B,
       styles: styles$T,
       shadowOptions: {
           delegatesFocus: true
@@ -17584,7 +17560,7 @@
     }
 `;
 
-  const template$z = (context, definition) => html `
+  const template$A = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17666,7 +17642,7 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$z,
+      template: template$A,
       styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
@@ -17752,7 +17728,7 @@
     }
 `;
 
-  const template$y = (context, definition) => html `
+  const template$z = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17858,7 +17834,7 @@
   // 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$y,
+      template: template$z,
       styles: styles$Q,
       shadowOptions: {
           delegatesFocus: true
@@ -17999,7 +17975,7 @@
     }
 `;
 
-  const template$x = (context, definition) => html `
+  const template$y = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18051,7 +18027,7 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$x,
+      template: template$y,
       styles: styles$P,
       shadowOptions: {
           delegatesFocus: true
@@ -18082,7 +18058,7 @@
     }
 `;
 
-  const template$w = (context, definition) => html `
+  const template$x = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18288,7 +18264,7 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$w,
+      template: template$x,
       styles: styles$O,
       shadowOptions: {
           delegatesFocus: false
@@ -18407,7 +18383,7 @@
     }
 `;
 
-  const template$v = (context, definition) => html `
+  const template$w = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18544,7 +18520,7 @@
   // 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$v,
+      template: template$w,
       styles: styles$N,
       shadowOptions: {
           delegatesFocus: true
@@ -19540,7 +19516,7 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$u = html `<div
+  const template$v = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
@@ -19599,7 +19575,7 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$u,
+          template: template$v,
           styles: styles$J,
           baseClass: iconClass
       });
@@ -19704,7 +19680,7 @@
   }).withDefault(coreLabelDefaults.informationIconLabel);
 
   // prettier-ignore
-  const template$t = html `
+  const template$u = html `
     <div class="container"
         role="status"
         aria-atomic="${x => x.ariaAtomic}"
@@ -19820,7 +19796,7 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$t,
+      template: template$u,
       styles: styles$L
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
@@ -19977,7 +19953,7 @@
     }
 `;
 
-  const template$s = html `
+  const template$t = html `
     ${'' /* Explicitly set role to work around Lighthouse error. See https://github.com/ni/nimble/issues/1650. */}
     <section role="region" aria-labelledby="title-slot">
         <slot name="title" id="title-slot"></slot>
@@ -19993,7 +19969,7 @@
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$s,
+      template: template$t,
       styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
@@ -20371,7 +20347,7 @@
     }
 `;
 
-  const template$r = (context, definition) => html `
+  const template$s = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20446,7 +20422,7 @@
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$r,
+      template: template$s,
       styles: styles$D,
       shadowOptions: {
           delegatesFocus: true
@@ -20826,8 +20802,63 @@
             }
         `));
 
+  /**
+   * The runtime behavior for template overflow detection.
+   * @public
+   */
+  class OverflowBehavior {
+      /**
+       * Creates an instance of OverflowBehavior.
+       * @param target - The element to check for overflow.
+       * @param propertyName - The name of the property to assign the overflow state to.
+       */
+      constructor(target, propertyName) {
+          this.target = target;
+          this.propertyName = propertyName;
+      }
+      /**
+       * Bind this behavior to the source.
+       * @param source - The source to bind to.
+       * @param context - The execution context that the binding is operating within.
+       */
+      bind(source) {
+          this.source = source;
+          this.setSourceValue(false);
+          this.mouseOverHandler = () => {
+              const hasOverflow = this.target.offsetWidth < this.target.scrollWidth;
+              this.setSourceValue(hasOverflow);
+          };
+          this.mouseOutHandler = () => {
+              this.setSourceValue(false);
+          };
+          this.target.addEventListener('mouseover', this.mouseOverHandler);
+          this.target.addEventListener('mouseout', this.mouseOutHandler);
+      }
+      /**
+       * Unbinds this behavior from the source.
+       * @param source - The source to unbind from.
+       */
+      unbind() {
+          this.source = undefined;
+          this.target.removeEventListener('mouseover', this.mouseOverHandler);
+          this.target.removeEventListener('mouseout', this.mouseOutHandler);
+      }
+      setSourceValue(value) {
+          // @ts-expect-error set property on source
+          this.source[this.propertyName] = value;
+      }
+  }
+  /**
+   * A directive that observes if an element has overflow and sets a flag.
+   * @param propertyName - The name of the property to assign the overflow flag.
+   * @public
+   */
+  function overflow(propertyName) {
+      return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
+  }
+
   // prettier-ignore
-  const template$q = (context, definition) => html `
+  const template$r = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -20858,6 +20889,8 @@
                     @input="${(x, c) => x.inputHandler(c.event)}"
                     @keyup="${(x, c) => x.keyupHandler(c.event)}"
                     ${ref('control')}
+                    ${overflow('hasOverflow')}
+                    title=${x => (x.hasOverflow && x.value ? x.value : null)}
                 />
                 <div class="indicator" part="indicator" aria-hidden="true">
                     <slot name="indicator">
@@ -20906,6 +20939,8 @@
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
           this.errorVisible = false;
+          /** @internal */
+          this.hasOverflow = false;
           this.valueUpdatedByInput = false;
       }
       get value() {
@@ -21095,10 +21130,13 @@
   __decorate$1([
       observable
   ], Combobox.prototype, "controlWrapper", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "hasOverflow", void 0);
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: Combobox$1,
-      template: template$q,
+      template: template$r,
       styles: styles$A,
       shadowOptions: {
           delegatesFocus: true
@@ -21246,7 +21284,7 @@
             }
         `));
 
-  const template$p = html `
+  const template$q = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -21373,7 +21411,7 @@
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$p,
+      template: template$q,
       styles: styles$z,
       baseClass: Dialog
   });
@@ -21533,7 +21571,7 @@
             }
         `));
 
-  const template$o = html `
+  const template$p = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -21647,7 +21685,7 @@
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$o,
+      template: template$p,
       styles: styles$y
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
@@ -24031,6 +24069,9 @@
 
     .content {
         padding: 8px 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     :host([aria-selected='true']) {
@@ -24079,30 +24120,61 @@
     }
 `;
 
+  // Based on template in FAST repo: https://github.com/microsoft/fast/blob/2ea80697bc3a5193e6123fb08ac3be2a76571aeb/packages/web-components/fast-foundation/src/listbox-option/listbox-option.template.ts
+  /**
+   * The template for the {@link @microsoft/fast-foundation#(ListboxOption:class)} component.
+   * @public
+   */
+  // prettier-ignore
+  const template$o = (context, definition) => html `
+    <template
+        aria-checked="${x => x.ariaChecked}"
+        aria-disabled="${x => x.ariaDisabled}"
+        aria-posinset="${x => x.ariaPosInSet}"
+        aria-selected="${x => x.ariaSelected}"
+        aria-setsize="${x => x.ariaSetSize}"
+        class="${x => [x.checked && 'checked', x.selected && 'selected', x.disabled && 'disabled']
+    .filter(Boolean)
+    .join(' ')}"
+        role="option"
+    >
+        ${startSlotTemplate(context, definition)}
+        <span
+            class="content"
+            part="content"
+            ${overflow('hasOverflow')}
+            title=${x => (x.hasOverflow && x.elementTextContent ? x.elementTextContent : null)}
+        >
+            <slot ${ref('contentSlot')} ${slotted('content')}></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+    </template>
+`;
+
   /**
    * A nimble-styled HTML listbox option
    */
   class ListOption extends ListboxOption {
-      // Workaround for https://github.com/microsoft/fast/issues/5219
-      get value() {
-          return super.value;
-      }
-      set value(value) {
-          // Coerce value to string
-          super.value = `${value}`;
-          if (this.$fastController.isConnected) {
-              this.setAttribute('value', this.value);
-          }
+      constructor() {
+          super(...arguments);
+          /** @internal */
+          this.hasOverflow = false;
       }
-      connectedCallback() {
-          super.connectedCallback();
-          this.setAttribute('value', this.value);
+      /** @internal */
+      get elementTextContent() {
+          return this.contentSlot
+              .assignedNodes()
+              .map(node => node.textContent?.trim())
+              .join(' ');
       }
   }
+  __decorate$1([
+      observable
+  ], ListOption.prototype, "hasOverflow", void 0);
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: listboxOptionTemplate,
+      template: template$o,
       styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
@@ -59831,7 +59903,7 @@ img.ProseMirror-separator {
                 >
                     ${startSlotTemplate(context, definition)}
                     <slot name="button-container">
-                        <div class="selected-value" part="selected-value">
+                        <div class="selected-value" part="selected-value" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>
                             <slot name="selected-value">${x => x.displayValue}</slot>
                         </div>
                         <div aria-hidden="true" class="indicator" part="indicator">
@@ -59882,6 +59954,8 @@ img.ProseMirror-separator {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
           this.errorVisible = false;
+          /** @internal */
+          this.hasOverflow = false;
       }
       // Workaround for https://github.com/microsoft/fast/issues/5123
       setPositioning() {
@@ -59932,6 +60006,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], Select.prototype, "region", void 0);
+  __decorate$1([
+      observable
+  ], Select.prototype, "hasOverflow", void 0);
   const nimbleSelect = Select.compose({
       baseName: 'select',
       baseClass: Select$1,
@@ -67740,61 +67817,6 @@ img.ProseMirror-separator {
     }
 `;
 
-  /**
-   * The runtime behavior for template overflow detection.
-   * @public
-   */
-  class OverflowBehavior {
-      /**
-       * Creates an instance of OverflowBehavior.
-       * @param target - The element to check for overflow.
-       * @param propertyName - The name of the property to assign the overflow state to.
-       */
-      constructor(target, propertyName) {
-          this.target = target;
-          this.propertyName = propertyName;
-      }
-      /**
-       * Bind this behavior to the source.
-       * @param source - The source to bind to.
-       * @param context - The execution context that the binding is operating within.
-       */
-      bind(source) {
-          this.source = source;
-          this.setSourceValue(false);
-          this.mouseOverHandler = () => {
-              const hasOverflow = this.target.offsetWidth < this.target.scrollWidth;
-              this.setSourceValue(hasOverflow);
-          };
-          this.mouseOutHandler = () => {
-              this.setSourceValue(false);
-          };
-          this.target.addEventListener('mouseover', this.mouseOverHandler);
-          this.target.addEventListener('mouseout', this.mouseOutHandler);
-      }
-      /**
-       * Unbinds this behavior from the source.
-       * @param source - The source to unbind from.
-       */
-      unbind() {
-          this.source = undefined;
-          this.target.removeEventListener('mouseover', this.mouseOverHandler);
-          this.target.removeEventListener('mouseout', this.mouseOutHandler);
-      }
-      setSourceValue(value) {
-          // @ts-expect-error set property on source
-          this.source[this.propertyName] = value;
-      }
-  }
-  /**
-   * A directive that observes if an element has overflow and sets a flag.
-   * @param propertyName - The name of the property to assign the overflow flag.
-   * @public
-   */
-  function overflow(propertyName) {
-      return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
-  }
-
   // Avoiding a wrapping <template> and be careful about starting and ending whitspace
   // so the template can be composed into other column header templates
   // prettier-ignore