@ni/nimble-components 19.6.0 → 19.6.1

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

@@ -1169,7 +1169,7 @@ const Ur=ti.create(Sr($s)).withDefault((e=>cs(Tc(e),.2)))
 ti.create(Sr(Cs)).withDefault((e=>Ec(Tc(e))))
 const Gr=ti.create(Sr(ks)).withDefault((e=>cs(Tc(e),.15))),Wr=ti.create(Sr(Ss)).withDefault((e=>cs(function(e){return Fc(e,Xn,qn,Un)}(e),.1)))
 ti.create(Sr(_s)).withDefault((e=>cs(function(e){return Fc(e,Xn,qn,Un)}(e),.15)))
-const Kr=ti.create(Sr(Is)).withDefault((e=>Hc(e))),Xr=ti.create(Sr(Rs)).withDefault((e=>Ec(Hc(e)))),Yr=ti.create(Sr(Ms)).withDefault((e=>Vc(e))),Qr=ti.create(Sr(As)).withDefault((e=>function(e){return Fc(e,es,Ln,Un)}(e))),Jr=ti.create(Sr(Es)).withDefault((e=>function(e){return Fc(e,zn,Bn,Un)}(e))),ea=ti.create(Sr(Os)).withDefault((e=>function(e){return Fc(e,Dn,Tn,Un)}(e))),ta=ti.create(Sr(Fs)).withDefault((e=>Fc(e,Qn,Qn,Un))),oa=ti.create(Sr(Vs)).withDefault((e=>Fc(e,Xn,qn,Un)))
+const Kr=ti.create(Sr(Is)).withDefault((e=>Hc(e))),Xr=ti.create(Sr(Rs)).withDefault((e=>Ec(Hc(e)))),Yr=ti.create(Sr(Ms)).withDefault((e=>Vc(e))),Qr=ti.create(Sr(As)).withDefault((e=>function(e){return Fc(e,es,Ln,Un)}(e))),Jr=ti.create(Sr(Es)).withDefault((e=>function(e){return Fc(e,zn,Bn,Un)}(e))),ea=ti.create(Sr(Os)).withDefault((e=>function(e){return Fc(e,Dn,Tn,Un)}(e))),ta=ti.create(Sr(Fs)).withDefault((e=>Fc(e,Qn,os,Un))),oa=ti.create(Sr(Vs)).withDefault((e=>Fc(e,Xn,qn,Un)))
 ti.create(Sr(Hs)).withDefault((e=>function(e){switch(Lr.getValueFor(e)){case gs:return ds
 case vs:return hs
 case ms:return us
@@ -1186,7 +1186,7 @@ const pa=ti.create(Sr($r)).withDefault((e=>`0px 2px 4px ${cs(Fc(e,Kn,Kn,Kn),.16)
 Oc(er,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Noto Serif","400","25px","32px","Noto Serif Fallback"),Oc(Js,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Noto Serif","400","29.100000381469727px","40px","Noto Serif Fallback"),Oc(or,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","400","25px","32px","Source Sans Pro Fallback")
 const[va,ma,fa,ba,wa,xa,ya,$a]=Oc(ir,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","400","22px","28px","Source Sans Pro Fallback")
 Oc(nr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","400","19px","24px","Source Sans Pro Fallback"),Oc(sr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","300","16px","20px","Source Sans Pro Fallback")
-const[Ca,ka,Sa,_a,Ia,Ra,Ma,Aa]=Oc(rr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","300","12.800000190734863px","16px","Source Sans Pro Fallback"),[Ea,Oa,Fa,Va,Ha,Pa,Ta,Da]=Oc(ar,(e=>Pc(e)),(e=>cs(Pc(e),.3)),is,ns,ss,rs,Zr),[La,za,Ba,Na,Za,qa,ja,Ua]=Oc(lr,(e=>Fc(e,ts,os,cs(Un,.6))),(e=>cs(Pc(e),.3)),is,ns,ss,rs,Zr),[Ga,Wa,Ka,Xa,Ya,Qa,Ja,el]=Oc(cr,(e=>Fc(e,ts,os,os)),(e=>cs(Pc(e),.3)),is,ns,ss,rs,Zr),[tl,ol,il,nl,sl,rl,al,ll]=Oc(dr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),is,ns,ss,rs,Zr),[cl,dl,hl,ul,pl,gl,vl,ml]=Oc(hr,(e=>cs(Pc(e),.6)),(e=>cs(Pc(e),.3)),"Source Sans Pro","400","14px","18px","Source Sans Pro Fallback"),[fl,bl,wl,xl,yl,$l,Cl,kl]=Oc(ur,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","600","14px","18px","Source Sans Pro Fallback"),[Sl,_l,Il,Rl,Ml,Al,El,Ol]=Oc(pr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","400","14px","18px","Source Sans Pro Fallback"),[Fl,Vl,Hl,Pl,Tl,Dl,Ll,zl]=Oc(gr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","600","11px","16px","Source Sans Pro Fallback"),[Bl,Nl,Zl,ql,jl,Ul,Gl,Wl]=Oc(vr,(e=>cs(Pc(e),.6)),(e=>cs(Pc(e),.3)),"Source Sans Pro","600","11px","16px","Source Sans Pro Fallback"),[Kl,Xl,Yl,Ql,Jl,ec,tc,oc]=Oc(mr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","400","12.800000190734863px","16px","Source Sans Pro Fallback"),[ic,nc,sc,rc,ac,lc,cc,dc]=Oc(fr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","400","11px",as,"Source Sans Pro Fallback"),[hc,uc,pc,gc,vc,mc,fc,bc]=Oc(wr,(e=>Vc(e)),(e=>cs(Vc(e),.3)),"Source Sans Pro","400","11px",as,"Source Sans Pro Fallback"),[wc,xc,yc,$c,Cc,kc,Sc,_c]=Oc(tr,(e=>cs(Pc(e),.6)),(e=>cs(Pc(e),.3)),"Source Sans Pro","600","12.800000190734863px",as,"Source Sans Pro Fallback"),Ic=ti.create(Sr(qs)).withDefault("uppercase"),Rc=ti.create(Sr(Xs)).withDefault("0.075s"),Mc=ti.create(Sr(Ys)).withDefault("0.15s"),Ac=ti.create(Sr(Qs)).withDefault(ls)
+const[Ca,ka,Sa,_a,Ia,Ra,Ma,Aa]=Oc(rr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","300","12.800000190734863px","16px","Source Sans Pro Fallback"),[Ea,Oa,Fa,Va,Ha,Pa,Ta,Da]=Oc(ar,(e=>Pc(e)),(e=>cs(Pc(e),.3)),is,ns,ss,rs,Zr),[La,za,Ba,Na,Za,qa,ja,Ua]=Oc(lr,(e=>Fc(e,ts,os,cs(Un,.6))),(e=>cs(Pc(e),.3)),is,ns,ss,rs,Zr),[Ga,Wa,Ka,Xa,Ya,Qa,Ja,el]=Oc(cr,(e=>Fc(e,ts,os,os)),(e=>cs(Pc(e),.3)),is,ns,ss,rs,Zr),[tl,ol,il,nl,sl,rl,al,ll]=Oc(dr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),is,ns,ss,rs,Zr),[cl,dl,hl,ul,pl,gl,vl,ml]=Oc(hr,(e=>cs(Pc(e),.6)),(e=>cs(Pc(e),.3)),"Source Sans Pro","400","14px","18px","Source Sans Pro Fallback"),[fl,bl,wl,xl,yl,$l,Cl,kl]=Oc(ur,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","600","14px","18px","Source Sans Pro Fallback"),[Sl,_l,Il,Rl,Ml,Al,El,Ol]=Oc(pr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","400","14px","18px","Source Sans Pro Fallback"),[Fl,Vl,Hl,Pl,Tl,Dl,Ll,zl]=Oc(gr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","600","11px","16px","Source Sans Pro Fallback"),[Bl,Nl,Zl,ql,jl,Ul,Gl,Wl]=Oc(vr,(e=>cs(Pc(e),.6)),(e=>cs(Pc(e),.3)),"Source Sans Pro","600","11px","16px","Source Sans Pro Fallback"),[Kl,Xl,Yl,Ql,Jl,ec,tc,oc]=Oc(mr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","600","12.800000190734863px","16px","Source Sans Pro Fallback"),[ic,nc,sc,rc,ac,lc,cc,dc]=Oc(fr,(e=>Pc(e)),(e=>cs(Pc(e),.3)),"Source Sans Pro","400","11px",as,"Source Sans Pro Fallback"),[hc,uc,pc,gc,vc,mc,fc,bc]=Oc(wr,(e=>Vc(e)),(e=>cs(Vc(e),.3)),"Source Sans Pro","400","11px",as,"Source Sans Pro Fallback"),[wc,xc,yc,$c,Cc,kc,Sc,_c]=Oc(tr,(e=>cs(Pc(e),.6)),(e=>cs(Pc(e),.3)),"Source Sans Pro","600","12.800000190734863px",as,"Source Sans Pro Fallback"),Ic=ti.create(Sr(qs)).withDefault("uppercase"),Rc=ti.create(Sr(Xs)).withDefault("0.075s"),Mc=ti.create(Sr(Ys)).withDefault("0.15s"),Ac=ti.create(Sr(Qs)).withDefault(ls)
 function Ec(e){const{r:t,g:o,b:i}=Hn(e)
 return`${255*t}, ${255*o}, ${255*i}`}function Oc(e,t,o,i,n,s,r,a){if(""===e||""===i||""===n||""===s||""===r||""===a)throw new Error("createFontTokens parameter unexpectedly set to empty string")
 const l=ti.create(Sr(e)).withDefault(`${n} ${s}/${r} ${i}, ${a}`),c=e.split("-font"),d=c[0]
@@ -1194,7 +1194,7 @@ if(void 0===d||""!==c[1])throw new Error(`fontTokenName value of ${e} did not ha
 return[l,ti.create(Sr(`${d}-font-color`)).withDefault((e=>t(e))),ti.create(Sr(`${d}-disabled-font-color`)).withDefault((e=>o(e))),ti.create(Sr(`${d}-font-family`)).withDefault(`${i}`),ti.create(Sr(`${d}-font-weight`)).withDefault(`${n}`),ti.create(Sr(`${d}-font-size`)).withDefault(`${s}`),ti.create(Sr(`${d}-font-line-height`)).withDefault(`${r}`),ti.create(Sr(`${d}-fallback-font-family`)).withDefault(`${a}`)]}function Fc(e,t,o,i){switch(Lr.getValueFor(e)){case gs:return t
 case vs:return o
 case ms:return i
-default:return t}}function Vc(e){return Fc(e,Nn,"#ff4646",Un)}function Hc(e){return Fc(e,Xn,qn,Un)}function Pc(e){return Fc(e,Xn,qn,Un)}function Tc(e){return Fc(e,Qn,Qn,Un)}const Dc=fe`
+default:return t}}function Vc(e){return Fc(e,Nn,"#ff4646",Un)}function Hc(e){return Fc(e,Xn,qn,Un)}function Pc(e){return Fc(e,Xn,qn,Un)}function Tc(e){return Fc(e,Qn,os,Un)}const Dc=fe`
     ${xn("inline")}
 
     :host {
@@ -1365,7 +1365,13 @@ class jc{constructor(e,t,o){this.propertyName=e,this.value=t,this.styles=o}bind(
         outline: none;
         margin: 0;
         padding: 0 ${la};
-        transition: box-shadow ${Rc};
+        position: relative;
+        transition: box-shadow ${Rc} ease-in-out,
+            border-color ${Rc} ease-in-out,
+            background-size ${Rc} ease-in-out;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: center;
     }
 
     :host([content-hidden]) .control {
@@ -1380,26 +1386,55 @@ class jc{constructor(e,t,o){this.propertyName=e,this.value=t,this.styles=o}bind(
     }
 
     .control:hover {
+        border-color: ${ta};
         box-shadow: 0px 0px 0px ${ca} ${ta} inset;
-        outline: none;
     }
 
     .control${Cn} {
+        border-color: ${ta};
         box-shadow: 0px 0px 0px ${ca} ${ta} inset;
-        outline: ${ca} solid ${ta};
-        outline-offset: -4px;
     }
 
     .control:active {
         box-shadow: none;
-        outline: none;
+        background-image: linear-gradient(
+            ${Ur},
+            ${Ur}
+        );
+        background-size: calc(100% - 2px) calc(100% - 2px);
     }
 
     :host([disabled]) .control {
         box-shadow: none;
+        background-image: none;
+    }
+
+    .control::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        box-sizing: border-box;
+        outline: 0px solid transparent;
+        color: transparent;
+        background-clip: content-box;
+        transition: outline ${Rc} ease-in-out;
+    }
+
+    .control${Cn}::before {
+        outline: ${ca} solid ${ta};
+        outline-offset: -3px;
+    }
+
+    .control:active::before {
         outline: none;
     }
 
+    :host([disabled]) .control::before {
+        box-shadow: none;
+    }
+
     .content {
         display: contents;
     }
@@ -1440,77 +1475,57 @@ class jc{constructor(e,t,o){this.propertyName=e,this.value=t,this.styles=o}bind(
     }
 `.withBehaviors(Uc(Nc,fe`
             .control {
-                background-color: transparent;
                 border-color: rgba(${qr}, 0.3);
             }
 
             .control:hover {
                 background-color: transparent;
-                border-color: ${ta};
-            }
-
-            .control${Cn} {
-                background-color: transparent;
-                border-color: ${ta};
-            }
-
-            .control:active {
-                background-color: ${Ur};
-                border-color: ${Ur};
             }
 
             :host([disabled]) .control {
-                background-color: transparent;
-                border-color: rgba(${Xr}, 0.2);
+                border-color: rgba(${Xr}, 0.3);
             }
         `),Uc(Zc,fe`
-            .control {
-                background-color: transparent;
-                border-color: transparent;
-            }
-
             .control:hover {
                 background-color: transparent;
-                border-color: ${ta};
             }
 
             .control${Cn} {
                 background-color: transparent;
-                border-color: ${ta};
-            }
-
-            .control:active {
-                background-color: ${Ur};
-                border-color: ${Ur};
             }
 
             :host([disabled]) .control {
-                background-color: transparent;
                 border-color: transparent;
             }
         `),Uc(qc,fe`
             .control {
                 background-color: rgba(${Xr}, 0.1);
-                border-color: transparent;
             }
 
             .control:hover {
                 background-color: transparent;
-                border-color: ${ta};
+                background-image: linear-gradient(
+                    rgba(${Xr}, 0.1),
+                    rgba(${Xr}, 0.1)
+                );
+                background-size: calc(100% - 4px) calc(100% - 4px);
             }
 
             .control${Cn} {
-                background-color: rgba(${Xr}, 0.1);
-                border-color: ${ta};
-            }
-
-            .control${Cn}:hover {
                 background-color: transparent;
+                background-image: linear-gradient(
+                    rgba(${Xr}, 0.1),
+                    rgba(${Xr}, 0.1)
+                );
+                background-size: calc(100% - 4px) calc(100% - 4px);
             }
 
             .control:active {
-                background-color: ${Ur};
-                border-color: ${Ur};
+                background-image: linear-gradient(
+                    ${Ur},
+                    ${Ur}
+                );
+                background-size: calc(100% - 2px) calc(100% - 2px);
             }
 
             :host([disabled]) .control {
@@ -1532,7 +1547,8 @@ class jc{constructor(e,t,o){this.propertyName=e,this.value=t,this.styles=o}bind(
             }
 
             :host([appearance-variant='primary']) .control:active {
-                box-shadow: none;
+                box-shadow: 0px 0px 0px ${ca} ${Ur}
+                    inset;
             }
 
             :host([appearance-variant='primary'][disabled]) .control {
@@ -1540,10 +1556,9 @@ class jc{constructor(e,t,o){this.propertyName=e,this.value=t,this.styles=o}bind(
             }
         `),Uc(qc,fe`
             :host([appearance-variant='primary']) .control {
-                background-clip: padding-box;
                 border-color: rgba(${qr}, 0.3);
-                border-width: calc(2 * ${ca});
-                padding: 0 calc(${la} - ${ca});
+                box-shadow: 0px 0px 0px ${ca}
+                    rgba(${qr}, 0.3) inset;
             }
 
             :host([appearance-variant='primary'][content-hidden]) .control {
@@ -1552,7 +1567,7 @@ class jc{constructor(e,t,o){this.propertyName=e,this.value=t,this.styles=o}bind(
 
             :host([appearance-variant='primary']) .control:hover {
                 border-color: ${ta};
-                box-shadow: none;
+                box-shadow: 0px 0px 0px ${ca} ${ta} inset;
             }
 
             :host([appearance-variant='primary']) .control${Cn} {
@@ -1569,11 +1584,7 @@ class jc{constructor(e,t,o){this.propertyName=e,this.value=t,this.styles=o}bind(
             }
 
             :host([appearance-variant='primary']) .control:active {
-                background-clip: border-box;
-                border-color: ${Ur};
-                border-width: ${ca};
                 box-shadow: none;
-                padding: 0 ${la};
             }
 
             :host([appearance-variant='primary'][content-hidden])
@@ -1593,6 +1604,11 @@ class jc{constructor(e,t,o){this.propertyName=e,this.value=t,this.styles=o}bind(
                 .control {
                 padding: 0px;
             }
+
+            :host([appearance-variant='primary']) .control:active::before {
+                border-color: ${Ur};
+                border-width: ${ca};
+            }
         `)),Kc=fe`
     ${Gc}
     ${Wc}
@@ -1759,7 +1775,7 @@ const od=fe`
     :host {
         position: relative;
         box-sizing: border-box;
-        font: ${Sl};
+        font: ${Kl};
         height: ${sa};
         color: ${_l};
         align-items: center;
@@ -2676,7 +2692,7 @@ const og=fe`
     ${xn("inline-flex")}
 
     :host {
-        font: ${Kl};
+        font: ${Sl};
         align-items: center;
         cursor: pointer;
         outline: none;
@@ -2811,24 +2827,78 @@ const sg=ai.tagFor(ig),rg=fe`
     .control[aria-pressed='true'] {
         background-color: ${Ur};
         border-color: ${Ur};
+        position: relative;
+        transition: box-shadow ${Rc} ease-in-out,
+            border-color ${Rc} ease-in-out,
+            background-size ${Rc} ease-in-out;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        background-position: center;
     }
 
     .control[aria-pressed='true']:hover {
-        background-color: ${Ur};
+        border-color: ${ta};
+        box-shadow: 0px 0px 0px ${ca} ${ta} inset;
+        background-image: linear-gradient(
+            ${Ur},
+            ${Ur}
+        );
+        background-size: calc(100% - 4px) calc(100% - 4px);
     }
 
     .control[aria-pressed='true']${Cn} {
-        background-color: ${Ur};
+        background-color: transparent;
+        border-color: ${ta};
+        box-shadow: 0px 0px 0px ${ca} ${ta} inset;
+        background-image: linear-gradient(
+            ${Ur},
+            ${Ur}
+        );
+        background-size: calc(100% - 4px) calc(100% - 4px);
+    }
+
+    .control[aria-pressed='true']:active {
+        box-shadow: none;
+        background-image: linear-gradient(
+            ${Ur},
+            ${Ur}
+        );
+        background-size: calc(100% - 2px) calc(100% - 2px);
     }
 
     :host([disabled]) .control[aria-pressed='true'] {
-        background-color: ${Ur};
         border-color: ${Ur};
+        background-color: ${Ur};
+        background-image: none;
     }
 
     :host([disabled]) .control[aria-pressed='true']:hover {
-        background-color: ${Ur};
         border-color: ${Ur};
+        background-color: ${Ur};
+        box-shadow: none;
+    }
+
+    .control[aria-pressed='true']::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        box-sizing: border-box;
+        outline: 0px solid transparent;
+        outline: none;
+        background-clip: content-box;
+        transition: outline ${Rc} ease-in-out;
+    }
+
+    .control[aria-pressed='true']${Cn}::before {
+        outline: ${ca} solid ${ta};
+        outline-offset: -3px;
+        color: transparent;
+    }
+
+    .control[aria-pressed='true']:active::before {
+        outline: none;
     }
 `
 class ag extends Zi{constructor(){super(...arguments),this.appearance=Nc,this.contentHidden=!1}}e([ne],ag.prototype,"appearance",void 0),e([ne({attribute:"content-hidden",mode:"boolean"})],ag.prototype,"contentHidden",void 0),Et(ag,Ne,wo)
@@ -4433,7 +4503,7 @@ const xb=fe`
     ${xn("inline-flex")}
 
     :host {
-        font: ${Kl};
+        font: ${Sl};
         align-items: center;
         outline: none;
         width: fit-content;
@@ -4850,7 +4920,7 @@ const Tb=fe`
 
     :host {
         outline: none;
-        font: ${Kl};
+        font: ${Sl};
         color: ${Xl};
         flex-direction: column;
         cursor: pointer;