@ni/nimble-components 31.0.0 → 31.1.0

package/dist/all-components-bundle.min.js

@@ -3017,9 +3017,9 @@ const Ng="nimble-icon-arrow-expander-down",Lg="above",Bg="underline",Pg="outline
     :host {
         color: ${id};
         font: ${nd};
-        height: ${Bl};
         position: relative;
-        justify-content: center;
+        flex-direction: column;
+        justify-content: flex-start;
         ${Vh}
         min-width: ${Yl};
         outline: none;
@@ -3035,7 +3035,7 @@ const Ng="nimble-icon-arrow-expander-down",Lg="above",Bg="underline",Pg="outline
         bottom: calc(${ql} + var(--ni-private-indicator-lines-gap));
         width: 0px;
         height: 0px;
-        justify-self: center;
+        align-self: center;
         border-bottom: ${Ml}
             var(--ni-private-focus-indicator-width) solid;
         transition: width ${oh} ease-in;
@@ -3061,7 +3061,7 @@ const Ng="nimble-icon-arrow-expander-down",Lg="above",Bg="underline",Pg="outline
         bottom: calc(-1 * ${ql});
         width: 0px;
         height: 0px;
-        justify-self: center;
+        align-self: center;
         border-bottom: ${Ml}
             var(--ni-private-hover-indicator-width) solid;
         transition: width ${oh} ease-in;
@@ -3086,12 +3086,22 @@ const Ng="nimble-icon-arrow-expander-down",Lg="above",Bg="underline",Pg="outline
         width: 0px;
     }
 
+    .label {
+        display: flex;
+        color: ${Sd};
+        font: ${kd};
+    }
+
+    :host([disabled]) .label {
+        color: ${_d};
+    }
+
     .control {
         align-items: center;
         cursor: pointer;
         display: flex;
-        min-height: 100%;
         width: 100%;
+        height: ${Bl};
         border: 0px solid rgba(${Cl}, 0.3);
         background-color: transparent;
         padding: ${ql};
@@ -3427,6 +3437,9 @@ const Yg=Kg.compose({baseName:"combobox",baseClass:Zg,template:(t,e)=>Q`
         @focusout="${(t,e)=>t.focusoutHandler(e.event)}"
         @keydown="${(t,e)=>t.keydownHandler(e.event)}"
     >
+        <label part="label" class="label">
+            <slot></slot>
+        </label>
         <div class="control" part="control" ${Ut("controlWrapper")}>
             ${le(0,e)}
             <slot name="control">
@@ -3511,8 +3524,7 @@ const Yg=Kg.compose({baseName:"combobox",baseClass:Zg,template:(t,e)=>Q`
                 @keydown="${(t,e)=>t.toggleButtonKeyDownHandler(e.event)}"
                 class="dropdown-button"
                 part="button"
-                aria-haspopup="true"
-                aria-expanded="${t=>t.open}"
+                aria-hidden="true"
                 tabindex="-1"
             >
                 <${Ng}
@@ -9377,7 +9389,8 @@ _i.getOrCreate().withPrefix("nimble").register(hO())
 const uO="nimble-spinner",pO=t=>t instanceof ab,fO=t=>t instanceof ub
 let mO=class extends Fi{}
 class gO extends(An(mO)){constructor(){super(...arguments),this.proxy=document.createElement("select")}}const vO=t=>!t.visuallyHidden&&!t.disabled&&!t.hidden,bO=t=>!t.visuallyHidden&&!t.hidden
-class yO extends gO{constructor(){super(...arguments),this.appearance=Bg,this.errorVisible=!1,this.filterMode=Ug.none,this.clearable=!1,this.loadingVisible=!1,this.displayPlaceholder=!1,this.open=!1,this.listboxId=il("listbox-"),this.hasOverflow=!1,this.filteredOptions=[],this.filter="",this.availableViewportHeight=0,this._value="",this.forcedPosition=!1}get collapsible(){return!(this.multiple||"number"==typeof this.size)}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.open&&this.initializeOpenState()}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
+class yO extends gO{constructor(){super(...arguments),this.appearance=Bg,this.errorVisible=!1,this.filterMode=Ug.none,this.clearable=!1,this.loadingVisible=!1,this.displayPlaceholder=!1,this.open=!1,this.listboxId=il("listbox-"),this.hasOverflow=!1,this.filteredOptions=[],this.filter="",this.availableViewportHeight=0,this._value="",this.forcedPosition=!1}get collapsible(){return!(this.multiple||"number"==typeof this.size)}get labelContent(){if(!this.$fastController.isConnected)return""
+return this.labelSlot.assignedNodes().filter((t=>""!==t.textContent?.trim())).map((t=>t.textContent?.trim())).join(" ")}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.open&&this.initializeOpenState()}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
 let n=t
 if(this.options?.length){const t=this.options.findIndex((t=>t.value===n)),e=this.options[this.selectedIndex]?.value??null,i=this.options[t]?.value??null;-1!==t&&e===i||(n="",this.selectedIndex=t),n=this.firstSelectedOption?.value??n}e!==n&&(this._value=n,super.valueChanged(e,n),x.notify(this,"value"),this.updateDisplayValue())}get displayValue(){return x.track(this,"displayValue"),this.firstSelectedOption?.text??""}anchoredRegionChanged(t,e){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}controlChanged(t,e){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}slottedOptionsChanged(t,e){const n=this.value
 this.options.forEach((t=>{const e=x.getNotifier(t)
@@ -9475,7 +9488,7 @@ n.forEach((e=>{e.visuallyHidden=!i&&this.isOptionHiddenOrFilteredOut(e),e.visual
 this.filteredOptions=t}getGroupOptions(t){return Array.from(t.children).filter((t=>pO(t))).map((e=>(t.hidden&&pO(e)&&(e.visuallyHidden=!0),e)))}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.value??""),t&&(this.$emit("input"),this.$emit("change",this,{bubbles:!0,composed:void 0}))}clearSelect(){const t=this.getPlaceholderOption()
 this.selectedIndex=t?this.options.indexOf(t):-1}setProxyOptions(){this.proxy instanceof HTMLSelectElement&&this.options&&(this.proxy.options.length=0,this.options.forEach((t=>{const e=t.proxy||(t instanceof HTMLOptionElement?t.cloneNode():null)
 e&&this.proxy.options.add(e)})))}filterChanged(){this.filterOptions()}emitFilterInputEvent(){const t={filterText:this.filter}
-this.$emit("filter-input",t,{bubbles:!0})}initializeOpenState(){this.setActiveOption(this.selectedIndex),this.ariaControls=this.listboxId,this.ariaExpanded="true",this.setPositioning(),this.focusAndScrollOptionIntoView()}}t([ft],yO.prototype,"appearance",void 0),t([ft({attribute:"position"})],yO.prototype,"positionAttribute",void 0),t([ft({attribute:"error-text"})],yO.prototype,"errorText",void 0),t([ft({attribute:"error-visible",mode:"boolean"})],yO.prototype,"errorVisible",void 0),t([ft({attribute:"filter-mode"})],yO.prototype,"filterMode",void 0),t([ft({attribute:"clearable",mode:"boolean"})],yO.prototype,"clearable",void 0),t([ft({attribute:"loading-visible",mode:"boolean"})],yO.prototype,"loadingVisible",void 0),t([C],yO.prototype,"displayPlaceholder",void 0),t([ft({attribute:"open",mode:"boolean"})],yO.prototype,"open",void 0),t([C],yO.prototype,"position",void 0),t([C],yO.prototype,"control",void 0),t([C],yO.prototype,"scrollableRegion",void 0),t([C],yO.prototype,"filterInput",void 0),t([C],yO.prototype,"anchoredRegion",void 0),t([C],yO.prototype,"hasOverflow",void 0),t([C],yO.prototype,"filteredOptions",void 0),t([C],yO.prototype,"filter",void 0),t([C],yO.prototype,"availableViewportHeight",void 0),t([k],yO.prototype,"collapsible",null),t([k],yO.prototype,"displayValue",null)
+this.$emit("filter-input",t,{bubbles:!0})}initializeOpenState(){this.setActiveOption(this.selectedIndex),this.ariaControls=this.listboxId,this.ariaExpanded="true",this.setPositioning(),this.focusAndScrollOptionIntoView()}}t([ft],yO.prototype,"appearance",void 0),t([ft({attribute:"position"})],yO.prototype,"positionAttribute",void 0),t([ft({attribute:"error-text"})],yO.prototype,"errorText",void 0),t([ft({attribute:"error-visible",mode:"boolean"})],yO.prototype,"errorVisible",void 0),t([ft({attribute:"filter-mode"})],yO.prototype,"filterMode",void 0),t([ft({attribute:"clearable",mode:"boolean"})],yO.prototype,"clearable",void 0),t([ft({attribute:"loading-visible",mode:"boolean"})],yO.prototype,"loadingVisible",void 0),t([C],yO.prototype,"displayPlaceholder",void 0),t([ft({attribute:"open",mode:"boolean"})],yO.prototype,"open",void 0),t([C],yO.prototype,"position",void 0),t([C],yO.prototype,"control",void 0),t([C],yO.prototype,"scrollableRegion",void 0),t([C],yO.prototype,"filterInput",void 0),t([C],yO.prototype,"anchoredRegion",void 0),t([C],yO.prototype,"hasOverflow",void 0),t([C],yO.prototype,"filteredOptions",void 0),t([C],yO.prototype,"filter",void 0),t([C],yO.prototype,"availableViewportHeight",void 0),t([k],yO.prototype,"collapsible",null),t([k],yO.prototype,"labelContent",null),t([k],yO.prototype,"displayValue",null)
 const wO=yO.compose({baseName:"select",baseClass:ns,template:(t,e)=>Q`
     <template
         class="${t=>[t.collapsible&&"collapsible",t.collapsible&&t.open&&"open",t.disabled&&"disabled",t.collapsible&&t.position].filter(Boolean).join(" ")}"
@@ -9484,6 +9497,7 @@ const wO=yO.compose({baseName:"select",baseClass:ns,template:(t,e)=>Q`
         aria-disabled="${t=>t.ariaDisabled}"
         aria-expanded="${t=>t.ariaExpanded}"
         aria-haspopup="${t=>t.collapsible?"listbox":null}"
+        aria-label="${t=>t.labelContent}"
         aria-multiselectable="${t=>t.ariaMultiSelectable}"
         ?open="${t=>t.open}"
         role="combobox"
@@ -9495,6 +9509,9 @@ const wO=yO.compose({baseName:"select",baseClass:ns,template:(t,e)=>Q`
         @keydown="${(t,e)=>t.keydownHandler(e.event)}"
         @mousedown="${(t,e)=>t.mousedownHandler(e.event)}"
     >
+        <label part="label" class="label" aria-hidden="true">
+            <slot ${Ut("labelSlot")}></slot>
+        </label>
         ${Gt((t=>t.collapsible),Q`
             <div
                 class="control"