@ni/nimble-components 32.7.2 → 32.8.0

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

@@ -2850,7 +2850,40 @@ const jg=qg.compose({baseName:"card-button",template:(t,e)=>Q`
 `,styles:Ug,shadowOptions:{delegatesFocus:!0}})
 _i.getOrCreate().withPrefix("nimble").register(jg())
 const Wg=Mt`
+    .error-icon {
+        display: none;
+    }
+
+    :host([error-visible]) .error-icon {
+        display: inline-flex;
+        width: ${Gl};
+        height: ${Gl};
+        flex: none;
+    }
+
+    .error-text {
+        display: none;
+    }
+
+    :host([error-visible]) .error-text {
+        display: block;
+        font: ${Gd};
+        color: ${Sl};
+        width: 100%;
+        position: absolute;
+        bottom: calc(-1 * (${Qd} + 2px));
+        left: 0px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    :host([error-visible]) .error-text:empty {
+        display: none;
+    }
+`,Gg=Mt`
     ${Ps("inline-flex")}
+    ${Wg}
 
     :host {
         font: ${od};
@@ -2858,16 +2891,25 @@ const Wg=Mt`
         cursor: pointer;
         outline: none;
         ${Bm}
+        min-height: ${Vl};
     }
 
     :host([disabled]) {
         cursor: default;
     }
 
+    .container {
+        position: relative;
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        grid-template-rows: ${hd} auto;
+        align-items: center;
+        width: 100%;
+    }
+
     .control {
-        width: calc(${Vl} / 2);
-        height: calc(${Vl} / 2);
-        flex-shrink: 0;
+        width: ${Gl};
+        height: ${Gl};
         border: ${Wl} solid ${Cl};
         padding: 2px;
         display: inline-flex;
@@ -2876,6 +2918,8 @@ const Wg=Mt`
         transition: box-shadow ${lh};
         ${""}
         line-height: 0;
+        grid-column: 1;
+        grid-row: 1;
     }
 
     @media (prefers-reduced-motion) {
@@ -2903,7 +2947,9 @@ const Wg=Mt`
     .label {
         font: inherit;
         color: ${rd};
-        padding-left: 1ch;
+        padding-left: ${Ul};
+        grid-column: 2;
+        grid-row: 1 / span 2;
         cursor: inherit;
     }
 
@@ -2920,16 +2966,13 @@ const Wg=Mt`
         height: ${Gl};
         width: ${Gl};
         overflow: visible;
+        fill: ${Cl};
     }
 
     :host(.checked:not(.indeterminate)) slot[name='checked-indicator'] {
         display: contents;
     }
 
-    slot[name='checked-indicator'] svg {
-        fill: ${Cl};
-    }
-
     :host([disabled]) slot[name='checked-indicator'] svg {
         fill: rgba(${kl}, 0.3);
     }
@@ -2951,10 +2994,20 @@ const Wg=Mt`
     :host([disabled]) slot[name='indeterminate-indicator'] svg {
         fill: rgba(${kl}, 0.3);
     }
+
+    .error-icon {
+        grid-column: 3;
+        grid-row: 1;
+        margin: 0px ${Hl};
+    }
+`,Zg=Q`
+    <div class="error-text" title="${t=>t.errorText}" aria-live="polite">
+        ${t=>t.errorText}
+    </div>
 `
-class Gg extends Vn{get resolvedTabindex(){const t=this.tabIndex??0
-return this.disabled?void 0:`${t}`}}t([ft({attribute:"tabindex",converter:ut})],Gg.prototype,"tabIndex",void 0)
-const Zg=Gg.compose({baseName:"checkbox",baseClass:Vn,template:(t,e)=>Q`
+class Kg extends Vn{constructor(){super(...arguments),this.errorVisible=!1}get resolvedTabindex(){const t=this.tabIndex??0
+return this.disabled?void 0:`${t}`}}t([ft({attribute:"tabindex",converter:ut})],Kg.prototype,"tabIndex",void 0),t([ft({attribute:"error-text"})],Kg.prototype,"errorText",void 0),t([ft({attribute:"error-visible",mode:"boolean"})],Kg.prototype,"errorVisible",void 0)
+const Yg=Kg.compose({baseName:"checkbox",baseClass:Vn,template:(t,e)=>Q`
     <template
         role="checkbox"
         aria-checked="${t=>t.checked}"
@@ -2966,24 +3019,31 @@ const Zg=Gg.compose({baseName:"checkbox",baseClass:Vn,template:(t,e)=>Q`
         @click="${(t,e)=>t.clickHandler(e.event)}"
         class="${t=>t.readOnly?"readonly":""} ${t=>t.checked?"checked":""} ${t=>t.indeterminate?"indeterminate":""}"
     >
-        <div part="control" class="control">
-            <slot name="checked-indicator">
-                ${e.checkedIndicator||""}
-            </slot>
-            <slot name="indeterminate-indicator">
-                ${e.indeterminateIndicator||""}
-            </slot>
+        <div part="container" class="container">
+            <div part="control" class="control">
+                <slot name="checked-indicator">
+                    ${e.checkedIndicator||""}
+                </slot>
+                <slot name="indeterminate-indicator">
+                    ${e.indeterminateIndicator||""}
+                </slot>
+            </div>
+            <label
+                part="label"
+                class="${t=>t.defaultSlottedNodes?.length?"label":"label label__hidden"}"
+            >
+                <slot ${ie("defaultSlottedNodes")}></slot>
+            </label>
+            <${Mg}
+                severity="error"
+                class="error-icon"
+            ></${Mg}>
+            ${Zg}
         </div>
-        <label
-            part="label"
-            class="${t=>t.defaultSlottedNodes?.length?"label":"label label__hidden"}"
-        >
-            <slot ${ie("defaultSlottedNodes")}></slot>
-        </label>
     </template>
-`,styles:Wg,checkedIndicator:Pu.data,indeterminateIndicator:wf.data})
-_i.getOrCreate().withPrefix("nimble").register(Zg())
-const Kg="nimble-checkbox",Yg=Mt`
+`,styles:Gg,checkedIndicator:Pu.data,indeterminateIndicator:wf.data})
+_i.getOrCreate().withPrefix("nimble").register(Yg())
+const Xg="nimble-checkbox",Jg=Mt`
     ${Eh}
     ${Ah}
 
@@ -3030,9 +3090,9 @@ const Kg="nimble-checkbox",Yg=Mt`
                 }
             }
         `))
-class Xg extends as{constructor(){super(...arguments),this.appearance=kh,this.contentHidden=!1}get resolvedTabindex(){const t=this.tabIndex??0
-return this.disabled?void 0:`${t}`}}t([ft],Xg.prototype,"appearance",void 0),t([ft({attribute:"appearance-variant"})],Xg.prototype,"appearanceVariant",void 0),t([ft({attribute:"content-hidden",mode:"boolean"})],Xg.prototype,"contentHidden",void 0),t([ft({attribute:"tabindex",converter:ut})],Xg.prototype,"tabIndex",void 0),Ke(Xg,re,Nn)
-const Jg=Xg.compose({baseName:"toggle-button",template:(t,e)=>Q`
+class Qg extends as{constructor(){super(...arguments),this.appearance=kh,this.contentHidden=!1}get resolvedTabindex(){const t=this.tabIndex??0
+return this.disabled?void 0:`${t}`}}t([ft],Qg.prototype,"appearance",void 0),t([ft({attribute:"appearance-variant"})],Qg.prototype,"appearanceVariant",void 0),t([ft({attribute:"content-hidden",mode:"boolean"})],Qg.prototype,"contentHidden",void 0),t([ft({attribute:"tabindex",converter:ut})],Qg.prototype,"tabIndex",void 0),Ke(Qg,re,Nn)
+const tv=Qg.compose({baseName:"toggle-button",template:(t,e)=>Q`
     <div
         role="button"
         part="control"
@@ -3072,15 +3132,11 @@ const Jg=Xg.compose({baseName:"toggle-button",template:(t,e)=>Q`
         </span>
         ${ae(0,e)}
     </div>
-`,styles:Yg,shadowOptions:{delegatesFocus:!0}})
-_i.getOrCreate().withPrefix("nimble").register(Jg())
-const Qg="nimble-toggle-button",tv=Q`
-    <div class="error-text" title="${t=>t.errorText}" aria-live="polite">
-        ${t=>t.errorText}
-    </div>
-`
+`,styles:Jg,shadowOptions:{delegatesFocus:!0}})
+_i.getOrCreate().withPrefix("nimble").register(tv())
+const ev="nimble-toggle-button"
 zm("icon-arrow-expander-down",class extends Vm{constructor(){super(Xh)}})
-const ev="nimble-icon-arrow-expander-down",nv="above",iv="underline",sv="outline",ov="block",rv=Mt`
+const nv="nimble-icon-arrow-expander-down",iv="above",sv="underline",ov="outline",rv="block",av=Mt`
     ${Ps("inline-flex")}
 
     :host {
@@ -3316,7 +3372,7 @@ const ev="nimble-icon-arrow-expander-down",nv="above",iv="underline",sv="outline
         align-items: center;
         padding: ${Hl} ${Ul};
     }
-`.withBehaviors($h(iv,Mt`
+`.withBehaviors($h(sv,Mt`
             .control {
                 border-bottom-width: ${Wl};
                 padding-bottom: 0;
@@ -3325,12 +3381,12 @@ const ev="nimble-icon-arrow-expander-down",nv="above",iv="underline",sv="outline
             :host([disabled]) .control {
                 border-color: rgba(${kl}, 0.1);
             }
-        `),$h(sv,Mt`
+        `),$h(ov,Mt`
             .control {
                 border-width: ${Wl};
                 padding: 0;
             }
-        `),$h(ov,Mt`
+        `),$h(rv,Mt`
             .control {
                 background-color: rgba(${kl}, 0.1);
             }
@@ -3347,41 +3403,9 @@ const ev="nimble-icon-arrow-expander-down",nv="above",iv="underline",sv="outline
             .listbox slot {
                 background: ${ml(co,.15)};
             }
-        `)),av=Mt`
-    .error-icon {
-        display: none;
-    }
-
-    :host([error-visible]) .error-icon {
-        display: inline-flex;
-        width: ${Gl};
-        height: ${Gl};
-        flex: none;
-    }
-
-    .error-text {
-        display: none;
-    }
-
-    :host([error-visible]) .error-text {
-        display: block;
-        font: ${Gd};
-        color: ${Sl};
-        width: 100%;
-        position: absolute;
-        bottom: calc(-1 * (${Qd} + 2px));
-        left: 0px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    :host([error-visible]) .error-text:empty {
-        display: none;
-    }
-`,lv={none:void 0,standard:"standard",manual:"manual"},cv=Mt`
-    ${rv}
+        `)),lv={none:void 0,standard:"standard",manual:"manual"},cv=Mt`
     ${av}
+    ${Wg}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -3450,7 +3474,7 @@ const ev="nimble-icon-arrow-expander-down",nv="above",iv="underline",sv="outline
     :host([disabled]) .dropdown-icon {
         fill: ${ad};
     }
-`.withBehaviors($h(ov,Mt`
+`.withBehaviors($h(rv,Mt`
             :host([error-visible]) .control {
                 border-bottom-width: ${Wl};
                 padding-bottom: 0;
@@ -3458,7 +3482,7 @@ const ev="nimble-icon-arrow-expander-down",nv="above",iv="underline",sv="outline
         `))
 class dv{constructor(t,e){this.target=t,this.propertyName=e}bind(t){this.source=t,this.setSourceValue(!1),this.mouseOverHandler=()=>{const t=this.target.offsetWidth<this.target.scrollWidth
 this.setSourceValue(t)},this.mouseOutHandler=()=>{this.setSourceValue(!1)},this.target.addEventListener("mouseover",this.mouseOverHandler),this.target.addEventListener("mouseout",this.mouseOutHandler)}unbind(){this.source=void 0,this.target.removeEventListener("mouseover",this.mouseOverHandler),this.target.removeEventListener("mouseout",this.mouseOutHandler)}setSourceValue(t){this.source[this.propertyName]=t}}function hv(t){return new D("nimble-overflow",dv,t)}let uv=class extends Fi{}
-class pv extends(An(uv)){constructor(){super(...arguments),this.proxy=document.createElement("input")}}class fv extends pv{constructor(){super(...arguments),this.appearance=iv,this.errorVisible=!1,this.open=!1,this.filteredOptions=[],this.hasOverflow=!1,this.listboxId=il("listbox-"),this.availableViewportHeight=0,this.valueUpdatedByInput=!1,this._value="",this.filter="",this.forcedPosition=!1}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
+class pv extends(An(uv)){constructor(){super(...arguments),this.proxy=document.createElement("input")}}class fv extends pv{constructor(){super(...arguments),this.appearance=sv,this.errorVisible=!1,this.open=!1,this.filteredOptions=[],this.hasOverflow=!1,this.listboxId=il("listbox-"),this.availableViewportHeight=0,this.valueUpdatedByInput=!1,this._value="",this.filter="",this.forcedPosition=!1}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
 let n=t
 if(this.$fastController.isConnected&&this.options){const e=this.findIndexOfValidOption(t),i=this.options[this.selectedIndex]?.text,s=this.options[e]?.text
 i!==s&&(this.selectedIndex=e),n=this.firstSelectedOption?.text||n}e!==n&&(this._value=n,super.valueChanged(e,n),x.notify(this,"value")),this.filter=t,this.filterOptions(),this.selectedIndex=this.findIndexOfValidOption(this.value)}get options(){return x.track(this,"options"),this.filteredOptions&&this.filter?this.filteredOptions:this._options}set options(t){this._options=t,x.notify(this,"options")}get isAutocompleteInline(){return this.autocomplete===Yn||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===Xn||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===Jn}slottedOptionsChanged(t,e){const n=this.value
@@ -3545,7 +3569,7 @@ const mv=fv.compose({baseName:"combobox",baseClass:pv,template:(t,e)=>Q`
             class="anchored-region"
             fixed-placement
             auto-update-mode="auto"
-            vertical-default-position="${t=>t.positionAttribute===nv?"top":"bottom"}"
+            vertical-default-position="${t=>t.positionAttribute===iv?"top":"bottom"}"
             vertical-positioning-mode="${t=>t.positionAttribute?"locktodefault":"dynamic"}"
             horizontal-default-position="center"
             horizontal-positioning-mode="locktodefault"
@@ -3582,7 +3606,7 @@ const mv=fv.compose({baseName:"combobox",baseClass:pv,template:(t,e)=>Q`
                 class="error-icon"
             ></${Mg}>
             <div class="separator"></div>
-            <${Qg}
+            <${ev}
                 ${Ut("dropdownButton")}
                 appearance="ghost"
                 ?checked="${t=>t.open}"
@@ -3596,14 +3620,14 @@ const mv=fv.compose({baseName:"combobox",baseClass:pv,template:(t,e)=>Q`
                 aria-hidden="true"
                 tabindex="-1"
             >
-                <${ev}
+                <${nv}
                     slot="start"
                     class="dropdown-icon"
                 >
-                </${ev}>
-            </${Qg}>
+                </${nv}>
+            </${ev}>
         </div>
-        ${tv}
+        ${Zg}
     `})
 Ke(fv,re,ei),_i.getOrCreate().withPrefix("nimble").register(mv())
 const gv=Symbol("user dismissed"),vv=Mt`
@@ -4426,7 +4450,7 @@ const Zb="auto",Kb=Mt`
         ?open="${t=>t.open}"
         @focusout="${(t,e)=>t.focusoutHandler(e.event)}"
     >
-        <${Qg}
+        <${ev}
             part="button"
             appearance="${t=>t.appearance}"
             appearance-variant="${t=>t.appearanceVariant}"
@@ -4445,7 +4469,7 @@ const Zb="auto",Kb=Mt`
             <slot slot="start" name="start"></slot>
             <slot></slot>
             <slot slot="end" name="end"></slot>
-        </${Qg}>
+        </${ev}>
         ${Gt((t=>t.open),Q`
             <${Cg}
                 fixed-placement="true"
@@ -4631,7 +4655,7 @@ const ey=class extends Vi{}.compose({baseName:"menu-item",baseClass:Vi,template:
 _i.getOrCreate().withPrefix("nimble").register(ey())
 const ny="underline",iy="outline",sy="block",oy=Mt`
     ${Ps("inline-block")}
-    ${av}
+    ${Wg}
 
     :host {
         font: ${od};
@@ -4924,7 +4948,7 @@ const ay=ry.compose({baseName:"number-field",baseClass:Zi,template:(t,e)=>Q`
             severity="error"
             class="error-icon"
         ></${Mg}>
-        ${tv}
+        ${Zg}
     `})
 _i.getOrCreate().withPrefix("nimble").register(ay())
 const ly=Mt`
@@ -5040,7 +5064,7 @@ const cy=class extends Ji{}.compose({baseName:"radio",baseClass:Ji,template:(t,e
 _i.getOrCreate().withPrefix("nimble").register(cy())
 const dy=Mt`
     ${Ps("inline-block")}
-    ${av}
+    ${Wg}
 
     .positioning-region {
         display: flex;
@@ -5099,7 +5123,7 @@ const dy=Mt`
             <slot
                 ${ie({property:"slottedRadioButtons",filter:te("[role=radio]")})}
             ></slot>
-            ${tv}
+            ${Zg}
         </div>
     </template>
 `
@@ -7451,7 +7475,7 @@ const UI=class extends vs{}.compose({baseName:"toolbar",baseClass:vs,template:(t
 `,styles:HI,shadowOptions:{delegatesFocus:!0}})
 _i.getOrCreate().withPrefix("nimble").register(UI())
 const qI="nimble-toolbar",jI="Bold",WI="Italics",GI="Bulleted List",ZI="Numbered List",KI=yi.create({name:"rich-text-toggle-bold-label",cssCustomPropertyName:null}).withDefault(jI),YI=yi.create({name:"rich-text-toggle-italics-label",cssCustomPropertyName:null}).withDefault(WI),XI=yi.create({name:"rich-text-toggle-bulleted-list-label",cssCustomPropertyName:null}).withDefault(GI),JI=yi.create({name:"rich-text-toggle-numbered-list-label",cssCustomPropertyName:null}).withDefault(ZI),QI=Mt`
-    ${rv}
+    ${av}
 
     :host {
         height: auto;
@@ -7534,7 +7558,7 @@ const sM="nimble-rich-text-mention-listbox",oM=Q`
             ></${Mg}>
             <section class="footer-section">
                 <${qI}>
-                    <${Qg}
+                    <${ev}
                         ${Ut("boldButton")}
                         appearance="ghost"
                         content-hidden
@@ -7547,8 +7571,8 @@ const sM="nimble-rich-text-mention-listbox",oM=Q`
                     >
                         ${t=>KI.getValueFor(t)}
                         <${Dv} slot="start"></${Dv}>
-                    </${Qg}>
-                    <${Qg}
+                    </${ev}>
+                    <${ev}
                         ${Ut("italicsButton")}
                         appearance="ghost"
                         content-hidden
@@ -7561,8 +7585,8 @@ const sM="nimble-rich-text-mention-listbox",oM=Q`
                     >
                         ${t=>YI.getValueFor(t)}
                         <${Ev} slot="start"></${Ev}>
-                    </${Qg}>
-                    <${Qg}
+                    </${ev}>
+                    <${ev}
                         ${Ut("bulletListButton")}
                         appearance="ghost"
                         content-hidden
@@ -7575,8 +7599,8 @@ const sM="nimble-rich-text-mention-listbox",oM=Q`
                     >
                         ${t=>XI.getValueFor(t)}
                         <${Av} slot="start"></${Av}>
-                    </${Qg}>
-                    <${Qg}
+                    </${ev}>
+                    <${ev}
                         ${Ut("numberedListButton")}
                         appearance="ghost"
                         content-hidden
@@ -7589,7 +7613,7 @@ const sM="nimble-rich-text-mention-listbox",oM=Q`
                     >
                         ${t=>JI.getValueFor(t)}
                         <${Rv} slot="start"></${Rv}>
-                    </${Qg}>
+                    </${ev}>
                     ${Qt((t=>t.getMentionExtensionConfig()),Q`
                         <${jh}
                             appearance="ghost"
@@ -7608,7 +7632,7 @@ const sM="nimble-rich-text-mention-listbox",oM=Q`
                     <slot name="footer-actions"></slot>
                 </span>
             </section>
-            ${tv}
+            ${Zg}
         </div>
         <${sM}
             ${Ut("mentionListbox")}
@@ -7621,7 +7645,7 @@ const sM="nimble-rich-text-mention-listbox",oM=Q`
     </template>
 `,rM=Mt`
     ${Ps("inline-flex")}
-    ${av}
+    ${Wg}
 
     :host {
         font: ${od};
@@ -7827,7 +7851,7 @@ const sM="nimble-rich-text-mention-listbox",oM=Q`
     }
 
     ${jh},
-    ${Qg} {
+    ${ev} {
         height: ${zl};
     }
 
@@ -7840,7 +7864,7 @@ const sM="nimble-rich-text-mention-listbox",oM=Q`
     }
 
     ::slotted(${jh}),
-    ::slotted(${Qg}),
+    ::slotted(${ev}),
     ::slotted(${"nimble-anchor-button"}),
     ::slotted(${Qb}) {
         height: ${zl};
@@ -9180,8 +9204,8 @@ this.viewer.replaceChildren(t.fragment),this.mentionedHrefs=t.mentionedHrefs}els
 const $O=MO.compose({baseName:"rich-text-viewer",template:_O,styles:IO})
 _i.getOrCreate().withPrefix("nimble").register($O())
 const DO=Mt`
-    ${rv}
     ${av}
+    ${Wg}
 
     ${""}
 
@@ -9321,7 +9345,7 @@ const DO=Mt`
     .loading-spinner {
         margin-left: auto;
     }
-`.withBehaviors($h(ov,Mt`
+`.withBehaviors($h(rv,Mt`
             :host([error-visible]) .control {
                 border-bottom-width: ${Wl};
                 padding-bottom: 0;
@@ -9507,7 +9531,7 @@ _i.getOrCreate().withPrefix("nimble").register(RO())
 const FO="nimble-spinner",NO=t=>t instanceof Ib,LO=t=>t instanceof Ab
 let BO=class extends Fi{}
 class PO extends(An(BO)){constructor(){super(...arguments),this.proxy=document.createElement("select")}}const VO=t=>!t.visuallyHidden&&!t.disabled&&!t.hidden,zO=t=>!t.visuallyHidden&&!t.hidden
-class HO extends PO{constructor(){super(...arguments),this.appearance=iv,this.errorVisible=!1,this.filterMode=lv.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,this.selectedOptionObserver=new MutationObserver((()=>{this.updateDisplayValue()}))}get collapsible(){return!(this.multiple||"number"==typeof this.size)}get labelContent(){return this.$fastController.isConnected?_b(this.labelSlot):""}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.open&&this.initializeOpenState(),this.observeSelectedOptionTextContent()}disconnectedCallback(){super.disconnectedCallback(),this.selectedOptionObserver?.disconnect()}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
+class HO extends PO{constructor(){super(...arguments),this.appearance=sv,this.errorVisible=!1,this.filterMode=lv.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,this.selectedOptionObserver=new MutationObserver((()=>{this.updateDisplayValue()}))}get collapsible(){return!(this.multiple||"number"==typeof this.size)}get labelContent(){return this.$fastController.isConnected?_b(this.labelSlot):""}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.open&&this.initializeOpenState(),this.observeSelectedOptionTextContent()}disconnectedCallback(){super.disconnectedCallback(),this.selectedOptionObserver?.disconnect()}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)
@@ -9668,7 +9692,7 @@ const UO=HO.compose({baseName:"select",baseClass:ns,template:(t,e)=>Q`
             class="anchored-region"
             fixed-placement
             auto-update-mode="auto"
-            vertical-default-position="${t=>t.positionAttribute===nv?"top":"bottom"}"
+            vertical-default-position="${t=>t.positionAttribute===iv?"top":"bottom"}"
             vertical-positioning-mode="${t=>t.positionAttribute?"locktodefault":"dynamic"}"
             horizontal-default-position="center"
             horizontal-positioning-mode="locktodefault"
@@ -9734,7 +9758,7 @@ const UO=HO.compose({baseName:"select",baseClass:ns,template:(t,e)=>Q`
             severity="error"
             class="error-icon"
         ></${Mg}>
-        ${tv}
+        ${Zg}
     `})
 Ke(HO,re,is),_i.getOrCreate().withPrefix("nimble").register(UO())
 const qO=Mt`
@@ -10518,6 +10542,7 @@ return!this.missingColumnId&&!this.duplicateColumnId}validateColumnSortIndices(t
 
     .header-row-action-container {
         display: flex;
+        align-items: center;
     }
 
     .checkbox-container {
@@ -11012,7 +11037,7 @@ const zF="nimble-table-cell",HF=Q`
         ${Gt((t=>!t.rowOperationGridCellHidden),Q`
             <span role="gridcell" class="row-operations-container">
                 ${Gt((t=>t.showSelectionCheckbox),Q`
-                    <${Kg}
+                    <${Xg}
                         ${Ut("selectionCheckbox")}
                         class="selection-checkbox"
                         ${""}
@@ -11022,7 +11047,7 @@ const zF="nimble-table-cell",HF=Q`
                         title="${t=>gb.getValueFor(t)}"
                         aria-label="${t=>gb.getValueFor(t)}"
                     >
-                    </${Kg}>
+                    </${Xg}>
                 `)}
             </span>
         `)}
@@ -11204,7 +11229,7 @@ const jF="nimble-table-row",WF=Mt`
     >
         ${Gt((t=>t.selectable),Q`
             <span role="gridcell" class="checkbox-container">
-                <${Kg}
+                <${Xg}
                     ${Ut("selectionCheckbox")}
                     class="selection-checkbox"
                     @change="${(t,e)=>t.onSelectionCheckboxChange(e.event)}"
@@ -11212,7 +11237,7 @@ const jF="nimble-table-row",WF=Mt`
                     title="${t=>mb.getValueFor(t)}"
                     aria-label="${t=>mb.getValueFor(t)}"
                 >
-                </${Kg}>
+                </${Xg}>
             </span>
         `)}
 
@@ -11270,7 +11295,7 @@ const YF="nimble-table-group-row",XF=Q`
                         `)}
                         ${Gt((t=>t.selectionMode===eF.multiple),Q`
                             <span class="checkbox-container">
-                                <${Kg}
+                                <${Xg}
                                     ${Ut("selectionCheckbox")}
                                     ${""}
                                     tabindex="-1"
@@ -11279,7 +11304,7 @@ const YF="nimble-table-group-row",XF=Q`
                                     title="${t=>fb.getValueFor(t)}"
                                     aria-label="${t=>fb.getValueFor(t)}"
                                 >
-                                </${Kg}>
+                                </${Xg}>
                             </span>
                         `)}
                         <span class="collapse-all-button-container">
@@ -12163,7 +12188,7 @@ const UL=Q`
             title=${t=>t.hasOverflow?t.cellRecord.value:null}
         >
             <span ${Ut("valueSpan")} class="value-label">${t=>t.cellRecord.value}</span>
-            <${ev} slot="end"></${ev}>
+            <${nv} slot="end"></${nv}>
 
             <slot name="${qL}" slot="menu"></slot>
         </${Qb}>
@@ -12291,7 +12316,7 @@ const $B=class extends We{}.compose({baseName:"tabs-toolbar",template:MB,styles:
 _i.getOrCreate().withPrefix("nimble").register($B())
 const DB="outline",EB="block",AB=Mt`
     ${Ps("inline-flex")}
-    ${av}
+    ${Wg}
 
     :host {
         font: ${od};
@@ -12507,13 +12532,13 @@ const OB=TB.compose({baseName:"text-area",baseClass:ms,template:()=>Q`
             class="error-icon ${t=>t.scrollbarWidth>=0?"scrollbar-width-calculated":""}"
             style="--ni-private-scrollbar-width: ${t=>t.scrollbarWidth}px;"
         ></${Mg}>
-        ${tv}
+        ${Zg}
     </div>
 `,styles:AB,shadowOptions:{delegatesFocus:!0}})
 _i.getOrCreate().withPrefix("nimble").register(OB())
 const RB="underline",FB="outline",NB="block",LB="frameless",BB=Mt`
     ${Ps("inline-block")}
-    ${av}
+    ${Wg}
 
     :host {
         font: ${od};
@@ -12815,7 +12840,7 @@ const VB=PB.compose({baseName:"text-field",baseClass:qi,template:(t,e)=>Q`
         <span part="actions">
             <slot name="actions"></slot>
         </span>
-        ${tv}
+        ${Zg}
     `})
 _i.getOrCreate().withPrefix("nimble").register(VB())
 const zB=Mt`