@ni/nimble-components 11.5.0 → 11.6.2

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

@@ -1696,10 +1696,7 @@ const Hh=mt`
     :host::before {
         content: '';
         position: absolute;
-        bottom: calc(
-            var(--ni-private-hover-indicator-width) +
-                var(--ni-private-indicator-lines-gap)
-        );
+        bottom: calc(${Jn} + var(--ni-private-indicator-lines-gap));
         width: 0px;
         height: 0px;
         justify-self: center;
@@ -1916,6 +1913,10 @@ const Hh=mt`
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
 
+    .control:focus-within {
+        border-bottom-color: ${jn};
+    }
+
     :host(.invalid) .control {
         border-bottom: var(--ni-private-bottom-border-width) solid ${Fn};
     }
@@ -2495,6 +2496,7 @@ const Td=mt`
         font: ${_r};
         cursor: pointer;
         justify-content: left;
+        height: ${Xn};
     }
 
     .content {
@@ -3178,11 +3180,43 @@ const tu=Zd.compose({baseName:"number-field",baseClass:fi,template:(t,e)=>X`
         ${Ih}
     `})
 js.getOrCreate().withPrefix("nimble").register(tu())
-const eu=mt`
+const eu="underline",su="outline",iu="block",ou=mt`
     ${Hh}
-`
-const su=class extends yi{setPositioning(){this.$fastController.isConnected&&(super.setPositioning(),this.updateListboxMaxHeightCssVariable())}slottedOptionsChanged(t,e){const s=this.value
-super.slottedOptionsChanged(t,e),s&&(this.value=s)}maxHeightChanged(){this.updateListboxMaxHeightCssVariable()}updateListboxMaxHeightCssVariable(){this.listbox&&this.listbox.style.setProperty("--ni-private-select-max-height",`${this.maxHeight}px`)}}.compose({baseName:"select",baseClass:yi,template:(t,e)=>X`
+`.withBehaviors(fh(eu,mt`
+            .control {
+                padding-top: ${Jn};
+                padding-left: calc(${Jn} + ${Gn} / 2);
+                padding-right: ${Jn};
+            }
+
+            :host([disabled]) .control {
+                border-color: rgba(${Dn}, 0.1);
+            }
+        `),fh(su,mt`
+            .control {
+                border: ${Jn} solid rgba(${Dn}, 0.3);
+            }
+
+            :host(.invalid) .errortext {
+                top: calc(${Xn} - ${Jn});
+            }
+        `),fh(iu,mt`
+            .control {
+                background-color: rgba(${Dn}, 0.1);
+                padding-left: calc(${Jn} + ${Gn} / 2);
+                padding-right: ${Jn};
+                padding-bottom: calc(${Jn});
+                border-bottom: ${Jn}
+                    rgba(${Dn}, 0.07);
+            }
+
+            :host([disabled]) .control {
+                background-color: rgba(${Dn}, 0.07);
+            }
+        `))
+class nu extends yi{constructor(){super(...arguments),this.appearance=eu}setPositioning(){this.$fastController.isConnected&&(super.setPositioning(),this.updateListboxMaxHeightCssVariable())}slottedOptionsChanged(t,e){const s=this.value
+super.slottedOptionsChanged(t,e),s&&(this.value=s)}maxHeightChanged(){this.updateListboxMaxHeightCssVariable()}updateListboxMaxHeightCssVariable(){this.listbox&&this.listbox.style.setProperty("--ni-private-select-max-height",`${this.maxHeight}px`)}}kn([ot],nu.prototype,"appearance",void 0)
+const ru=nu.compose({baseName:"select",baseClass:yi,template:(t,e)=>X`
     <template
         class="${t=>[t.collapsible&&"collapsible",t.collapsible&&t.open&&"open",t.disabled&&"disabled",t.collapsible&&t.position].filter(Boolean).join(" ")}"
         aria-activedescendant="${t=>t.ariaActiveDescendant}"
@@ -3235,9 +3269,9 @@ super.slottedOptionsChanged(t,e),s&&(this.value=s)}maxHeightChanged(){this.updat
             ></slot>
         </div>
     </template>
-`,styles:eu,indicator:Ta.data})
-js.getOrCreate().withPrefix("nimble").register(su())
-const iu=mt`
+`,styles:ou,indicator:Ta.data})
+js.getOrCreate().withPrefix("nimble").register(ru())
+const au=mt`
     ${so("inline-flex")}
 
     :host {
@@ -3402,7 +3436,7 @@ const iu=mt`
                 --ni-private-switch-indicator-border-color: ${po};
                 --ni-private-switch-indicator-border-disabled-color: ${En(po,.3)};
             }
-        `)),ou=X`
+        `)),lu=X`
     <template
         role="switch"
         aria-checked="${t=>t.checked}"
@@ -3437,9 +3471,9 @@ const iu=mt`
         </div>
     </template>
 `
-const nu=class extends _i{}.compose({baseClass:_i,baseName:"switch",template:ou,styles:iu})
-js.getOrCreate().withPrefix("nimble").register(nu())
-const ru=mt`
+const cu=class extends _i{}.compose({baseClass:_i,baseName:"switch",template:lu,styles:au})
+js.getOrCreate().withPrefix("nimble").register(cu())
+const hu=mt`
     ${so("inline-flex")}
 
     :host {
@@ -3533,13 +3567,13 @@ const ru=mt`
         width: 100%;
     }
 `
-const au=class extends Ii{}.compose({baseName:"tab",baseClass:Ii,template:(t,e)=>X`
+const du=class extends Ii{}.compose({baseName:"tab",baseClass:Ii,template:(t,e)=>X`
     <template slot="tab" role="tab" aria-disabled="${t=>t.disabled}">
         <slot></slot>
     </template>
-`,styles:ru})
-js.getOrCreate().withPrefix("nimble").register(au())
-const lu=mt`
+`,styles:hu})
+js.getOrCreate().withPrefix("nimble").register(du())
+const uu=mt`
     ${so("block")}
 
     :host {
@@ -3549,13 +3583,13 @@ const lu=mt`
         padding-top: ${Gn};
     }
 `
-const cu=class extends zi{}.compose({baseName:"tab-panel",baseClass:zi,template:(t,e)=>X`
+const pu=class extends zi{}.compose({baseName:"tab-panel",baseClass:zi,template:(t,e)=>X`
     <template slot="tabpanel" role="tabpanel">
         <slot></slot>
     </template>
-`,styles:lu})
-js.getOrCreate().withPrefix("nimble").register(cu())
-const hu=mt`
+`,styles:uu})
+js.getOrCreate().withPrefix("nimble").register(pu())
+const vu=mt`
     ${so("grid")}
 
     :host {
@@ -3578,7 +3612,7 @@ const hu=mt`
         grid-column-end: 4;
     }
 `
-const du=class extends Si{constructor(){super(),this.activeindicator=!1}}.compose({baseName:"tabs",baseClass:Si,template:(t,e)=>X`
+const gu=class extends Si{constructor(){super(),this.activeindicator=!1}}.compose({baseName:"tabs",baseClass:Si,template:(t,e)=>X`
     <template class="${t=>t.orientation}">
         ${It(0,e)}
         <div class="tablist" part="tablist" role="tablist">
@@ -3597,9 +3631,9 @@ const du=class extends Si{constructor(){super(),this.activeindicator=!1}}.compos
             <slot name="tabpanel" part="tabpanel" ${Ct("tabpanels")}></slot>
         </div>
     </template>
-`,styles:hu})
-js.getOrCreate().withPrefix("nimble").register(du())
-const uu=mt`
+`,styles:vu})
+js.getOrCreate().withPrefix("nimble").register(gu())
+const mu=mt`
     ${so("flex")}
 
     :host {
@@ -3617,15 +3651,15 @@ const uu=mt`
             rgba(${Dn}, 0.3);
         margin: calc(${Gn} / 4) calc(${Gn} / 2);
     }
-`,pu=X`
+`,fu=X`
     <template slot="end">
         <div class="separator"></div>
         <slot></slot>
     </template>
 `
-const vu=class extends de{}.compose({baseName:"tabs-toolbar",template:pu,styles:uu})
-js.getOrCreate().withPrefix("nimble").register(vu())
-const gu="outline",mu="block",fu=mt`
+const bu=class extends de{}.compose({baseName:"tabs-toolbar",template:fu,styles:mu})
+js.getOrCreate().withPrefix("nimble").register(bu())
+const wu="outline",xu="block",yu=mt`
     ${so("inline-flex")}
 
     :host {
@@ -3722,12 +3756,12 @@ const gu="outline",mu="block",fu=mt`
     :host([resize='vertical']) .control {
         resize: vertical;
     }
-`.withBehaviors(fh(gu,mt`
+`.withBehaviors(fh(wu,mt`
                 .control {
                     border-color: rgba(${Dn}, 0.3);
                     background-color: transparent;
                 }
-            `),fh(mu,mt`
+            `),fh(xu,mt`
                 .control {
                     background-color: rgba(${Dn}, 0.1);
                 }
@@ -3741,8 +3775,8 @@ const gu="outline",mu="block",fu=mt`
                     background-color: rgba(${Dn}, 0.1);
                 }
             `))
-class bu extends Mi{constructor(){super(...arguments),this.appearance=gu}}kn([ot],bu.prototype,"appearance",void 0)
-const wu=bu.compose({baseName:"text-area",baseClass:Mi,template:(t,e)=>X`
+class $u extends Mi{constructor(){super(...arguments),this.appearance=wu}}kn([ot],$u.prototype,"appearance",void 0)
+const Cu=$u.compose({baseName:"text-area",baseClass:Mi,template:(t,e)=>X`
     <template
         class="
             ${t=>t.readOnly?"readonly":""}
@@ -3797,9 +3831,9 @@ const wu=bu.compose({baseName:"text-area",baseClass:Mi,template:(t,e)=>X`
             ${bt("control")}
         ></textarea>
     </template>
-`,styles:fu,shadowOptions:{delegatesFocus:!0}})
-js.getOrCreate().withPrefix("nimble").register(wu())
-const xu="underline",yu="outline",$u="block",Cu="frameless",ku=mt`
+`,styles:yu,shadowOptions:{delegatesFocus:!0}})
+js.getOrCreate().withPrefix("nimble").register(Cu())
+const ku="underline",_u="outline",zu="block",Iu="frameless",Ou=mt`
     ${so("inline-block")}
     ${Mh}
 
@@ -3977,12 +4011,12 @@ const xu="underline",yu="outline",$u="block",Cu="frameless",ku=mt`
     slot[name='actions']::slotted(*) {
         ${Xn.cssCustomProperty}: 24px;
     }
-`.withBehaviors(fh(xu,mt`
+`.withBehaviors(fh(ku,mt`
             .root {
                 border-bottom-width: ${Jn};
                 padding-bottom: 0;
             }
-        `),fh($u,mt`
+        `),fh(zu,mt`
             .root {
                 background-color: rgba(${Dn}, 0.1);
             }
@@ -4010,12 +4044,12 @@ const xu="underline",yu="outline",$u="block",Cu="frameless",ku=mt`
             :host([disabled]) .root {
                 background-color: rgba(${Dn}, 0.07);
             }
-        `),fh(yu,mt`
+        `),fh(_u,mt`
             .root {
                 border-width: ${Jn};
                 padding: 0;
             }
-        `),fh(Cu,mt`
+        `),fh(Iu,mt`
             .control {
                 padding-left: ${Jn};
                 padding-right: ${Jn};
@@ -4035,8 +4069,8 @@ const xu="underline",yu="outline",$u="block",Cu="frameless",ku=mt`
                 filter: invert(100%);
             }
         `,Io))
-class _u extends pi{constructor(){super(...arguments),this.appearance=xu}connectedCallback(){super.connectedCallback(),this.control.setAttribute("aria-errormessage","errortext")}}kn([ot],_u.prototype,"appearance",void 0),kn([ot({attribute:"error-text"})],_u.prototype,"errorText",void 0)
-const zu=_u.compose({baseName:"text-field",baseClass:pi,template:(t,e)=>X`
+class Su extends pi{constructor(){super(...arguments),this.appearance=ku}connectedCallback(){super.connectedCallback(),this.control.setAttribute("aria-errormessage","errortext")}}kn([ot],Su.prototype,"appearance",void 0),kn([ot({attribute:"error-text"})],Su.prototype,"errorText",void 0)
+const Au=Su.compose({baseName:"text-field",baseClass:pi,template:(t,e)=>X`
     <template
         class="
             ${t=>t.readOnly?"readonly":""}
@@ -4096,7 +4130,7 @@ const zu=_u.compose({baseName:"text-field",baseClass:pi,template:(t,e)=>X`
             ${zt(0,e)}
         </div>
     </template>
-`,styles:ku,shadowOptions:{delegatesFocus:!0},end:X`
+`,styles:Ou,shadowOptions:{delegatesFocus:!0},end:X`
         <nimble-icon-exclamation-mark
             class="error-icon fail"
         ></nimble-icon-exclamation-mark>
@@ -4105,8 +4139,8 @@ const zu=_u.compose({baseName:"text-field",baseClass:pi,template:(t,e)=>X`
         </span>
         ${Ih}
     `})
-js.getOrCreate().withPrefix("nimble").register(zu())
-const Iu=mt`
+js.getOrCreate().withPrefix("nimble").register(Au())
+const Eu=mt`
     .positioning-region {
         display: flex;
         padding: ${Yn} ${Gn};
@@ -4131,7 +4165,7 @@ const Iu=mt`
         margin-left: auto;
     }
 `
-const Ou=class extends Li{}.compose({baseName:"toolbar",baseClass:Li,template:(t,e)=>X`
+const Hu=class extends Li{}.compose({baseName:"toolbar",baseClass:Li,template:(t,e)=>X`
     <template
         aria-label="${t=>t.ariaLabel}"
         aria-labelledby="${t=>t.ariaLabelledby}"
@@ -4151,9 +4185,9 @@ const Ou=class extends Li{}.compose({baseName:"toolbar",baseClass:Li,template:(t
             ${zt(0,e)}
         </div>
     </template>
-`,styles:Iu,shadowOptions:{delegatesFocus:!0}})
-js.getOrCreate().withPrefix("nimble").register(Ou())
-const Su=mt`
+`,styles:Eu,shadowOptions:{delegatesFocus:!0}})
+js.getOrCreate().withPrefix("nimble").register(Hu())
+const Mu=mt`
     ${so("inline-flex")}
 
     :host {
@@ -4176,7 +4210,7 @@ const Su=mt`
         display: inline-flex;
     }
 `
-const Au=class extends Qi{}.compose({baseName:"tooltip",baseClass:Qi,template:(t,e)=>X`
+const Vu=class extends Qi{}.compose({baseName:"tooltip",baseClass:Qi,template:(t,e)=>X`
         ${wt((t=>t.tooltipVisible),X`
             <${t.tagFor(je)}
                 fixed-placement="true"
@@ -4199,16 +4233,16 @@ const Au=class extends Qi{}.compose({baseName:"tooltip",baseClass:Qi,template:(t
                 </div>
             </${t.tagFor(je)}>
         `)}
-    `,styles:Su})
-js.getOrCreate().withPrefix("nimble").register(Au())
-const Eu="group-selected",Hu="all",Mu="leaves-only",Vu="none"
-class Lu{constructor(t,e){this.cache=new WeakMap,this.ltr=t,this.rtl=e}bind(t){this.attach(t)}unbind(t){const e=this.cache.get(t)
-e&&In.unsubscribe(e)}attach(t){const e=this.cache.get(t)||new Tu(this.ltr,this.rtl,t),s=In.getValueFor(t)
-In.subscribe(e),e.attach(s),this.cache.set(t,e)}}class Tu{constructor(t,e,s){this.ltr=t,this.rtl=e,this.source=s,this.attached=null}handleChange({target:t,token:e}){this.attach(e.getValueFor(t))}attach(t){this.attached!==this[t]&&(null!==this.attached&&this.source.$fastController.removeStyles(this.attached),this.attached=this[t],null!==this.attached&&this.source.$fastController.addStyles(this.attached))}}const Pu=class extends Zi{constructor(){super(...arguments),this.treeView=null,this.handleSelectedChange=t=>{t.target===this&&this.selected&&this.setGroupSelectionOnRootParentTreeItem(this)}}connectedCallback(){super.connectedCallback(),this.addEventListener("selected-change",this.handleSelectedChange),this.treeView=this.getParentTreeView(),this.treeView&&this.selected&&this.setGroupSelectionOnRootParentTreeItem(this)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("selected-change",this.handleSelectedChange),this.treeView=null}clearTreeGroupSelection(){const t=this.treeView?.querySelectorAll("[group-selected]")
-t?.forEach((t=>t.removeAttribute(Eu)))}setGroupSelectionOnRootParentTreeItem(t){this.clearTreeGroupSelection()
+    `,styles:Mu})
+js.getOrCreate().withPrefix("nimble").register(Vu())
+const Lu="group-selected",Tu="all",Pu="leaves-only",Ru="none"
+class Du{constructor(t,e){this.cache=new WeakMap,this.ltr=t,this.rtl=e}bind(t){this.attach(t)}unbind(t){const e=this.cache.get(t)
+e&&In.unsubscribe(e)}attach(t){const e=this.cache.get(t)||new Fu(this.ltr,this.rtl,t),s=In.getValueFor(t)
+In.subscribe(e),e.attach(s),this.cache.set(t,e)}}class Fu{constructor(t,e,s){this.ltr=t,this.rtl=e,this.source=s,this.attached=null}handleChange({target:t,token:e}){this.attach(e.getValueFor(t))}attach(t){this.attached!==this[t]&&(null!==this.attached&&this.source.$fastController.removeStyles(this.attached),this.attached=this[t],null!==this.attached&&this.source.$fastController.addStyles(this.attached))}}const Bu=class extends Zi{constructor(){super(...arguments),this.treeView=null,this.handleSelectedChange=t=>{t.target===this&&this.selected&&this.setGroupSelectionOnRootParentTreeItem(this)}}connectedCallback(){super.connectedCallback(),this.addEventListener("selected-change",this.handleSelectedChange),this.treeView=this.getParentTreeView(),this.treeView&&this.selected&&this.setGroupSelectionOnRootParentTreeItem(this)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("selected-change",this.handleSelectedChange),this.treeView=null}clearTreeGroupSelection(){const t=this.treeView?.querySelectorAll("[group-selected]")
+t?.forEach((t=>t.removeAttribute(Lu)))}setGroupSelectionOnRootParentTreeItem(t){this.clearTreeGroupSelection()
 let e=t
 for(;e?.parentElement!==this.treeView;)e=e?.parentElement
-e&&e.setAttribute(Eu,"true")}getParentTreeView(){return this.parentElement.closest("[role='tree']")}}.compose({baseName:"tree-item",baseClass:Zi,template:(t,e)=>{return X`
+e&&e.setAttribute(Lu,"true")}getParentTreeView(){return this.parentElement.closest("[role='tree']")}}.compose({baseName:"tree-item",baseClass:Zi,template:(t,e)=>{return X`
     <template
         role="treeitem"
         slot="${t=>t.isNestedItem()?"item":void 0}"
@@ -4265,7 +4299,7 @@ var s},styles:(t,e)=>mt`
             }
 
             ${""}
-            :host([${Eu}])::after {
+            :host([${Lu}])::after {
                 background: ${jn};
                 border-radius: 0px;
                 content: '';
@@ -4287,7 +4321,7 @@ var s},styles:(t,e)=>mt`
                 background: ${Pn};
             }
 
-            :host([${Eu}]) .positioning-region:hover {
+            :host([${Lu}]) .positioning-region:hover {
                 background: ${Tn};
             }
 
@@ -4397,7 +4431,7 @@ var s},styles:(t,e)=>mt`
             :host([expanded]) .items {
                 display: block;
             }
-        `.withBehaviors(new Lu(mt`
+        `.withBehaviors(new Du(mt`
                         ${""}
                         .expand-collapse-button {
                             left: var(
@@ -4430,8 +4464,8 @@ var s},styles:(t,e)=>mt`
                             transform: rotate(135deg);
                         }
                     `)),expandCollapseGlyph:Da.data})
-js.getOrCreate().withPrefix("nimble").register(Pu())
-const Ru=mt`
+js.getOrCreate().withPrefix("nimble").register(Bu())
+const Nu=mt`
     ${so("flex")}
 
     :host {
@@ -4444,14 +4478,14 @@ const Ru=mt`
         outline: none;
     }
 `
-class Du extends to{constructor(){super(...arguments),this.selectionMode=Hu}handleClick(t){if(t.defaultPrevented)return!1
+class ju extends to{constructor(){super(...arguments),this.selectionMode=Tu}handleClick(t){if(t.defaultPrevented)return!1
 if(!(t.target instanceof Element&&Ji(t.target)))return!0
 const e=t.target
-return!e.disabled&&(this.canSelect(e)?e.selected=!0:this.itemHasChildren(e)&&(e.expanded=!e.expanded),!0)}canSelect(t){switch(this.selectionMode){case Hu:return!0
-case Vu:return!1
-case Mu:return!this.itemHasChildren(t)
-default:return!0}}itemHasChildren(t){return null!==t.querySelector('[role="treeitem"]')}}kn([ot({attribute:"selection-mode"})],Du.prototype,"selectionMode",void 0)
-const Fu=Du.compose({baseName:"tree-view",baseClass:to,template:(t,e)=>X`
+return!e.disabled&&(this.canSelect(e)?e.selected=!0:this.itemHasChildren(e)&&(e.expanded=!e.expanded),!0)}canSelect(t){switch(this.selectionMode){case Tu:return!0
+case Ru:return!1
+case Pu:return!this.itemHasChildren(t)
+default:return!0}}itemHasChildren(t){return null!==t.querySelector('[role="treeitem"]')}}kn([ot({attribute:"selection-mode"})],ju.prototype,"selectionMode",void 0)
+const qu=ju.compose({baseName:"tree-view",baseClass:to,template:(t,e)=>X`
     <template
         role="tree"
         ${bt("treeView")}
@@ -4463,6 +4497,6 @@ const Fu=Du.compose({baseName:"tree-view",baseClass:to,template:(t,e)=>X`
     >
         <slot ${Ct("slottedTreeItems")}></slot>
     </template>
-`,styles:Ru})
-js.getOrCreate().withPrefix("nimble").register(Fu())}()
+`,styles:Nu})
+js.getOrCreate().withPrefix("nimble").register(qu())}()
 //# sourceMappingURL=all-components-bundle.min.js.map