@ni/nimble-components 31.0.0 → 31.1.0

package/dist/all-components-bundle.js

@@ -16032,7 +16032,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Fri, 02 Aug 2024 22:00:00 GMT
+   * Generated on Fri, 02 Aug 2024 22:39:40 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -20528,9 +20528,9 @@ so this becomes the fallback color for the slot */ ''}
     :host {
         color: ${bodyFontColor};
         font: ${bodyFont};
-        height: ${controlHeight};
         position: relative;
-        justify-content: center;
+        flex-direction: column;
+        justify-content: flex-start;
         ${userSelectNone}
         min-width: ${menuMinWidth};
         outline: none;
@@ -20546,7 +20546,7 @@ so this becomes the fallback color for the slot */ ''}
         bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));
         width: 0px;
         height: 0px;
-        justify-self: center;
+        align-self: center;
         border-bottom: ${borderHoverColor}
             var(--ni-private-focus-indicator-width) solid;
         transition: width ${smallDelay} ease-in;
@@ -20572,7 +20572,7 @@ so this becomes the fallback color for the slot */ ''}
         bottom: calc(-1 * ${borderWidth});
         width: 0px;
         height: 0px;
-        justify-self: center;
+        align-self: center;
         border-bottom: ${borderHoverColor}
             var(--ni-private-hover-indicator-width) solid;
         transition: width ${smallDelay} ease-in;
@@ -20597,12 +20597,22 @@ so this becomes the fallback color for the slot */ ''}
         width: 0px;
     }
 
+    .label {
+        display: flex;
+        color: ${controlLabelFontColor};
+        font: ${controlLabelFont};
+    }
+
+    :host([disabled]) .label {
+        color: ${controlLabelDisabledFontColor};
+    }
+
     .control {
         align-items: center;
         cursor: pointer;
         display: flex;
-        min-height: 100%;
         width: 100%;
+        height: ${controlHeight};
         border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         background-color: transparent;
         padding: ${borderWidth};
@@ -20975,6 +20985,9 @@ so this becomes the fallback color for the slot */ ''}
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
     >
+        <label part="label" class="label">
+            <slot></slot>
+        </label>
         <div class="control" part="control" ${ref('controlWrapper')}>
             ${startSlotTemplate(context, definition)}
             <slot name="control">
@@ -21739,8 +21752,7 @@ so this becomes the fallback color for the slot */ ''}
                 @keydown="${(x, c) => x.toggleButtonKeyDownHandler(c.event)}"
                 class="dropdown-button"
                 part="button"
-                aria-haspopup="true"
-                aria-expanded="${x => x.open}"
+                aria-hidden="true"
                 tabindex="-1"
             >
                 <${iconArrowExpanderDownTag}
@@ -60366,6 +60378,7 @@ img.ProseMirror-separator {
         aria-disabled="${x => x.ariaDisabled}"
         aria-expanded="${x => x.ariaExpanded}"
         aria-haspopup="${x => (x.collapsible ? 'listbox' : null)}"
+        aria-label="${x => x.labelContent}"
         aria-multiselectable="${x => x.ariaMultiSelectable}"
         ?open="${x => x.open}"
         role="combobox"
@@ -60377,6 +60390,9 @@ img.ProseMirror-separator {
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
         @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
     >
+        <label part="label" class="label" aria-hidden="true">
+            <slot ${ref('labelSlot')}></slot>
+        </label>
         ${when(x => x.collapsible, html `
             <div
                 class="control"
@@ -60562,6 +60578,17 @@ img.ProseMirror-separator {
       get collapsible() {
           return !(this.multiple || typeof this.size === 'number');
       }
+      /** @internal */
+      get labelContent() {
+          if (!this.$fastController.isConnected) {
+              return '';
+          }
+          const nodes = this.labelSlot.assignedNodes();
+          return nodes
+              .filter(node => node.textContent?.trim() !== '')
+              .map(node => node.textContent?.trim())
+              .join(' ');
+      }
       /**
        * @internal
        */
@@ -61527,6 +61554,9 @@ img.ProseMirror-separator {
   __decorate$1([
       volatile
   ], Select.prototype, "collapsible", null);
+  __decorate$1([
+      volatile
+  ], Select.prototype, "labelContent", null);
   __decorate$1([
       volatile
   ], Select.prototype, "displayValue", null);