@api-client/ui 0.3.2 → 0.3.3

package/build/src/md/tabs/internals/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkC,MAAM,KAAK,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACjF,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAElD,OAAO,qCAAqC,CAAA;AAC5C,OAAO,6BAA6B,CAAA;AACpC,OAAO,wBAAwB,CAAA;AAU/B;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,CAAS,EAAE,EAAU;IAC/C,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA;AACvB,CAAC;;sBASmC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAzB,MAAO,SAAQ,WAAU;;;4CAO3C,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAGxC,KAAK,CAAC,UAAU,CAAC;mCAEjB,KAAK,CAAC,UAAU,CAAC;oCAQjB,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAMzC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAO3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAS1B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAE1B,KAAK,EAAE;qCAIP,KAAK,EAAE;qCAQP,KAAK,EAAE;YAhDR,qMAAmB,gBAAgB,6BAAhB,gBAAgB,2GAAgB;YAEhC,0KAAmB,OAAO,6BAAP,OAAO,yFAAc;YAExC,0KAAmB,OAAO,6BAAP,OAAO,yFAAc;YAQhB,6KAAS,QAAQ,6BAAR,QAAQ,2FAA0B;YAMzD,mLAAS,UAAU,6BAAV,UAAU,+FAAqB;YAOzC,6KAAS,QAAQ,6BAAR,QAAQ,2FAAoB;YASrC,wMAAS,iBAAiB,6BAAjB,iBAAiB,6GAAkB;YAE/D,4LAAmB,aAAa,6BAAb,aAAa,qGAAuB;YAIvD,gLAAmB,SAAS,6BAAT,SAAS,6FAAQ;YAQpC,gLAAS,SAAS,6BAAT,SAAS,6FAAqB;;;QAvDhD,KAAK,GAAY,EAAE,CAAA;QAEnB,UAAU,GAAiB,IAAI,CAAA;QAE/B,YAAY,GAAiB,IAAI,CAAA;QAGjC,qGAAmD;QAAnD,IAAmB,gBAAgB,sDAAgB;QAAnD,IAAmB,gBAAgB,4DAAgB;QAEhC,mJAAwC;QAAxC,IAAmB,OAAO,6CAAc;QAAxC,IAAmB,OAAO,mDAAc;QAExC,0IAAwC;QAAxC,IAAmB,OAAO,6CAAc;QAAxC,IAAmB,OAAO,mDAAc;QAQhB,mIAAkC,SAAS;QAEtF;;;WAGG;WALmF;QANtF;;;;;WAKG;QACwC,IAAS,QAAQ,8CAA0B;QAA3C,IAAS,QAAQ,oDAA0B;QAMzD,iJAAwC;QAJrE;;;WAGG;QAC0B,IAAS,UAAU,gDAAqB;QAAxC,IAAS,UAAU,sDAAqB;QAOzC,+IAAqC;QALjE;;;;WAIG;QACyB,IAAS,QAAQ,8CAAoB;QAArC,IAAS,QAAQ,oDAAoB;QASrC,sJAA6B,eAAe,GAAA;QAPxE;;;;;;WAMG;QACyB,IAAS,iBAAiB,uDAAkB;QAA5C,IAAS,iBAAiB,6DAAkB;QAE/D,gKAAuD;QAAvD,IAAmB,aAAa,mDAAuB;QAAvD,IAAmB,aAAa,yDAAuB;QAEtD,aAAa,6DAAS;QAEvB,+EAA+B,KAAK,EAAA;QAApC,IAAmB,SAAS,+CAAQ;QAApC,IAAmB,SAAS,qDAAQ;QAEnC,QAAQ,yDAAsB;QAM/B,uFAAuC;QAJhD;;;WAGG;QACM,IAAS,SAAS,+CAAqB;QAAvC,IAAS,SAAS,qDAAqB;QAEhD;YACE,KAAK,EAAE,CAAA;YAEP,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;gBAC7E,SAAS,EAAE,GAAG;gBACd,UAAU,EAAE,KAAK;aAClB,CAAC,CAAA;QACJ,CAAC;QAEkB,UAAU,CAAC,EAAwB;YACpD,IAAI,EAAE,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;gBACxB,IAAI,CAAC,gBAAgB,EAAE,CAAA;YACzB,CAAC;YACD,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,CAAA;QACtB,CAAC;QAEQ,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC/B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;YACtC,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC;QAEQ,oBAAoB;YAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;YAC5B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QAC/B,CAAC;QAES,oBAAoB,CAAC,OAAoC;YACjE,MAAM,CAAC,KAAK,CAAC,GAAG,OAAO,CAAA;YACvB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,cAAc,CAAA;QACvC,CAAC;QAES,KAAK,CAAC,WAAW;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;YAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;YACnD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;YAClB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;gBACxD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;YACxB,CAAC;YACD,MAAM,IAAI,CAAC,cAAc,CAAA;YACzB,IAAI,CAAC,eAAe,EAAE,CAAA;QACxB,CAAC;QAED;;WAEG;QACO,SAAS,CAAC,OAAgB;YAClC,IAAI,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;gBAC3C,OAAO,KAAK,CAAA;YACd,CAAC;YACD,OAAO,OAAO,CAAC,SAAS,KAAK,QAAQ,CAAA;QACvC,CAAC;QAES,YAAY,CAAC,OAAc;YACnC,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC;gBACrB,OAAO,KAAK,CAAA;YACd,CAAC;YACD,IAAI,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACrD,OAAO,KAAK,CAAA;YACd,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC;QAES,eAAe;YACvB,MAAM,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;YAC/D,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACvB,OAAM;YACR,CAAC;YACD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,iBAAiB,CAAC,KAAK,QAAQ,CAAC,CAAA;YAC9E,IAAI,IAAI,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;gBAChC,OAAM;YACR,CAAC;YACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;QAC1B,CAAC;QAES,aAAa,CAAC,GAAW,EAAE,KAAK,GAAG,KAAK;YAChD,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;YAC3B,IAAI,UAAU,KAAK,GAAG,EAAE,CAAC;gBACvB,GAAG,CAAC,SAAS,EAAE,CAAA;gBACf,OAAM;YACR,CAAC;YACD,IAAI,CAAC,YAAY,GAAG,UAAU,CAAA;YAC9B,IAAI,UAAU,EAAE,CAAC;gBACf,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;YAC/B,CAAC;YACD,IAAI,GAAG,EAAE,CAAC;gBACR,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;gBAC3B,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,UAAU,CAAC,CAAA;gBACrC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;oBACpB,mEAAmE;oBACnE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;gBACxB,CAAC;YACH,CAAC;QACH,CAAC;QAED,YAAY,CAAC,IAAW;YACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;YACtC,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;gBACjB,OAAM;YACR,CAAC;YACD,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;YAC3D,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAqB,QAAQ,EAAE;gBAC5C,MAAM,EAAE;oBACN,IAAI;oBACJ,KAAK;oBACL,MAAM,EAAE,SAAS;iBAClB;aACF,CAAC,CACH,CAAA;QACH,CAAC;QAES,UAAU,CAAC,GAAU,EAAE,KAAK,GAAG,KAAK;YAC5C,IAAI,CAAC,UAAU,GAAG,GAAG,CAAA;YACrB,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;gBAClC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;YAClC,CAAC;YACD,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;YACzC,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;YACjC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAA;YACnB,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;YAC5B,GAAG,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAA;YAC7E,IAAI,KAAK,EAAE,CAAC;gBACV,GAAG,CAAC,KAAK,EAAE,CAAA;YACb,CAAC;QACH,CAAC;QAES,YAAY,CAAC,GAAU;YAC/B,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;YAC1C,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;YAClC,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAA;YACpB,GAAG,CAAC,SAAS,GAAG,KAAK,CAAA;QACvB,CAAC;QAES,gBAAgB;YACxB,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;YACzC,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,OAAM;YACR,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,YAAY,CAAC,CAAA;QAChD,CAAC;QAES,KAAK,CAAC,eAAe,CAAC,GAAU,EAAE,GAAkB;YAC5D,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;YAC1C,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,OAAM;YACR,CAAC;YACD,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;YAChC,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC1B,IAAI,CAAC,aAAa,GAAG,SAAS,CAAA;gBAC9B,OAAM;YACR,CAAC;YAED,IAAI,CAAC,GAAG,EAAE,CAAC;gBACT,2CAA2C;gBAC3C,GAAG,CAAC,SAAS,GAAG,IAAI,CAAA;gBACpB,OAAM;YACR,CAAC;YACD,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAA;YAC7C,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAA;YAC/E,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;gBACnE,OAAM;YACR,CAAC;YAED,6DAA6D;YAC7D,8CAA8C;YAC9C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;YACrB,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAA;YAC9E,IAAI,CAAC,aAAa,GAAG,EAAE,IAAI,EAAE,CAAA;YAC7B,MAAM,IAAI,CAAC,cAAc,CAAA;YACzB,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YAE1G,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAA;YAC7B,CAAC;YACD,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE;gBAC5C,QAAQ,EAAE,GAAG;gBACb,UAAU,EAAE,CAAC;gBACb,MAAM,EAAE,MAAM,CAAC,YAAY;aAC5B,CAAC,CAAA;YACF,MAAM,WAAW,GAAc;gBAC7B,IAAI,EAAE,GAAG,KAAK,IAAI;aACnB,CAAA;YACD,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBAC5C,IAAI,CAAC,aAAa,GAAG,WAAW,CAAA;gBAChC,IAAI,CAAC,aAAa,GAAG,SAAS,CAAA;gBAC9B,GAAG,CAAC,SAAS,GAAG,IAAI,CAAA;gBACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;YACxB,CAAC,CAAC,CAAA;YACF,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBAC5C,IAAI,CAAC,aAAa,GAAG,WAAW,CAAA;YAClC,CAAC,CAAC,CAAA;YACF,IAAI,CAAC,aAAa,GAAG,aAAa,CAAA;QACpC,CAAC;QAES,aAAa,yDAAY;QAEzB,cAAc,CAAC,GAAU;YACjC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;YACvD,MAAM,OAAO,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAA;YAC3C,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAA;YAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,cAAc;YACtD,MAAM,IAAI,GAAG,cAAc,GAAG,OAAO,CAAC,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,MAAM,CAAA;YAC7D,OAAO,GAAG,IAAI,IAAI,CAAA;QACpB,CAAC;QAES,gBAAgB,CAAC,GAAU;YACnC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;YACvD,MAAM,OAAO,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAA;YAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,cAAc;YACtD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,GAAG,MAAM,CAAA;YACxD,OAAO,GAAG,cAAc,IAAI,CAAA;QAC9B,CAAC;QAES,mBAAmB,CAAC,KAAa,EAAE,KAAa;YACxD,OAAO;gBACL;oBACE,IAAI,EAAE,KAAK;oBACX,KAAK,EAAE,MAAM;iBACd;gBACD;oBACE,KAAK,EAAE,MAAM;iBACd;gBACD;oBACE,IAAI,EAAE,KAAK;oBACX,KAAK,EAAE,MAAM;iBACd;aACF,CAAA;QACH,CAAC;QAES,qBAAqB,CAAC,KAAa,EAAE,KAAa;YAC1D,OAAO;gBACL;oBACE,IAAI,EAAE,KAAK;iBACZ;gBACD;oBACE,IAAI,EAAE,KAAK;iBACZ;aACF,CAAA;QACH,CAAC;QAES,mBAAmB,CAAC,CAAe;YAC3C,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAA;QAC3B,CAAC;QAES,qBAAqB,CAAC,CAAgB;YAC9C,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;gBACxC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAA;YAC3B,CAAC;QACH,CAAC;QAES,iBAAiB,CAAC,CAAQ;YAClC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;YACtB,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,CAAA;YAC7B,IAAI,IAAuB,CAAA;YAC3B,OAAO,CAAC,IAAI,EAAE,CAAC;gBACb,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAW,CAAA;gBAClC,IAAI,CAAC,IAAI,EAAE,CAAC;oBACV,MAAK;gBACP,CAAC;gBACD,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;oBACzB,IAAI,GAAG,IAAI,CAAA;gBACb,CAAC;YACH,CAAC;YACD,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;QAChC,CAAC;QAES,gBAAgB;YACxB,MAAM,EAAE,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,CAAA;YAC3C,IAAI,aAAa,KAAK,CAAC,EAAE,CAAC;gBACxB,OAAM;YACR,CAAC;YACD,IAAI,IAAI,GAAG,aAAa,GAAG,EAAE,CAAA;YAC7B,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;gBACb,IAAI,GAAG,CAAC,CAAA;YACV,CAAC;YACD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;YACzB,OAAO,CAAC,QAAQ,CAAC;gBACf,QAAQ,EAAE,QAAQ;gBAClB,IAAI;aACL,CAAC,CAAA;QACJ,CAAC;QAES,iBAAiB;YACzB,MAAM,EAAE,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,CAAA;YAC3C,IAAI,IAAI,GAAG,aAAa,GAAG,EAAE,CAAA;YAC7B,IAAI,IAAI,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;gBACrD,IAAI,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAA;YAClD,CAAC;YACD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;YACzB,OAAO,CAAC,QAAQ,CAAC;gBACf,QAAQ,EAAE,QAAQ;gBAClB,IAAI;aACL,CAAC,CAAA;QACJ,CAAC;QAES,YAAY,CAAC,CAAQ;YAC7B,MAAM,GAAG,GAAG,CAAC,CAAC,MAAqB,CAAA;YACnC,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,UAAU,CAAA;QACrC,CAAC;QAES,aAAa,CAAC,CAAgB;YACtC,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;gBAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;gBAC/E,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;YAC/B,CAAC;iBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;gBAClC,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;gBACnF,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;YAC/B,CAAC;QACH,CAAC;QAED,eAAe,CAAC,IAAW;YACzB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;YACtB,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;YACpC,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;gBACjB,OAAO,IAAI,CAAA;YACb,CAAC;YACD,IAAI,CAAC,GAAG,QAAQ,CAAA;YAChB,IAAI,MAA+B,CAAA;YACnC,GAAG,CAAC;gBACF,CAAC,EAAE,CAAA;gBACH,IAAI,CAAC,KAAK,QAAQ,EAAE,CAAC;oBACnB,uDAAuD;oBACvD,OAAO,IAAI,CAAA;gBACb,CAAC;gBACD,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;gBACpB,IAAI,CAAC,GAAG,EAAE,CAAC;oBACT,CAAC,GAAG,KAAK,CAAC,MAAM,CAAA;oBAChB,SAAQ;gBACV,CAAC;gBACD,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC3B,MAAM,GAAG,GAAG,CAAA;gBACd,CAAC;YACH,CAAC,QAAQ,CAAC,MAAM,EAAC;YACjB,OAAQ,MAAgB,IAAI,IAAI,CAAA;QAClC,CAAC;QAED,WAAW,CAAC,IAAW;YACrB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;YACtB,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;YACpC,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;gBACjB,OAAO,IAAI,CAAA;YACb,CAAC;YACD,IAAI,CAAC,GAAG,QAAQ,CAAA;YAChB,IAAI,IAA6B,CAAA;YACjC,GAAG,CAAC;gBACF,CAAC,EAAE,CAAA;gBACH,IAAI,CAAC,KAAK,QAAQ,EAAE,CAAC;oBACnB,yDAAyD;oBACzD,OAAO,IAAI,CAAA;gBACb,CAAC;gBACD,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;gBACpB,IAAI,CAAC,GAAG,EAAE,CAAC;oBACT,CAAC,GAAG,CAAC,CAAC,CAAA;oBACN,SAAQ;gBACV,CAAC;gBACD,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC3B,IAAI,GAAG,GAAG,CAAA;gBACZ,CAAC;YACH,CAAC,QAAQ,CAAC,IAAI,EAAC;YACf,OAAQ,IAAc,IAAI,IAAI,CAAA;QAChC,CAAC;QAEQ,MAAM;YACb,MAAM,OAAO,GAAc;gBACzB,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;aAC9B,CAAA;YACD,OAAO,IAAI,CAAA;oBACK,QAAQ,CAAC,OAAO,CAAC;UAC3B,IAAI,CAAC,uBAAuB,EAAE;wCACA,IAAI,CAAC,YAAY,eAAe,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,UAAU,EAAE;UACtG,IAAI,CAAC,kBAAkB,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE;;;KAGxD,CAAA;QACH,CAAC;QAES,UAAU;YAClB,OAAO,IAAI,CAAA;qBACM,IAAI,CAAC,WAAW;gBACrB,IAAI,CAAC,mBAAmB;kBACtB,IAAI,CAAC,qBAAqB;aAC/B,CAAA;QACX,CAAC;QAES,eAAe;YACvB,MAAM,OAAO,GAAc;gBACzB,SAAS,EAAE,IAAI;gBACf,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS;gBACpC,SAAS,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW;aACzC,CAAA;YACD,OAAO,IAAI,CAAA;oBACK,QAAQ,CAAC,OAAO,CAAC;2DACsB,QAAQ,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC;;KAExF,CAAA;QACH,CAAC;QAES,uBAAuB;YAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;gBACrB,OAAO,OAAO,CAAA;YAChB,CAAC;YACD,OAAO,IAAI,CAAA;uFACwE,IAAI,CAAC,gBAAgB;;;WAGjG,CAAA;QACT,CAAC;QAES,kBAAkB;YAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;gBACrB,OAAO,OAAO,CAAA;YAChB,CAAC;YACD,OAAO,IAAI,CAAA;yFAC0E,IAAI,CAAC,iBAAiB;;;WAGpG,CAAA;QACT,CAAC;;;AA5eH;;;;;;GAMG;AACH,sBAseC","sourcesContent":["import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js'\nimport { Easing } from '../../motion/animation.js'\nimport UiTab from './Tab.js'\nimport '../../icon-button/ui-icon-button.js'\nimport '../../divider/ui-divider.js'\nimport '../../icons/ui-icon.js'\n\nexport type TabsPriority = 'primary' | 'secondary'\n\nexport interface TabSelectionDetail {\n  item: UiTab\n  index: number\n  select: string | null\n}\n\n/**\n * Calculates value in percentages\n * @param w Element width\n * @param w0 Parent width\n * @return The percentage of element's width relative to parent.\n */\nexport function calcPercent(w: number, w0: number): number {\n  return (100 * w) / w0\n}\n\n/**\n * A container for tabs.\n *\n * @fires select - A non bubbling event when selection change through user interaction.\n *                The `event.detail` object contains the `item` and `index` properties.\n *                It also has the `select` property with the value of the `selectedAttribute` on the tab.\n */\nexport default class UiTabs extends LitElement {\n  items: UiTab[] = []\n\n  activeItem: UiTab | null = null\n\n  previousItem: UiTab | null = null\n\n  @queryAssignedElements({ flatten: true })\n  protected accessor assignedElements!: HTMLElement[]\n\n  @query('.pointer') protected accessor pointer!: HTMLElement\n\n  @query('.content') protected accessor content!: HTMLElement\n\n  /**\n   * The priority of the tabs.\n   *\n   * @default primary\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor priority: TabsPriority = 'primary'\n\n  /**\n   * If true, tabs are scrollable and the tab width is based on the label width.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor scrollable: boolean | undefined\n\n  /**\n   * The value of the selected tab.\n   * This is matched with the `aria-controls` of the tab.\n   * @attribute\n   */\n  @property({ type: String }) accessor selected: string | undefined\n\n  /**\n   * The attribute on the `ui-tab` that indicates which value for `selected`\n   * corresponds to which tab.\n   *\n   * @default aria-controls\n   * @attribute\n   */\n  @property({ type: String }) accessor selectedAttribute = `aria-controls`\n\n  @state() protected accessor pointerStyles: StyleInfo | undefined\n\n  protected contentScroll?: number\n\n  @state() protected accessor indicated = false\n\n  protected observer: IntersectionObserver\n\n  /**\n   * This is set by the intersection observer. Once the tabs are in the view it turns to `true`.\n   * This we can properly visualize selection.\n   */\n  @state() accessor isVisible: boolean | undefined\n\n  constructor() {\n    super()\n\n    this.observer = new IntersectionObserver(this.intersectionCallback.bind(this), {\n      threshold: 1.0,\n      rootMargin: '0px',\n    })\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('isVisible')) {\n      this.handleVisibility()\n    }\n    super.willUpdate(cp)\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tablist')\n    }\n    this.observer.observe(this)\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.observer.unobserve(this)\n  }\n\n  protected intersectionCallback(entries: IntersectionObserverEntry[]): void {\n    const [entry] = entries\n    this.isVisible = entry.isIntersecting\n  }\n\n  protected async updateItems(): Promise<void> {\n    const elements = this.assignedElements || []\n    const items = elements.filter(this.isTabItem, this)\n    this.items = items\n    if (this.activeItem && !items.includes(this.activeItem)) {\n      this.activeItem = null\n    }\n    await this.updateComplete\n    this.ensureSelection()\n  }\n\n  /**\n   * @return Whether the given element is a list item element.\n   */\n  protected isTabItem(element: Element): element is UiTab {\n    if (element.nodeType !== Node.ELEMENT_NODE) {\n      return false\n    }\n    return element.localName === 'ui-tab'\n  }\n\n  protected isSelectable(element: UiTab): boolean {\n    if (element.disabled) {\n      return false\n    }\n    if (element.hidden && element.hasAttribute('hidden')) {\n      return false\n    }\n    return true\n  }\n\n  protected ensureSelection(): void {\n    const { selected, selectedAttribute, activeItem, items } = this\n    if (!selectedAttribute) {\n      return\n    }\n    const item = items.find((i) => i.getAttribute(selectedAttribute) === selected)\n    if (item && item === activeItem) {\n      return\n    }\n    this.makeSelection(item)\n  }\n\n  protected makeSelection(tab?: UiTab, focus = false): void {\n    const { activeItem } = this\n    if (activeItem === tab) {\n      tab.highlight()\n      return\n    }\n    this.previousItem = activeItem\n    if (activeItem) {\n      this.deselectItem(activeItem)\n    }\n    if (tab) {\n      this.selectItem(tab, focus)\n      this.positionPointer(tab, activeItem)\n      if (this.activeItem) {\n        // we set this here so we won't notify selection when initializing.\n        this.notifySelect(tab)\n      }\n    }\n  }\n\n  notifySelect(item: UiTab): void {\n    const index = this.items.indexOf(item)\n    if (index === -1) {\n      return\n    }\n    const attrValue = item.getAttribute(this.selectedAttribute)\n    this.dispatchEvent(\n      new CustomEvent<TabSelectionDetail>('select', {\n        detail: {\n          item,\n          index,\n          select: attrValue,\n        },\n      })\n    )\n  }\n\n  protected selectItem(tab: UiTab, focus = false): void {\n    this.activeItem = tab\n    if (this.hasAttribute('tabindex')) {\n      this.removeAttribute('tabindex')\n    }\n    tab.setAttribute('aria-selected', 'true')\n    tab.setAttribute('tabindex', '0')\n    tab.selected = true\n    tab.priority = this.priority\n    tab.scrollIntoView({ inline: 'nearest', behavior: 'auto', block: 'nearest' })\n    if (focus) {\n      tab.focus()\n    }\n  }\n\n  protected deselectItem(tab: UiTab): void {\n    tab.setAttribute('aria-selected', 'false')\n    tab.setAttribute('tabindex', '-1')\n    tab.selected = false\n    tab.indicated = false\n  }\n\n  protected handleVisibility(): void {\n    const { previousItem, activeItem } = this\n    if (!activeItem) {\n      return\n    }\n    this.positionPointer(activeItem, previousItem)\n  }\n\n  protected async positionPointer(tab: UiTab, old?: UiTab | null): Promise<void> {\n    const { items, pointer, isVisible } = this\n    if (!isVisible) {\n      return\n    }\n    const index = items.indexOf(tab)\n    if (index < 0 || !pointer) {\n      this.pointerStyles = undefined\n      return\n    }\n\n    if (!old) {\n      // no start animation, just show indicator.\n      tab.indicated = true\n      return\n    }\n    const isPrimary = this.priority === 'primary'\n    const final = isPrimary ? this.getPrimaryLeft(tab) : this.getSecondaryLeft(tab)\n    if (this.pointerStyles && this.pointerStyles.left === `${final}px`) {\n      return\n    }\n\n    // first position this indicator in the place of the old one.\n    // update the view and then run the animation.\n    this.indicated = true\n    const left = isPrimary ? this.getPrimaryLeft(old) : this.getSecondaryLeft(old)\n    this.pointerStyles = { left }\n    await this.updateComplete\n    const frames = isPrimary ? this.getPrimaryKeyframes(left, final) : this.getSecondaryKeyframes(left, final)\n\n    if (this.moveAnimation) {\n      this.moveAnimation.cancel()\n    }\n    const moveAnimation = pointer.animate(frames, {\n      duration: 360,\n      iterations: 1,\n      easing: Easing.DECELERATION,\n    })\n    const finalStyles: StyleInfo = {\n      left: `${final}px`,\n    }\n    moveAnimation.addEventListener('finish', () => {\n      this.pointerStyles = finalStyles\n      this.moveAnimation = undefined\n      tab.indicated = true\n      this.indicated = false\n    })\n    moveAnimation.addEventListener('cancel', () => {\n      this.pointerStyles = finalStyles\n    })\n    this.moveAnimation = moveAnimation\n  }\n\n  protected moveAnimation?: Animation\n\n  protected getPrimaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect()\n    const tabRect = tab.getBoundingClientRect()\n    const leftFromParent = tabRect.x - contentBox.x\n    const offset = this.scrollable ? 48 : 0 // left button\n    const left = leftFromParent + tabRect.width / 2 - 20 + offset\n    return `${left}px`\n  }\n\n  protected getSecondaryLeft(tab: UiTab): string {\n    const contentBox = this.content.getBoundingClientRect()\n    const tabRect = tab.getBoundingClientRect()\n    const offset = this.scrollable ? 48 : 0 // left button\n    const leftFromParent = tabRect.x - contentBox.x + offset\n    return `${leftFromParent}px`\n  }\n\n  protected getPrimaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n        width: `40px`,\n      },\n      {\n        width: `80px`,\n      },\n      {\n        left: final,\n        width: `40px`,\n      },\n    ]\n  }\n\n  protected getSecondaryKeyframes(start: string, final: string): Keyframe[] {\n    return [\n      {\n        left: start,\n      },\n      {\n        left: final,\n      },\n    ]\n  }\n\n  protected contentClickHandler(e: PointerEvent): void {\n    this.activateFromEvent(e)\n  }\n\n  protected contentKeyDownHandler(e: KeyboardEvent): void {\n    if (['Enter', 'Space'].includes(e.code)) {\n      this.activateFromEvent(e)\n    }\n  }\n\n  protected activateFromEvent(e: Event): void {\n    const { items } = this\n    const path = e.composedPath()\n    let item: UiTab | undefined\n    while (!item) {\n      const next = path.shift() as UiTab\n      if (!next) {\n        break\n      }\n      if (items.includes(next)) {\n        item = next\n      }\n    }\n    if (!item) {\n      return\n    }\n    this.makeSelection(item, true)\n  }\n\n  protected handleScrollLeft(): void {\n    const { contentScroll = 0, content } = this\n    if (contentScroll === 0) {\n      return\n    }\n    let left = contentScroll - 80\n    if (left < 0) {\n      left = 0\n    }\n    this.contentScroll = left\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    })\n  }\n\n  protected handleScrollRight(): void {\n    const { contentScroll = 0, content } = this\n    let left = contentScroll + 80\n    if (left + content.clientWidth > content.scrollWidth) {\n      left = content.scrollWidth - content.clientWidth\n    }\n    this.contentScroll = left\n    content.scrollTo({\n      behavior: 'smooth',\n      left,\n    })\n  }\n\n  protected handleScroll(e: Event): void {\n    const div = e.target as HTMLElement\n    this.contentScroll = div.scrollLeft\n  }\n\n  protected handleKeyDown(e: KeyboardEvent): void {\n    if (e.code === 'ArrowRight') {\n      e.preventDefault()\n      const tab = this.activeItem ? this.getNextItem(this.activeItem) : this.items[0]\n      this.makeSelection(tab, true)\n    } else if (e.code === 'ArrowLeft') {\n      e.preventDefault()\n      const tab = this.activeItem ? this.getPreviousItem(this.activeItem) : this.items[0]\n      this.makeSelection(tab, true)\n    }\n  }\n\n  getPreviousItem(item: UiTab): UiTab {\n    const { items } = this\n    const curIndex = items.indexOf(item)\n    if (curIndex < 0) {\n      return item\n    }\n    let i = curIndex\n    let result: HTMLElement | undefined\n    do {\n      i--\n      if (i === curIndex) {\n        // looped back from the end, no active element to find.\n        return item\n      }\n      const tmp = items[i]\n      if (!tmp) {\n        i = items.length\n        continue\n      }\n      if (this.isSelectable(tmp)) {\n        result = tmp\n      }\n    } while (!result)\n    return (result as UiTab) || item\n  }\n\n  getNextItem(item: UiTab): UiTab {\n    const { items } = this\n    const curIndex = items.indexOf(item)\n    if (curIndex < 0) {\n      return item\n    }\n    let i = curIndex\n    let next: HTMLElement | undefined\n    do {\n      i++\n      if (i === curIndex) {\n        // looped back from the start, no active element to find.\n        return item\n      }\n      const tmp = items[i]\n      if (!tmp) {\n        i = -1\n        continue\n      }\n      if (this.isSelectable(tmp)) {\n        next = tmp\n      }\n    } while (!next)\n    return (next as UiTab) || item\n  }\n\n  override render(): TemplateResult {\n    const classes: ClassInfo = {\n      surface: true,\n      scrollable: !!this.scrollable,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\">\n        ${this.renderLeftScrollControl()}\n        <div class=\"content\" @scroll=\"${this.handleScroll}\" @keydown=\"${this.handleKeyDown}\">${this.renderSlot()}</div>\n        ${this.rightScrollControl()} ${this.renderIndicator()}\n        <div class=\"divider\"></div>\n      </div>\n    `\n  }\n\n  protected renderSlot(): TemplateResult {\n    return html`<slot\n      @slotchange=\"${this.updateItems}\"\n      @click=\"${this.contentClickHandler}\"\n      @keydown=\"${this.contentKeyDownHandler}\"\n    ></slot>`\n  }\n\n  protected renderIndicator(): TemplateResult {\n    const classes: ClassInfo = {\n      indicator: true,\n      indicated: this.indicated,\n      primary: this.priority === 'primary',\n      secondary: this.priority === 'secondary',\n    }\n    return html`\n      <div class=\"${classMap(classes)}\">\n        <span role=\"presentation\" class=\"pointer\" style=\"${styleMap(this.pointerStyles || {})}\"></span>\n      </div>\n    `\n  }\n\n  protected renderLeftScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing\n    }\n    return html` <div class=\"scroll-control left\">\n      <ui-icon-button aria-label=\"Scroll tabs left\" title=\"Scroll tabs left\" @click=\"${this.handleScrollLeft}\">\n        <ui-icon icon=\"chevronLeft\"></ui-icon>\n      </ui-icon-button>\n    </div>`\n  }\n\n  protected rightScrollControl(): TemplateResult | typeof nothing {\n    if (!this.scrollable) {\n      return nothing\n    }\n    return html`<div class=\"scroll-control right\">\n      <ui-icon-button aria-label=\"Scroll tabs right\" title=\"Scroll tabs right\" @click=\"${this.handleScrollRight}\">\n        <ui-icon icon=\"chevronRight\"></ui-icon>\n      </ui-icon-button>\n    </div>`\n  }\n}\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js'\nimport { Easing } from '../../motion/animation.js'\nimport UiTab from './Tab.js'\nimport '../../icon-button/ui-icon-button.js'\nimport '../../divider/ui-divider.js'\nimport '../../icons/ui-icon.js'\n\nexport type TabsPriority = 'primary' | 'secondary'\n\nexport interface TabSelectionDetail {\n  /**\n   * The selected tab.\n   */\n  item: UiTab\n  /**\n   * The index of the selected tab.\n   */\n  index: number\n}\n\nexport interface SizingInfo {\n  left: number\n  width: number\n}\n\n/**\n * Calculates value in percentages\n * @param w Element width\n * @param w0 Parent width\n * @return The percentage of element's width relative to parent.\n */\nexport function calcPercent(w: number, w0: number): number {\n  return (100 * w) / w0\n}\n\n/**\n * A container for tabs.\n *\n * @fires change - A non bubbling event when selection change through user interaction.\n */\nexport default class UiTabs extends LitElement {\n  activeItem: UiTab | null = null\n\n  previousItem: UiTab | null = null\n\n  /**\n   * The currently selected tab, `null` only when there are no tab children.\n   */\n  get activeTab(): UiTab | null {\n    return this.tabs.find((tab) => tab.selected) ?? null\n  }\n\n  set activeTab(tab: UiTab | null) {\n    // Ignore setting activeTab to null. As long as there are children, one tab\n    // must be selected.\n    if (tab) {\n      this.activateTab(tab)\n    }\n  }\n\n  /**\n   * The index of the currently selected tab.\n   */\n  get activeTabIndex() {\n    return this.tabs.findIndex((tab) => tab.selected)\n  }\n\n  /**\n   * Sets the active tab by index.\n   */\n  set activeTabIndex(index) {\n    const activateTabAtIndex = () => {\n      const tab = this.tabs[index]\n      // Ignore out-of-bound indices.\n      if (tab) {\n        this.activateTab(tab)\n      }\n    }\n    if (!this.slotElement) {\n      // This is needed to support setting the activeTabIndex via a lit property\n      // binding.\n      //\n      // ```ts\n      // html`\n      //   <md-tabs .activeTabIndex=${1}>\n      //     <md-tab>First</md-tab>\n      //     <md-tab>Second</md-tab>\n      //   </md-tabs>\n      // `;\n      // ```\n      //\n      // It's needed since lit's rendering lifecycle is asynchronous, and the\n      // `<slot>` element hasn't rendered, so `tabs` is empty.\n      this.updateComplete.then(activateTabAtIndex)\n      return\n    }\n    activateTabAtIndex()\n  }\n\n  get focusedTab() {\n    return this.tabs.find((tab) => tab.matches(':focus-within'))\n  }\n\n  @queryAssignedElements({ flatten: true, selector: 'ui-tab' }) private accessor tabs!: UiTab[]\n\n  @query('.tabs') private accessor tabsScrollerElement!: HTMLElement\n  @query('slot') private accessor slotElement!: HTMLSlotElement\n\n  @query('.pointer') private accessor pointer!: HTMLElement\n\n  /**\n   * The priority of the tabs.\n   *\n   * @default primary\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor priority: TabsPriority = 'primary'\n\n  @state() private accessor pointerStyles: StyleInfo | undefined\n\n  @state() private accessor indicated = false\n\n  private observer: IntersectionObserver\n\n  /**\n   * This is set by the intersection observer. Once the tabs are in the view it turns to `true`.\n   * This we can properly visualize selection.\n   */\n  @state() accessor isVisible: boolean | undefined\n\n  /**\n   * Whether or not to automatically select a tab when it is focused.\n   */\n  @property({ type: Boolean }) accessor autoActivate = false\n\n  private readonly internals = (this as HTMLElement).attachInternals()\n\n  constructor() {\n    super()\n    this.internals.role = 'tablist'\n    this.observer = new IntersectionObserver(this.intersectionCallback.bind(this), {\n      threshold: 1.0,\n      rootMargin: '0px',\n    })\n    this.addEventListener('keydown', this.handleKeydown.bind(this))\n    this.addEventListener('keyup', this.handleKeyup.bind(this))\n    this.addEventListener('focusout', this.handleFocusout.bind(this))\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('isVisible')) {\n      this.handleVisibility()\n    }\n    super.willUpdate(cp)\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.observer.observe(this)\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tablist')\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.observer.unobserve(this)\n  }\n\n  protected intersectionCallback(entries: IntersectionObserverEntry[]): void {\n    const [entry] = entries\n    this.isVisible = entry.isIntersecting\n  }\n\n  /**\n   * Scrolls the toolbar, if overflowing, to the active tab, or the provided\n   * tab.\n   *\n   * @param tabToScrollTo The tab that should be scrolled to. Defaults to the\n   *     active tab.\n   * @return A Promise that resolves after the tab has been scrolled to.\n   */\n  async scrollToTab(tabToScrollTo?: UiTab | null) {\n    await this.updateComplete\n    const { tabs } = this\n    tabToScrollTo ??= this.activeTab\n    if (!tabToScrollTo || !tabs.includes(tabToScrollTo) || !this.tabsScrollerElement) {\n      return\n    }\n\n    // wait for tabs to render.\n    await Promise.all(tabs.map((tab) => tab.updateComplete))\n    tabToScrollTo.scrollIntoView({\n      block: 'nearest',\n      inline: 'nearest',\n      behavior: !this.focusedTab ? 'instant' : 'auto',\n    })\n  }\n\n  protected handleVisibility(): void {\n    const { previousItem, activeItem } = this\n    if (!activeItem) {\n      return\n    }\n    this.positionPointer(activeItem, previousItem)\n  }\n\n  protected async positionPointer(tab: UiTab, old?: UiTab | null): Promise<void> {\n    const { pointer, isVisible } = this\n    if (!isVisible) {\n      tab.indicated = true\n      return\n    }\n    const index = this.tabs.indexOf(tab)\n    if (index < 0 || !pointer) {\n      this.pointerStyles = undefined\n      return\n    }\n\n    if (!old) {\n      // no start animation, just show indicator.\n      tab.indicated = true\n      return\n    }\n    const isPrimary = this.priority === 'primary'\n    const final = this.getTabSizing(tab)\n    if (this.pointerStyles && this.pointerStyles.left === `${final.left}px`) {\n      tab.indicated = true\n      return\n    }\n\n    // first position this indicator in the place of the old one.\n    // update the view and then run the animation.\n    this.indicated = true\n    const starting = this.getTabSizing(old)\n    this.pointerStyles = { left: `${starting.left}px`, width: `${starting.width}px` }\n    await this.updateComplete\n    const frames = isPrimary ? this.getPrimaryKeyframes(starting, final) : this.getSecondaryKeyframes(starting, final)\n\n    if (this.moveAnimation) {\n      this.moveAnimation.cancel()\n    }\n    const moveAnimation = pointer.animate(frames, {\n      duration: 200,\n      iterations: 1,\n      easing: Easing.EMPHASIZED_DECELERATE,\n    })\n    const finalStyles: StyleInfo = {\n      left: `${final.left}px`,\n      width: `${final.width}px`,\n    }\n    moveAnimation.addEventListener('finish', () => {\n      this.pointerStyles = finalStyles\n      this.moveAnimation = undefined\n      tab.indicated = true\n      this.indicated = false\n    })\n    moveAnimation.addEventListener('cancel', () => {\n      this.pointerStyles = finalStyles\n    })\n    this.moveAnimation = moveAnimation\n  }\n\n  protected moveAnimation?: Animation\n\n  protected getTabSizing(tab: UiTab): SizingInfo {\n    const contentBox = this.tabsScrollerElement.getBoundingClientRect()\n    const sizing = tab.getIndicatorSizing()\n    sizing.left = sizing.left - contentBox.x\n    return sizing\n  }\n\n  protected getPrimaryKeyframes(start: SizingInfo, final: SizingInfo): Keyframe[] {\n    return [\n      {\n        left: `${start.left}px`,\n        width: `${start.width}px`,\n      },\n      {\n        left: `${final.left}px`,\n        width: `${final.width}px`,\n      },\n    ]\n  }\n\n  protected getSecondaryKeyframes(start: SizingInfo, final: SizingInfo): Keyframe[] {\n    return [\n      {\n        left: `${start.left}px`,\n        width: `${start.width}px`,\n      },\n      {\n        left: `${final.left}px`,\n        width: `${final.width}px`,\n      },\n    ]\n  }\n\n  protected async handleTabClick(e: PointerEvent): Promise<void> {\n    const tab = e.composedPath().find((el) => isTab(el)) as UiTab | undefined\n    // Allow event to bubble\n    await new Promise((resolve) => setTimeout(resolve, 0))\n    if (e.defaultPrevented || !tab || tab.selected) {\n      return\n    }\n    this.activateTab(tab)\n  }\n\n  private activateTab(activeTab: UiTab): void {\n    const { tabs } = this\n    const previousTab = this.activeTab\n    if (!tabs.includes(activeTab) || previousTab === activeTab) {\n      // Ignore setting activeTab to a tab element that is not a child.\n      return\n    }\n    for (const tab of tabs) {\n      tab.selected = tab === activeTab\n    }\n    if (previousTab) {\n      // Don't dispatch a change event if activating a tab when no previous tabs\n      // were selected, such as when md-tabs auto-selects the first tab.\n      const detail: TabSelectionDetail = {\n        item: activeTab,\n        index: this.tabs.indexOf(activeTab),\n      }\n      const defaultPrevented = !this.dispatchEvent(\n        new CustomEvent('change', { detail, bubbles: false, cancelable: true })\n      )\n      if (defaultPrevented) {\n        for (const tab of tabs) {\n          tab.selected = tab === previousTab\n        }\n        return\n      }\n      previousTab.indicated = false\n    }\n    activeTab.indicated = false\n    this.positionPointer(activeTab, previousTab)\n    this.updateFocusableTab(activeTab)\n    this.scrollToTab(activeTab)\n  }\n\n  private updateFocusableTab(focusableTab: UiTab) {\n    for (const tab of this.tabs) {\n      tab.tabIndex = tab === focusableTab ? 0 : -1\n    }\n  }\n\n  private async handleKeydown(event: KeyboardEvent) {\n    // Allow event to bubble.\n    await new Promise((resolve) => setTimeout(resolve, 0))\n    const isLeft = event.key === 'ArrowLeft'\n    const isRight = event.key === 'ArrowRight'\n    const isHome = event.key === 'Home'\n    const isEnd = event.key === 'End'\n    // Ignore non-navigation keys\n    if (event.defaultPrevented || (!isLeft && !isRight && !isHome && !isEnd)) {\n      return\n    }\n\n    const { tabs } = this\n    // Don't try to select another tab if there aren't any.\n    if (tabs.length < 2) {\n      return\n    }\n\n    // Prevent default interactions, such as scrolling.\n    event.preventDefault()\n\n    let indexToFocus: number\n    if (isHome || isEnd) {\n      indexToFocus = isHome ? 0 : tabs.length - 1\n    } else {\n      // Check if moving forwards or backwards\n      const isRtl = getComputedStyle(this).direction === 'rtl'\n      const forwards = isRtl ? isLeft : isRight\n      const { focusedTab } = this\n      if (!focusedTab) {\n        // If there is not already a tab focused, select the first or last tab\n        // based on the direction we're traveling.\n        indexToFocus = forwards ? 0 : tabs.length - 1\n      } else {\n        const focusedIndex = this.tabs.indexOf(focusedTab)\n        indexToFocus = forwards ? focusedIndex + 1 : focusedIndex - 1\n        if (indexToFocus >= tabs.length) {\n          // Return to start if moving past the last item.\n          indexToFocus = 0\n        } else if (indexToFocus < 0) {\n          // Go to end if moving before the first item.\n          indexToFocus = tabs.length - 1\n        }\n      }\n    }\n\n    const tabToFocus = tabs[indexToFocus]\n    tabToFocus.focus()\n    if (this.autoActivate) {\n      this.activateTab(tabToFocus)\n    } else {\n      this.updateFocusableTab(tabToFocus)\n    }\n  }\n\n  // scroll to item on keyup.\n  private handleKeyup() {\n    this.scrollToTab(this.focusedTab ?? this.activeTab)\n  }\n\n  private handleFocusout() {\n    // restore focus to selected item when blurring the tab bar.\n    if (this.matches(':focus-within')) {\n      return\n    }\n\n    const { activeTab } = this\n    if (activeTab) {\n      this.updateFocusableTab(activeTab)\n    }\n  }\n\n  private handleSlotChange() {\n    for (const tab of this.tabs) {\n      tab.priority = this.priority\n      if (tab.selected) {\n        tab.indicated = true\n      }\n    }\n    const firstTab = this.tabs[0]\n    if (!this.activeTab && firstTab) {\n      // If the active tab was removed, auto-select the first one. There should\n      // always be a selected tab while the bar has children.\n      this.activateTab(firstTab)\n    }\n\n    // When children shift, ensure the active tab is visible. For example, if\n    // many children are added before the active tab, it'd be pushed off screen.\n    // This ensures it stays visible.\n    this.scrollToTab(this.activeTab)\n    if (this.activeTab) {\n      this.updateFocusableTab(this.activeTab)\n    }\n  }\n\n  override render(): TemplateResult {\n    return html`\n      <div class=\"tabs\">${this.renderSlot()}</div>\n      ${this.renderIndicator()}\n      <ui-divider class=\"divider\"></ui-divider>\n    `\n  }\n\n  protected renderSlot(): TemplateResult {\n    return html`<slot @slotchange=\"${this.handleSlotChange}\" @click=\"${this.handleTabClick}\"></slot>`\n  }\n\n  protected renderIndicator(): TemplateResult {\n    const classes: ClassInfo = {\n      indicator: true,\n      indicated: this.indicated,\n      primary: this.priority === 'primary',\n      secondary: this.priority === 'secondary',\n    }\n    return html`\n      <div class=\"${classMap(classes)}\">\n        <span role=\"presentation\" class=\"pointer\" style=\"${styleMap(this.pointerStyles || {})}\"></span>\n      </div>\n    `\n  }\n}\n\nfunction isTab(element: unknown): element is UiTab {\n  return element instanceof UiTab\n}\n"]}

package/build/src/md/tabs/internals/Tabs.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tabs.styles.ts"],"names":[],"mappings":";AAEA,wBAmEC"}
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tabs.styles.ts"],"names":[],"mappings":";AAEA,wBA+DC"}

package/build/src/md/tabs/internals/Tabs.styles.js

@@ -2,30 +2,31 @@ import { css } from 'lit';
 export default css `
   :host {
     display: block;
+    overflow: hidden;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    position: relative;
   }
 
-  .content {
+  .tabs {
     display: flex;
     align-items: center;
-    overflow: hidden;
+    overflow: auto;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
     flex: 1 1 0%;
+    align-self: stretch;
   }
 
-  .content ::slotted(*) {
+  .tabs ::slotted(*) {
     flex: 1;
     white-space: nowrap;
   }
 
-  .surface {
-    position: relative;
-    display: flex;
-    align-items: center;
-    /* background-color: var(--md-sys-color-surface); */
-  }
-
   .indicator {
     position: absolute;
-    bottom: 0px;
+    bottom: 1px;
     left: 0px;
     right: 0px;
     overflow: hidden;
@@ -58,13 +59,8 @@ export default css `
   }
 
   .divider {
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
+    align-self: stretch;
     margin: 0;
-    height: 1px;
-    background-color: var(--md-sys-color-surface-variant);
   }
 `;
 //# sourceMappingURL=Tabs.styles.js.map

package/build/src/md/tabs/internals/Tabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  .content {\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    flex: 1 1 0%;\n  }\n\n  .content ::slotted(*) {\n    flex: 1;\n    white-space: nowrap;\n  }\n\n  .surface {\n    position: relative;\n    display: flex;\n    align-items: center;\n    /* background-color: var(--md-sys-color-surface); */\n  }\n\n  .indicator {\n    position: absolute;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    overflow: hidden;\n    display: none;\n  }\n\n  .indicator.indicated {\n    display: block;\n  }\n\n  .indicator.primary {\n    height: 3px;\n  }\n\n  .indicator.secondary {\n    height: 2px;\n  }\n\n  .pointer {\n    height: inherit;\n    display: inline-block;\n    left: 0;\n    width: 40px;\n    background-color: var(--md-sys-color-primary);\n    position: absolute;\n  }\n\n  .indicator.primary .pointer {\n    border-radius: 3px 3px 0 0;\n  }\n\n  .divider {\n    position: absolute;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    margin: 0;\n    height: 1px;\n    background-color: var(--md-sys-color-surface-variant);\n  }\n`\n"]}
+{"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    overflow: hidden;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n  }\n\n  .tabs {\n    display: flex;\n    align-items: center;\n    overflow: auto;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    flex: 1 1 0%;\n    align-self: stretch;\n  }\n\n  .tabs ::slotted(*) {\n    flex: 1;\n    white-space: nowrap;\n  }\n\n  .indicator {\n    position: absolute;\n    bottom: 1px;\n    left: 0px;\n    right: 0px;\n    overflow: hidden;\n    display: none;\n  }\n\n  .indicator.indicated {\n    display: block;\n  }\n\n  .indicator.primary {\n    height: 3px;\n  }\n\n  .indicator.secondary {\n    height: 2px;\n  }\n\n  .pointer {\n    height: inherit;\n    display: inline-block;\n    left: 0;\n    width: 40px;\n    background-color: var(--md-sys-color-primary);\n    position: absolute;\n  }\n\n  .indicator.primary .pointer {\n    border-radius: 3px 3px 0 0;\n  }\n\n  .divider {\n    align-self: stretch;\n    margin: 0;\n  }\n`\n"]}

package/demo/md/tabs/tabs.html

@@ -11,6 +11,25 @@
     .demo-row {
       margin: 20px 0;
     }
+
+    .demo .demo-section {
+      max-width: 858px;
+      margin: 0 auto 80px auto;
+    }
+
+    .demo h2, .demo h3 {
+      margin-bottom: 36px;
+    }
+
+    .frame {
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
+    }
+
+    .scrollable {
+      max-width: 700px;
+    }
   </style>
 </head>
 <body>

package/demo/md/tabs/tabs.ts

@@ -7,6 +7,10 @@ import { iconWrapper } from '../../../src/md/icons/Icons.js'
 import { reactive } from '../../../src/decorators/index.js'
 import { TabSelectionDetail } from '../../../src/md/tabs/internals/Tabs.js'
 
+import '@material/web/tabs/primary-tab.js'
+import '@material/web/tabs/secondary-tab.js'
+import '@material/web/tabs/tabs.js'
+
 const travelIcon = iconWrapper(
   svg`<path d="M8.5 22v-1.5l2-1.5v-5.5L2 16v-2l8.5-5V3.5q0-.625.438-1.062Q11.375 2 12 2t1.062.438q.438.437.438 1.062V9l8.5 5v2l-8.5-2.5V19l2 1.5V22L12 21Z"/>`
 )
@@ -31,14 +35,16 @@ class ComponentDemoPage extends DemoPage {
 
   @reactive() accessor selected4 = 'cars4'
 
-  handleSelect(e: CustomEvent): void {
+  @reactive() accessor selected5 = 'travel5'
+
+  handleTabsChange(e: CustomEvent): void {
     const info = e.detail as TabSelectionDetail
     console.log(info)
     const property = (e.target as HTMLElement).dataset.property as 'selected1' | undefined
     if (!property) {
       return
     }
-    this[property] = info.select as string
+    this[property] = info.item.getAttribute('aria-controls') || ''
   }
 
   contentTemplate(): TemplateResult {
@@ -52,19 +58,22 @@ class ComponentDemoPage extends DemoPage {
     const { selected1 } = this
     return html`
       <section class="demo-section">
-        <h2 class="title-large">Primary tabs</h2>
-        <ui-tabs .selected="${selected1}" data-property="selected1" @select="${this.handleSelect}">
-          <ui-tab aria-controls="travel1">Travel</ui-tab>
-          <ui-tab aria-controls="hotel1">Hotel</ui-tab>
-          <ui-tab aria-controls="travelHotel1">Travel + Hotel</ui-tab>
-          <ui-tab aria-controls="cars1">Cars</ui-tab>
-        </ui-tabs>
-
-        <div class="page">
-          <p id="travel1" ?hidden="${selected1 !== 'travel1'}">Travel page</p>
-          <p id="hotel1" ?hidden="${selected1 !== 'hotel1'}">Hotel page</p>
-          <p id="travelHotel1" ?hidden="${selected1 !== 'travelHotel1'}">Hotel & travel page</p>
-          <p id="cars1" ?hidden="${selected1 !== 'cars1'}">Cars page</p>
+        <h2 class="display-large">Primary tabs</h2>
+
+        <div class="frame">
+          <ui-tabs data-property="selected1" @change="${this.handleTabsChange}">
+            <ui-tab aria-controls="travel1">Travel</ui-tab>
+            <ui-tab aria-controls="hotel1">Hotel</ui-tab>
+            <ui-tab aria-controls="travelHotel1">Travel + Hotel</ui-tab>
+            <ui-tab aria-controls="cars1">Cars</ui-tab>
+          </ui-tabs>
+
+          <div class="page">
+            <p id="travel1" ?hidden="${selected1 !== 'travel1'}">Travel page</p>
+            <p id="hotel1" ?hidden="${selected1 !== 'hotel1'}">Hotel page</p>
+            <p id="travelHotel1" ?hidden="${selected1 !== 'travelHotel1'}">Hotel & travel page</p>
+            <p id="cars1" ?hidden="${selected1 !== 'cars1'}">Cars page</p>
+          </div>
         </div>
       </section>
     `
@@ -74,90 +83,131 @@ class ComponentDemoPage extends DemoPage {
     const { selected2 } = this
     return html`
       <section class="demo-section">
-        <h2 class="title-large">Secondary tabs</h2>
-        <ui-tabs priority="secondary" .selected="${selected2}" data-property="selected2" @select="${this.handleSelect}">
-          <ui-tab aria-controls="travel2">Travel</ui-tab>
-          <ui-tab aria-controls="hotel2">Hotel</ui-tab>
-          <ui-tab aria-controls="travelHotel2">Travel + Hotel</ui-tab>
-          <ui-tab aria-controls="cars2">Cars</ui-tab>
-        </ui-tabs>
-
-        <div class="page">
-          <p id="travel2" ?hidden="${selected2 !== 'travel2'}">Travel page</p>
-          <p id="hotel2" ?hidden="${selected2 !== 'hotel2'}">Hotel page</p>
-          <p id="travelHotel2" ?hidden="${selected2 !== 'travelHotel2'}">Hotel & travel page</p>
-          <p id="cars2" ?hidden="${selected2 !== 'cars2'}">Cars page</p>
+        <h2 class="display-large">Secondary tabs</h2>
+
+        <div class="frame">
+          <ui-tabs priority="secondary" data-property="selected2" @change="${this.handleTabsChange}">
+            <ui-tab aria-controls="travel2">Travel</ui-tab>
+            <ui-tab aria-controls="hotel2" selected>Hotel</ui-tab>
+            <ui-tab aria-controls="travelHotel2">Travel + Hotel</ui-tab>
+            <ui-tab aria-controls="cars2">Cars</ui-tab>
+          </ui-tabs>
+
+          <div class="page">
+            <p id="travel2" ?hidden="${selected2 !== 'travel2'}">Travel page</p>
+            <p id="hotel2" ?hidden="${selected2 !== 'hotel2'}">Hotel page</p>
+            <p id="travelHotel2" ?hidden="${selected2 !== 'travelHotel2'}">Hotel & travel page</p>
+            <p id="cars2" ?hidden="${selected2 !== 'cars2'}">Cars page</p>
+          </div>
         </div>
       </section>
     `
   }
 
   renderIconTabs(): TemplateResult {
-    const { selected3 } = this
+    const { selected3, selected4 } = this
     return html`
       <section class="demo-section">
-        <h2 class="title-large">Icon tabs</h2>
-        <ui-tabs .selected="${selected3}" data-property="selected3" @select="${this.handleSelect}">
-          <ui-tab aria-controls="travel3">
-            <ui-icon slot="icon">${travelIcon}</ui-icon>
-            Travel
-          </ui-tab>
-          <ui-tab aria-controls="hotel3">
-            <ui-icon slot="icon">${hotelIcon}</ui-icon>
-            Hotel
-          </ui-tab>
-          <ui-tab aria-controls="travelHotel3">
-            <ui-icon slot="icon">${cityIcon}</ui-icon>
-            Travel + Hotel
-          </ui-tab>
-          <ui-tab aria-controls="cars3">
-            <ui-icon slot="icon">${taxiIcon}</ui-icon>
-            Cars
-          </ui-tab>
-        </ui-tabs>
-
-        <div class="page">
-          <p id="travel3" ?hidden="${selected3 !== 'travel3'}">Travel page</p>
-          <p id="hotel3" ?hidden="${selected3 !== 'hotel3'}">Hotel page</p>
-          <p id="travelHotel3" ?hidden="${selected3 !== 'travelHotel3'}">Hotel & travel page</p>
-          <p id="cars3" ?hidden="${selected3 !== 'cars3'}">Cars page</p>
+        <h2 class="display-large">Primary icon tabs</h2>
+        <div class="frame">
+          <ui-tabs data-property="selected3" @change="${this.handleTabsChange}">
+            <ui-tab aria-controls="travel3">
+              <ui-icon slot="icon">${travelIcon}</ui-icon>
+              Travel
+            </ui-tab>
+            <ui-tab aria-controls="hotel3">
+              <ui-icon slot="icon">${hotelIcon}</ui-icon>
+              Hotel
+            </ui-tab>
+            <ui-tab aria-controls="travelHotel3" selected>
+              <ui-icon slot="icon">${cityIcon}</ui-icon>
+              Travel + Hotel
+            </ui-tab>
+            <ui-tab aria-controls="cars3">
+              <ui-icon slot="icon">${taxiIcon}</ui-icon>
+              Cars
+            </ui-tab>
+          </ui-tabs>
+          <div class="page">
+            <p id="travel3" ?hidden="${selected3 !== 'travel3'}">Travel page</p>
+            <p id="hotel3" ?hidden="${selected3 !== 'hotel3'}">Hotel page</p>
+            <p id="travelHotel3" ?hidden="${selected3 !== 'travelHotel3'}">Hotel & travel page</p>
+            <p id="cars3" ?hidden="${selected3 !== 'cars3'}">Cars page</p>
+          </div>
+        </div>
+      </section>
+      <section class="demo-section">
+        <h2 class="display-large">Secondary icon tabs</h2>
+
+        <div class="frame">
+          <ui-tabs priority="secondary" data-property="selected4" @change="${this.handleTabsChange}">
+            <ui-tab aria-controls="travel4">
+              <ui-icon slot="icon">${travelIcon}</ui-icon>
+              Travel
+            </ui-tab>
+            <ui-tab aria-controls="hotel4">
+              <ui-icon slot="icon">${hotelIcon}</ui-icon>
+              Hotel
+            </ui-tab>
+            <ui-tab aria-controls="travelHotel4">
+              <ui-icon slot="icon">${cityIcon}</ui-icon>
+              Travel + Hotel
+            </ui-tab>
+            <ui-tab aria-controls="cars4" selected>
+              <ui-icon slot="icon">${taxiIcon}</ui-icon>
+              Cars
+            </ui-tab>
+          </ui-tabs>
+          <div class="page">
+            <p id="travel4" ?hidden="${selected4 !== 'travel4'}">Travel page</p>
+            <p id="hotel4" ?hidden="${selected4 !== 'hotel4'}">Hotel page</p>
+            <p id="travelHotel4" ?hidden="${selected4 !== 'travelHotel4'}">Hotel & travel page</p>
+            <p id="cars4" ?hidden="${selected4 !== 'cars4'}">Cars page</p>
+          </div>
         </div>
       </section>
     `
   }
 
   renderScrollableDemo(): TemplateResult {
-    const { selected4 } = this
+    const { selected5 } = this
     return html`
       <section class="demo-section">
-        <h2 class="title-large">Scrollable tabs</h2>
-        <ui-tabs .selected="${selected4}" scrollable data-property="selected4" @select="${this.handleSelect}">
-          <ui-tab aria-controls="travel4">Travel</ui-tab>
-          <ui-tab aria-controls="hotel4">Hotel</ui-tab>
-          <ui-tab aria-controls="travelHotel4">Travel + Hotel</ui-tab>
-          <ui-tab aria-controls="cars4">Cars</ui-tab>
-
-          <ui-tab aria-controls="travel41">Travel (1)</ui-tab>
-          <ui-tab aria-controls="hotel41">Hotel (1)</ui-tab>
-          <ui-tab aria-controls="travelHotel41">Travel + Hotel (1)</ui-tab>
-          <ui-tab aria-controls="cars41" disabled>Cars (1)</ui-tab>
-
-          <ui-tab aria-controls="travel42">Travel (2)</ui-tab>
-          <ui-tab aria-controls="hotel42">Hotel (2)</ui-tab>
-          <ui-tab aria-controls="travelHotel42">Travel + Hotel (2)</ui-tab>
-          <ui-tab aria-controls="cars42">Cars (2)</ui-tab>
-        </ui-tabs>
-
-        <div class="page">
-          <p id="travel4" ?hidden="${selected4 !== 'travel4'}">Travel page</p>
-          <p id="hotel4" ?hidden="${selected4 !== 'hotel4'}">Hotel page</p>
-          <p id="travelHotel4" ?hidden="${selected4 !== 'travelHotel4'}">Hotel & travel page</p>
-          <p id="cars4" ?hidden="${selected4 !== 'cars4'}">Cars page</p>
-
-          <p id="travel41" ?hidden="${selected4 !== 'travel41'}">Travel page (1)</p>
-          <p id="hotel41" ?hidden="${selected4 !== 'hotel41'}">Hotel page (1)</p>
-          <p id="travelHotel41" ?hidden="${selected4 !== 'travelHotel41'}">Hotel & travel page (1)</p>
-          <p id="cars41" ?hidden="${selected4 !== 'cars41'}">Cars page (1)</p>
+        <h2 class="display-large">Scrollable tabs</h2>
+        <div class="frame scrollable">
+          <ui-tabs data-property="selected5" @change="${this.handleTabsChange}">
+            <ui-tab aria-controls="travel5" selected>Travel</ui-tab>
+            <ui-tab aria-controls="hotel5">Hotel</ui-tab>
+            <ui-tab aria-controls="travelHotel5">Travel + Hotel</ui-tab>
+            <ui-tab aria-controls="cars5" disabled>Cars</ui-tab>
+
+            <ui-tab aria-controls="travel51">Travel (1)</ui-tab>
+            <ui-tab aria-controls="hotel51">Hotel (1)</ui-tab>
+            <ui-tab aria-controls="travelHotel51">Travel + Hotel (1)</ui-tab>
+            <ui-tab aria-controls="cars51" disabled>Cars (1)</ui-tab>
+
+            <ui-tab aria-controls="travel52">Travel (2)</ui-tab>
+            <ui-tab aria-controls="hotel52">Hotel (2)</ui-tab>
+            <ui-tab aria-controls="travelHotel52">Travel + Hotel (2)</ui-tab>
+            <ui-tab aria-controls="cars52" disabled>Cars (2)</ui-tab>
+          </ui-tabs>
+
+          <div class="page">
+            <p id="travel5" ?hidden="${selected5 !== 'travel5'}">Travel page</p>
+            <p id="hotel5" ?hidden="${selected5 !== 'hotel5'}">Hotel page</p>
+            <p id="travelHotel5" ?hidden="${selected5 !== 'travelHotel5'}">Hotel & travel page</p>
+            <p id="cars5" ?hidden="${selected5 !== 'cars5'}">Cars page</p>
+
+            <p id="travel51" ?hidden="${selected5 !== 'travel51'}">Travel page (1)</p>
+            <p id="hotel51" ?hidden="${selected5 !== 'hotel51'}">Hotel page (1)</p>
+            <p id="travelHotel51" ?hidden="${selected5 !== 'travelHotel51'}">Hotel & travel page (1)</p>
+            <p id="cars51" ?hidden="${selected5 !== 'cars51'}">Cars page (1)</p>
+
+            <p id="travel52" ?hidden="${selected5 !== 'travel52'}">Travel page (2)</p>
+            <p id="hotel52" ?hidden="${selected5 !== 'hotel52'}">Hotel page (2)</p>
+            <p id="travelHotel52" ?hidden="${selected5 !== 'travelHotel52'}">Hotel & travel page (2)</p>
+            <p id="cars52" ?hidden="${selected5 !== 'cars52'}">Cars page (2)</p>
+          </div>
         </div>
       </section>
     `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/elements/environment/EnvironmentEditor.ts

@@ -220,8 +220,7 @@ export default class EnvironmentEditor extends ApiElement {
   }
 
   protected handleTabSelection(e: CustomEvent<TabSelectionDetail>): void {
-    const { item } = e.detail
-    const { page } = item.dataset
+    const { page } = e.detail.item.dataset
     if (!page) {
       return
     }
@@ -524,11 +523,14 @@ export default class EnvironmentEditor extends ApiElement {
   }
 
   protected renderTabs(): TemplateResult {
+    const { selected: s } = this
     return html`
-      <ui-tabs .selected="${this.selected}" @select="${this.handleTabSelection}">
-        <ui-tab aria-controls="server" data-page="server">Server</ui-tab>
-        <ui-tab aria-controls="variables" data-page="variables">Variables</ui-tab>
-        <ui-tab aria-controls="authorization" data-page="authorization">Authorization</ui-tab>
+      <ui-tabs @select="${this.handleTabSelection}">
+        <ui-tab .selected="${s === 'server'}" aria-controls="server" data-page="server">Server</ui-tab>
+        <ui-tab .selected="${s === 'variables'}" aria-controls="variables" data-page="variables">Variables</ui-tab>
+        <ui-tab .selected="${s === 'authorization'}" aria-controls="authorization" data-page="authorization"
+          >Authorization</ui-tab
+        >
       </ui-tabs>
     `
   }

package/src/elements/har/HarViewer.ts

@@ -456,12 +456,12 @@ export default class HarViewer extends ApiElement {
    * Handler for the list item selection event.
    */
   protected handleDetailsTabSelection(e: CustomEvent<TabSelectionDetail>): void {
-    const { select } = e.detail
+    const { selected } = e.detail.item.dataset
     const { entry } = (e.target as UiTabs).dataset
-    if (!select || !entry) {
+    if (!selected || !entry) {
       return
     }
-    this.selectedTabs.set(entry, select as HarTab)
+    this.selectedTabs.set(entry, selected as HarTab)
     this.requestUpdate()
   }
 
@@ -687,18 +687,16 @@ export default class HarViewer extends ApiElement {
     const hasResponseCookies = Array.isArray(responseCookies) && !!responseCookies.length
     const hasCookies = hasRequestCookies || hasResponseCookies
     return html`
-      <ui-tabs
-        priority="secondary"
-        selectedAttribute="data-selected"
-        .selected="${selected}"
-        @select="${this.handleDetailsTabSelection}"
-        data-entry="${id}"
-      >
-        <ui-tab data-selected="${HarTab.request}">Request</ui-tab>
-        <ui-tab data-selected="${HarTab.response}">Response</ui-tab>
-        <ui-tab data-selected="${HarTab.requestContent}" ?hidden="${!hashRequestContent}">Request content</ui-tab>
-        <ui-tab data-selected="${HarTab.responseContent}" ?hidden="${!hashResponseContent}">Response content</ui-tab>
-        <ui-tab data-selected="${HarTab.cookies}" ?hidden="${!hasCookies}">Cookies</ui-tab>
+      <ui-tabs priority="secondary" @change="${this.handleDetailsTabSelection}" data-entry="${id}">
+        <ui-tab .selected="${selected === HarTab.request}" data-selected="${HarTab.request}">Request</ui-tab>
+        <ui-tab .selected="${selected === HarTab.response}" data-selected="${HarTab.response}">Response</ui-tab>
+        <ui-tab .selected="${selected === HarTab.requestContent}" ?hidden="${!hashRequestContent}"
+          >Request content</ui-tab
+        >
+        <ui-tab .selected="${selected === HarTab.responseContent}" ?hidden="${!hashResponseContent}"
+          >Response content</ui-tab
+        >
+        <ui-tab .selected="${selected === HarTab.cookies}" ?hidden="${!hasCookies}">Cookies</ui-tab>
       </ui-tabs>
     `
   }