@esri/calcite-components 2.4.0 → 2.4.1-next.1

package/dist/cjs/calcite-stepper_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-stepper.calcite-stepper-item.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAUO,MAAMA,KAAG,GAAG;IACjB,OAAO,EAAE,UAAU;IACnB,aAAa,EAAE,kBAAkB;IACjC,eAAe,EAAE,oBAAoB;IACrC,eAAe,EAAE,oBAAoB;IACrC,YAAY,EAAE,iBAAiB;IAC/B,eAAe,EAAE,oBAAoB;CACtC,CAAC;AAEK,MAAM,OAAO,GAAsC,CAAC,EACzD,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,KAAK,EACL,GAAG,GACJ,MACCC,iBACE,KAAK,EAAE;QACL,CAACD,KAAG,CAAC,OAAO,GAAG,IAAI;KACpB,EACD,GAAG,EAAE,GAAG;IAERC,kBACE,KAAK,EAAE;YACL,CAACD,KAAG,CAAC,aAAa,GAAG,MAAM;YAC3B,CAACA,KAAG,CAAC,eAAe,GAAG,QAAQ;YAC/B,CAACA,KAAG,CAAC,eAAe,GAAG,QAAQ;YAC/B,CAACA,KAAG,CAAC,YAAY,GAAG,KAAK;YACzB,CAACA,KAAG,CAAC,eAAe,GAAG,IAAI;SAC5B,EACD,KAAK,EAAC,MAAM,EACZ,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,GACL,CACE,CACP;;AC7CM,MAAM,cAAc,GAAG;IAC5B,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;CACP,CAAC;AAEK,MAAMA,KAAG,GAAG;IACjB,UAAU,EAAE,aAAa;IACzB,eAAe,EAAE,oBAAoB;IACrC,aAAa,EAAE,kBAAkB;IACjC,eAAe,EAAE,kBAAkB;IACnC,gBAAgB,EAAE,oBAAoB;IACtC,UAAU,EAAE,aAAa;CAC1B;;ACbD,MAAM,UAAU,GAAG,6tEAA6tE;;MC+CnuE,OAAO;;;;;QA0TV,iBAAY,GAAoC,EAAE,CAAC;QAEnD,YAAO,GAAG,IAAI,GAAG,EAAwE,CAAC;QAE1F,UAAK,GAAoC,EAAE,CAAC;QAE5C,qBAAgB,GAAGE,wBAAc,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;;QAGxE,qBAAgB,GAAG,KAAK,CAAC;QAEzB,SAAI,GAAG,0BAA0BC,SAAI,EAAE,EAAE,CAAC;;;;;;QAU1C,mBAAc,GAAGD,wBAAc,CACrC,QAAQ,EACR,CAAC,OAAO,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAC3D,CAAC;QA+GM,sBAAiB,GAAG,CAAC,KAAiB;YAC5C,MAAM,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC;YACzD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAkC,CAAC;YACxD,IAAI,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,OAAO,EAAE;gBACpD,IAAI,CAAC,QAAQ,EAAE,CAAC;aACjB;iBAAM;gBACL,IAAI,CAAC,QAAQ,EAAE,CAAC;aACjB;YAED,IACE,OAAO,IAAI,CAAC,qBAAqB,KAAK,QAAQ;gBAC9C,qBAAqB,KAAK,IAAI,CAAC,qBAAqB;gBACpD,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,QAAQ,EAChD;gBACA,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,CAAC;aACtC;SACF,CAAC;QAYM,mBAAc,GAAG,CAAC,EAAkB;YAC1C,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;SACvB,CAAC;QAEF,4BAAuB,GAAG,CAAC,KAAY;YACrC,MAAM,KAAK,GAAGE,iCAA6B,CAAC,KAAK,CAAC,CAAC,MAAM,CACvD,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,KAAK,sBAAsB,CAC/C,CAAC;YACF,IAAI,CAAC,KAAK,GAAG,KAAwC,CAAC;YACtD,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;YACnC,IAAI,CAAC,6BAA6B,EAAE,CAAC;SACtC,CAAC;oBAhe8B,KAAK;sBAGyC,YAAY;wBAGtD,KAAK;qBAGD,GAAG;;;4BAiC4B,IAAI;;;+BA+OhD,EAAE;;;;IA1Q7B,oBAAoB;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAgBD,qBAAqB;QACnB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;IAgBD,gBAAgB;;KAEf;;;;;;IA4BD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7D,IAAI,CAAC,WAAW,EAAE,CAAC;QACnBC,mBAAe,CAAC,IAAI,CAAC,CAAC;QACtBC,uBAAgB,CAAC,IAAI,CAAC,CAAC;KACxB;IAED,MAAM,iBAAiB;QACrB,MAAMC,iBAAa,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;;QAE/C,IAAI,OAAO,IAAI,CAAC,qBAAqB,KAAK,QAAQ,EAAE;YAClD,MAAM,gBAAgB,GAAG,IAAI,CAAC,8BAA8B,EAAE,CAAC;YAE/D,IAAI,gBAAgB,KAAK,CAAC,EAAE;gBAC1B,IAAI,CAAC,qBAAqB,GAAG,gBAAgB,CAAC;aAC/C;YAED,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC;gBACzC,QAAQ,EAAE,gBAAgB;aAC3B,CAAC,CAAC;SACJ;KACF;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,CAAC;QAClCC,sBAAkB,CAAC,IAAI,CAAC,CAAC;QACzBC,0BAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,CAAC;KACrC;IAED,MAAM;QACJ,QACER,QAACS,UAAI,kBAAa,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAC,QAAQ,IAClDT,iBACE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAACD,KAAG,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,EACpE,GAAG,EAAE,IAAI,CAAC,cAAc,IAEvB,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,KACrDC,iBAAK,KAAK,EAAE,EAAE,CAACD,KAAG,CAAC,gBAAgB,GAAG,IAAI,EAAE,IACzC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEW,OAAK,MAC1BV,QAAC,OAAO,IACN,MAAM,EAAEU,OAAK,KAAK,IAAI,CAAC,qBAAqB,EAC5C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAIA,OAAK,KAAK,IAAI,CAAC,qBAAqB,IAAI,CAAC,IAAI,CAAC,KAAK,EAC9E,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAIA,OAAK,KAAK,IAAI,CAAC,qBAAqB,EAC/D,KAAK,EAAE,IAAI,CAAC,KAAK,IAAIA,OAAK,KAAK,IAAI,CAAC,qBAAqB,EACzD,GAAG,EAAEA,OAAK,GACV,CACH,CAAC,CACE,CACP,EACDV,iBAAK,KAAK,EAAE,EAAE,CAACD,KAAG,CAAC,eAAe,GAAG,IAAI,EAAE,IACxC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EAC1B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CACrB,EACNC,kBAAM,YAAY,EAAE,IAAI,CAAC,uBAAuB,GAAI,CAChD,CACD,EACP;KACH;;;;;;IASD,kCAAkC,CAAC,KAA6C;QAC9E,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QAC/B,MAAM,WAAW,GAAG,KAAK,CAAC,MAAuC,CAAC;QAElE,QAAQ,IAAI,CAAC,GAAG;YACd,KAAK,WAAW,CAAC;YACjB,KAAK,YAAY;gBACfW,uBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;gBAC5D,MAAM;YACR,KAAK,SAAS,CAAC;YACf,KAAK,WAAW;gBACdA,uBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC;gBAChE,MAAM;YACR,KAAK,MAAM;gBACTA,uBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC;gBAC7D,MAAM;YACR,KAAK,KAAK;gBACRA,uBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;gBAC5D,MAAM;SACT;QACD,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAGD,YAAY,CAAC,KAAkB;QAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,MAAuC,CAAC;QAC3D,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAE3C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;QAC9C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACvC,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAGD,UAAU,CAAC,KAAkB;QAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAClC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC;YACtC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAuC,CAAC;SACnE;QAED,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC;YACzC,QAAQ;SACT,CAAC,CAAC;KACJ;IAGD,oCAAoC;QAClC,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,CAAC;KACtC;;;;;;;IAUD,MAAM,QAAQ;QACZ,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,qBAAqB,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC;QAE1F,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YACxC,OAAO;SACR;QAED,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;KACnC;;IAID,MAAM,QAAQ;QACZ,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,qBAAqB,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC;QAE9F,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YACxC,OAAO;SACR;QAED,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;KACnC;;;;;;IAQD,MAAM,QAAQ,CAAC,IAAY;QACzB,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,CAAC;QAE1B,IAAI,IAAI,CAAC,qBAAqB,KAAK,QAAQ,EAAE;YAC3C,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;SAC3B;KACF;;IAID,MAAM,SAAS;QACb,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QAE7D,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YACxC,OAAO;SACR;QAED,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;KACnC;;IAID,MAAM,OAAO;QACX,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC;QAErF,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YACxC,OAAO;SACR;QAED,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;KACnC;IAeD,qBAAqB;QACnBC,kBAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;IAKD,oBAAoB;QAClBC,cAAQ,CAAC;YACP,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC;SACnC,CAAC,CAAC;KACJ;IAKD,mBAAmB;QACjBA,cAAQ,CAAC;YACP,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B,CAAC,CAAC;KACJ;IA4BO,WAAW;QACjB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YAC5D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;YAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACzB,CAAC,CAAC;KACJ;IAEO,sBAAsB,CAAC,4BAA4B,GAAG,KAAK;QACjE,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,IAAI,UAAU,KAAK,CAAC,EAAE;YACpF,OAAO;SACR;QAED,MAAM,cAAc,GAAG,IAAI,CAAC,qBAAqB,IAAI,CAAC,CAAC;QACvD,MAAM,oBAAoB,GAAG,UAAU,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAC1E,MAAM,WAAW,GACf,CAAC,UAAU,GAAG,CAAC,KAAK,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QAEvF,IAAI,IAAI,CAAC,OAAO,IAAI,oBAAoB,GAAG,WAAW,EAAE;YACtD,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;YAE9B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAmC,EAAE,KAAK;gBAC5D,IAAI,KAAK,KAAK,cAAc,EAAE;oBAC5B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;iBACpB;qBAAM;oBACL,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;oBACpB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;iBAC/B;aACF,CAAC,CAAC;SACJ;aAAM,IAAI,IAAI,CAAC,OAAO,GAAG,oBAAoB,GAAG,WAAW,EAAE;YAC5D,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC,4BAA4B,EAAE;gBAC1D,OAAO;aACR;YAED,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAmC;gBACrD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;aAC9B,CAAC,CAAC;SACJ;KACF;IAEO,mBAAmB,CACzB,UAAkB,EAClB,YAAiC,MAAM;QAEvC,MAAM,EAAE,KAAK,EAAE,qBAAqB,EAAE,GAAG,IAAI,CAAC;QAE9C,IAAI,QAAQ,GAAG,UAAU,CAAC;QAE1B,OAAO,KAAK,CAAC,QAAQ,CAAC,EAAE,QAAQ,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzD,QAAQ,GAAG,QAAQ,IAAI,SAAS,KAAK,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;SAC3D;QAED,OAAO,QAAQ,KAAK,qBAAqB,IAAI,QAAQ,GAAG,KAAK,CAAC,MAAM,IAAI,QAAQ,IAAI,CAAC;cACjF,QAAQ;cACR,IAAI,CAAC;KACV;IAEO,UAAU,CAAC,QAAgB;QACjC,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC;QACtC,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC;YACzC,QAAQ;SACT,CAAC,CAAC;KACJ;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpD;IAEO,6BAA6B;QACnC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAmC;YACrD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;SAC7C,CAAC,CAAC;KACJ;IAEO,YAAY,CAAC,QAAkB;QACrC,MAAM,eAAe,GAAG,QAAQ,KAAK,OAAO,CAAC;QAC7C,MAAM,IAAI,GAAG,eAAe,GAAG,cAAc,GAAG,eAAe,CAAC;QAChE,MAAM,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACjE,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACrC,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,eAAe,GAAG,OAAO,GAAG,KAAK,EAAE,CAAC;QAE/D,OAAO,MAAM,KAAK,YAAY,IAAI,CAAC,gBAAgB,IACjDb,4BACE,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAC,aAAa,EACxB,KAAK,EAAE;gBACL,CAACD,KAAG,CAAC,UAAU,GAAG,IAAI;aACvB,EACD,OAAO,EAAE,IAAI,mBACE,QAAQ,EACvB,QAAQ,EACN,CAAC,qBAAqB,KAAK,CAAC,IAAI,eAAe;iBAC9C,qBAAqB,KAAK,UAAU,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,EAEhE,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,IAAI,EACjB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,GAC3E,IACA,IAAI,CAAC;KACV;IAoBO,8BAA8B;QACpC,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAExE,IAAI,gBAAgB,GAAG,CAAC,CAAC,EAAE;YACzB,OAAO,gBAAgB,CAAC;SACzB;QAED,OAAO,CAAC,CAAC;KACV;IAeO,sBAAsB,CAAC,KAAgB;QAC7C,MAAM,QAAQ,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QACjD,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,QAAQ,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjF,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,iBAAiB,GAAG,OAAO,CAAC;QACnD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,mBAAmB,GAAG,OAAO,CAAC;KACtD;IAEO,wBAAwB;QAC9B,OAAO,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC;;;;;;;;;;;;;;;;;ACliBI,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,kBAAkB,EAAE,sBAAsB;IAC1C,sBAAsB,EAAE,0BAA0B;IAClD,iBAAiB,EAAE,qBAAqB;IACxC,kBAAkB,EAAE,sBAAsB;IAC1C,qBAAqB,EAAE,0BAA0B;IACjD,iBAAiB,EAAE,qBAAqB;IACxC,cAAc,EAAE,iBAAiB;CAClC;;ACTD,MAAM,cAAc,GAAG,+8VAA+8V;;MC2Dz9V,WAAW;;;;;;;;;;;;QAkSd,mBAAc,GAAG,CAAC,KAAoB;YAC5C,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE,EAAE;gBAC9C,QAAQ,KAAK,CAAC,GAAG;oBACf,KAAK,GAAG,CAAC;oBACT,KAAK,OAAO;wBACV,IAAI,CAAC,qBAAqB,EAAE,CAAC;wBAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,MAAM;oBACR,KAAK,SAAS,CAAC;oBACf,KAAK,WAAW,CAAC;oBACjB,KAAK,WAAW,CAAC;oBACjB,KAAK,YAAY,CAAC;oBAClB,KAAK,MAAM,CAAC;oBACZ,KAAK,KAAK;wBACR,IAAI,CAAC,kCAAkC,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;wBAC9D,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,MAAM;iBACT;aACF;SACF,CAAC;QA4BM,oBAAe,GAAG,CAAC,KAAiB;YAC1C,IACE,IAAI,CAAC,QAAQ;iBACZ,IAAI,CAAC,MAAM,KAAK,YAAY;oBAC3B,KAAK;yBACF,YAAY,EAAE;yBACd,IAAI,CAAC,CAAC,EAAE,KAAM,EAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,EACnF;gBACA,OAAO;aACR;YAED,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC9B,CAAC;QAEM,0BAAqB,GAAG;YAC9B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC;gBAEnC,IAAI,CAAC,6CAA6C,CAAC,IAAI,CAAC;oBACtD,QAAQ;iBACT,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,sBAAiB,GAAG;YAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC;gBAEnC,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC;oBACzC,QAAQ;iBACT,CAAC,CAAC;aACJ;SACF,CAAC;wBAtWiD,KAAK;wBAUpB,KAAK;qBAGR,KAAK;wBAGF,KAAK;;;2BASF,KAAK;;oBAkB7B,KAAK;;;wBAsBD,KAAK;qBAOgB,GAAG;gCAOC,KAAK;;;+BAqBtB,EAAE;;IAjG7B,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;;IA2BD,eAAe;QACb,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAoDD,gBAAgB;;KAEf;IAaD,sBAAsB,CAACe,QAAc;QACnCC,4BAAqB,CAAC,mBAAmB,GAAG;oBAC1CD,QAAM;YACN,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,WAAW,EAAE,KAAK;SACnB,CAAC;QACFF,kBAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;;;;;;IAwCD,iBAAiB;QACfI,8BAAkB,CAAC,IAAI,CAAC,CAAC;QACzBX,uBAAgB,CAAC,IAAI,CAAC,CAAC;QACvBD,mBAAe,CAAC,IAAI,CAAC,CAAC;KACvB;IAED,MAAM,iBAAiB;QACrBa,+BAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAA0C,CAAC;QAC1E,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC3C,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAE3B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;QACD,MAAMX,iBAAa,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,gBAAgB;QACdY,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,oBAAoB;QAClBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;QAC5BZ,0BAAmB,CAAC,IAAI,CAAC,CAAC;QAC1BD,sBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,MAAM;QACJ,QACEP,QAACS,UAAI,oBACW,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC9C,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IAEhCT,QAACqB,gCAAoB,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3CrB,iBAAK,KAAK,EAAE,GAAG,CAAC,SAAS,IACtB,IAAI,CAAC,QAAQ,KACZA,+BAAgB,QAAQ,EAAC,KAAK,EAAE,GAAG,CAAC,cAAc,IAC/C,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,CACR,EACDA,iBACE,KAAK,EAAE,GAAG,CAAC,iBAAiB,EAC5B,QAAQ;;YAEN,IAAI,CAAC,MAAM,KAAK,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC,GAAG,IAAI;;YAGpF,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,IAEhC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,EACpC,IAAI,CAAC,QAAQ,IACZA,iBAAK,KAAK,EAAE,GAAG,CAAC,iBAAiB,IAAG,IAAI,CAAC,aAAa,EAAE,MAAQ,IAC9D,IAAI,EACRA,iBAAK,KAAK,EAAE,GAAG,CAAC,qBAAqB,IACnCA,kBAAM,KAAK,EAAE,GAAG,CAAC,kBAAkB,IAAG,IAAI,CAAC,OAAO,CAAQ,EAC1DA,kBAAM,KAAK,EAAE,GAAG,CAAC,sBAAsB,IAAG,IAAI,CAAC,WAAW,CAAQ,CAC9D,CACF,EACNA,iBAAK,KAAK,EAAE,GAAG,CAAC,kBAAkB,IAChCA,qBAAQ,CACJ,CACF,CACe,CAClB,EACP;KACH;;;;;;IASD,wBAAwB,CAAC,KAAgD;QACvE,IACE,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,eAAe;YACrC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EACnD;YACA,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;YAC9C,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC9B;KACF;;;;;;;IAUD,MAAM,QAAQ;QACZ,MAAMsB,2BAAkB,CAAC,IAAI,CAAC,CAAC;QAE/B,CAAC,IAAI,CAAC,MAAM,KAAK,UAAU,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,EAAE,CAAC;KACjE;IA8CO,UAAU;QAChB,IAAI,IAAI,GAAG,QAAQ,CAAC;QAEpB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,gBAAgB,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE;YAC/E,IAAI,GAAG,SAAS,CAAC;SAClB;aAAM,IAAI,IAAI,CAAC,KAAK,EAAE;YACrB,IAAI,GAAG,wBAAwB,CAAC;SACjC;aAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;YACxB,IAAI,GAAG,cAAc,CAAC;SACvB;QAED,QACEtB,0BAAc,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,GAAG,GAAG,EAC3F;KACH;IAEO,qBAAqB;QAC3B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,gBAAgB,CAAC;KAC/E;IAEO,mBAAmB;QACzB,IAAI,CAAC,kCAAkC,CAAC,IAAI,CAAC;YAC3C,QAAQ,EAAE,IAAI,CAAC,YAAY;SAC5B,CAAC,CAAC;KACJ;IAqCO,eAAe;QACrB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,CAAC,OAAO,CACvF,IAAI,CAAC,EAAE,CACR,CAAC;KACH;IAED,aAAa;QACXe,4BAAqB,CAAC,mBAAmB,GAAG;YAC1C,MAAM,EAAE,IAAI,CAAC,eAAe;YAC5B,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,WAAW,EAAE,KAAK;SACnB,CAAC;QACF,OAAOA,4BAAqB,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;KAC5E;;;;;;;;;;;;;;;","names":["CSS","h","createObserver","guid","slotChangeGetAssignedElements","connectMessages","connectLocalized","setUpMessages","disconnectMessages","disconnectLocalized","Host","index","focusElementInGroup","updateMessages","readTask","locale","numberStringFormatter","connectInteractive","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","disconnectInteractive","InteractiveContainer","componentFocusable"],"sources":["src/components/stepper/functional/step-bar.tsx","src/components/stepper/resources.ts","src/components/stepper/stepper.scss?tag=calcite-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx","src/components/stepper-item/resources.ts","src/components/stepper-item/stepper-item.scss?tag=calcite-stepper-item&encapsulation=shadow","src/components/stepper-item/stepper-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\n\ninterface StepBarProps {\n  active: boolean;\n  complete: boolean;\n  error: boolean;\n  disabled: boolean;\n  key: number;\n}\n\nexport const CSS = {\n  stepBar: \"step-bar\",\n  stepBarActive: \"step-bar--active\",\n  stepBarComplete: \"step-bar--complete\",\n  stepBarDisabled: \"step-bar--disabled\",\n  stepBarError: \"step-bar--error\",\n  stepBarInActive: \"step-bar--inactive\",\n};\n\nexport const StepBar: FunctionalComponent<StepBarProps> = ({\n  disabled,\n  active,\n  complete,\n  error,\n  key,\n}) => (\n  <svg\n    class={{\n      [CSS.stepBar]: true,\n    }}\n    key={key}\n  >\n    <rect\n      class={{\n        [CSS.stepBarActive]: active,\n        [CSS.stepBarComplete]: complete,\n        [CSS.stepBarDisabled]: disabled,\n        [CSS.stepBarError]: error,\n        [CSS.stepBarInActive]: true,\n      }}\n      width=\"100%\"\n      x=\"0\"\n      y=\"0\"\n    />\n  </svg>\n);\n","export const ITEM_MIN_WIDTH = {\n  s: 120,\n  m: 180,\n  l: 200,\n};\n\nexport const CSS = {\n  actionIcon: \"action-icon\",\n  actionIconStart: \"action-icon--start\",\n  actionIconEnd: \"action-icon--end\",\n  actionContainer: \"action-container\",\n  stepBarContainer: \"step-bar-container\",\n  singleView: \"single-view\",\n};\n",":host([scale=\"s\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.11\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.1\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.13\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.16\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.3\");\n}\n\n:host {\n  @apply flex;\n}\n\n.container {\n  @apply relative\n    flex\n    w-full\n    min-w-fit\n    flex-row\n    flex-wrap\n    items-stretch\n    justify-between;\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply flex-auto flex-col;\n}\n\n:host([layout=\"horizontal\"]) .container {\n  display: grid;\n  // grid-templates-columns are dynamically generated\n  // grid-templates-rows are dynamically generated\n  grid-template-areas:\n    \"items\"\n    \"content\";\n  gap: theme(\"spacing.2\") var(--calcite-internal-stepper-item-spacing-unit-s);\n}\n\n:host([layout=\"horizontal\"][scale=\"s\"]) .container {\n  gap: theme(\"spacing.1\") var(--calcite-internal-stepper-item-spacing-unit-s);\n}\n\n:host([layout=\"horizontal\"][scale=\"l\"]) .container {\n  gap: theme(\"spacing.3\") var(--calcite-internal-stepper-item-spacing-unit-s);\n}\n\n:host([layout=\"horizontal\"]) .container.single-view {\n  @apply flex  grid-cols-none;\n}\n\n.action-icon {\n  @apply flex relative grow-0;\n  block-size: var(--calcite-internal-stepper-action-block-size);\n  inline-size: var(--calcite-internal-stepper-action-inline-size);\n}\n\n.action-container {\n  @apply absolute flex justify-between;\n  padding-block: 0.25rem;\n  inline-size: 100%;\n}\n\n@mixin stepBar {\n  .step-bar {\n    @apply flex;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  .step-bar-container {\n    @apply flex absolute justify-between items-start;\n    block-size: 0.125rem;\n    inline-size: 100%;\n    gap: var(--calcite-internal-step-bar-gap, 0.5rem);\n  }\n\n  .step-bar--inactive {\n    fill: var(--calcite-color-border-3, #dfdfdf);\n    fill-opacity: 1;\n    block-size: 100%;\n  }\n\n  .step-bar--active {\n    fill: var(--calcite-color-brand);\n  }\n\n  .step-bar--complete {\n    fill: var(--calcite-color-brand);\n    fill-opacity: 0.5;\n  }\n\n  .step-bar--error {\n    fill: var(--calcite-color-status-danger);\n  }\n\n  .step-bar--disabled {\n    opacity: 0.5;\n  }\n}\n\n@include stepBar();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n  readTask,\n} from \"@stencil/core\";\nimport { focusElementInGroup, slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport { Layout, Position, Scale } from \"../interfaces\";\nimport { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from \"./interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { StepBar } from \"./functional/step-bar\";\nimport { ITEM_MIN_WIDTH, CSS } from \"./resources\";\nimport { guid } from \"../../utils/guid\";\n\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { StepperMessages } from \"./assets/stepper/t9n\";\n\n/**\n * @slot - A slot for adding `calcite-stepper-item` elements.\n */\n@Component({\n  tag: \"calcite-stepper\",\n  styleUrl: \"stepper.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Stepper implements LocalizedComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) icon = false;\n\n  /** Defines the layout of the component. */\n  @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\", Layout> = \"horizontal\";\n\n  /** When `true`, displays the step number in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) numbered = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"icon\")\n  @Watch(\"layout\")\n  @Watch(\"numbered\")\n  @Watch(\"scale\")\n  handleItemPropChange(): void {\n    this.updateItems();\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperMessages;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop({ reflect: true }) numberingSystem?: NumberingSystem;\n\n  @Watch(\"numberingSystem\")\n  numberingSystemChange(): void {\n    this.setStepperItemNumberingSystem();\n  }\n\n  /**\n   * Specifies the component's selected item.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteStepperItemElement = null;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   */\n  @Event({ cancelable: false }) calciteStepperItemChange: EventEmitter<void>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true });\n    this.updateItems();\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    this.resizeObserver?.observe(this.containerEl);\n    // if no stepper items are set as active, default to the first one\n    if (typeof this.currentActivePosition !== \"number\") {\n      const enabledStepIndex = this.getFirstEnabledStepperPosition();\n\n      if (enabledStepIndex === 0) {\n        this.currentActivePosition = enabledStepIndex;\n      }\n\n      this.calciteInternalStepperItemChange.emit({\n        position: enabledStepIndex,\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n    disconnectMessages(this);\n    disconnectLocalized(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  render(): VNode {\n    return (\n      <Host aria-label={this.messages.label} role=\"region\">\n        <div\n          class={{ container: true, [CSS.singleView]: !this.multipleViewMode }}\n          ref={this.setContainerEl}\n        >\n          {!this.multipleViewMode && this.layout === \"horizontal\" && (\n            <div class={{ [CSS.stepBarContainer]: true }}>\n              {this.items.map((item, index) => (\n                <StepBar\n                  active={index === this.currentActivePosition}\n                  complete={item.complete && index !== this.currentActivePosition && !item.error}\n                  disabled={item.disabled && index !== this.currentActivePosition}\n                  error={item.error && index !== this.currentActivePosition}\n                  key={index}\n                />\n              ))}\n            </div>\n          )}\n          <div class={{ [CSS.actionContainer]: true }}>\n            {this.renderAction(\"start\")}\n            {this.renderAction(\"end\")}\n          </div>\n          <slot onSlotchange={this.handleDefaultSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemKeyEvent\")\n  calciteInternalStepperItemKeyEvent(event: CustomEvent<StepperItemKeyEventDetail>): void {\n    const item = event.detail.item;\n    const itemToFocus = event.target as HTMLCalciteStepperItemElement;\n\n    switch (item.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"next\");\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"previous\");\n        break;\n      case \"Home\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"first\");\n        break;\n      case \"End\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"last\");\n        break;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemRegister\")\n  registerItem(event: CustomEvent): void {\n    const item = event.target as HTMLCalciteStepperItemElement;\n    const { content, position } = event.detail;\n\n    this.itemMap.set(item, { position, content });\n    this.enabledItems = this.filterItems();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemSelect\")\n  updateItem(event: CustomEvent): void {\n    const { position } = event.detail;\n    if (typeof position === \"number\") {\n      this.currentActivePosition = position;\n      this.selectedItem = event.target as HTMLCalciteStepperItemElement;\n    }\n\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  @Listen(\"calciteInternalUserRequestedStepperItemSelect\")\n  handleUserRequestedStepperItemSelect(): void {\n    this.calciteStepperItemChange.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Set the next `calcite-stepper-item` as active. */\n  @Method()\n  async nextStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition + 1, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the previous `calcite-stepper-item` as active. */\n  @Method()\n  async prevStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /**\n   * Set a specified `calcite-stepper-item` as active.\n   *\n   * @param step\n   */\n  @Method()\n  async goToStep(step: number): Promise<void> {\n    const position = step - 1;\n\n    if (this.currentActivePosition !== position) {\n      this.updateStep(position);\n    }\n  }\n\n  /** Set the first `calcite-stepper-item` as active. */\n  @Method()\n  async startStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(0, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the last `calcite-stepper-item` as active. */\n  @Method()\n  async endStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperElement;\n\n  @State() defaultMessages: StepperMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() currentActivePosition: number;\n\n  @Watch(\"currentActivePosition\")\n  handlePositionChange(): void {\n    readTask((): void => {\n      this.determineActiveStepper(true);\n    });\n  }\n\n  @State() elWidth: number;\n\n  @Watch(\"elWidth\")\n  handleElWidthChange(): void {\n    readTask((): void => {\n      this.determineActiveStepper();\n    });\n  }\n\n  private enabledItems: HTMLCalciteStepperItemElement[] = [];\n\n  private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();\n\n  private items: HTMLCalciteStepperItemElement[] = [];\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateItems());\n\n  /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */\n  private multipleViewMode = false;\n\n  private guid = `calcite-stepper-action-${guid()}`;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private resizeObserver = createObserver(\n    \"resize\",\n    (entries) => (this.elWidth = entries[0].contentRect.width),\n  );\n\n  private updateItems(): void {\n    this.el.querySelectorAll(\"calcite-stepper-item\").forEach((item) => {\n      item.icon = this.icon;\n      item.numbered = this.numbered;\n      item.layout = this.layout;\n      item.scale = this.scale;\n    });\n  }\n\n  private determineActiveStepper(currentActivePositionChanged = false): void {\n    const totalItems = this.items.length;\n    if (!this.elWidth || !totalItems || this.layout !== \"horizontal\" || totalItems === 1) {\n      return;\n    }\n\n    const activePosition = this.currentActivePosition || 0;\n    const totalMinWidthOfItems = totalItems * this.getMinWidthOfStepperItem();\n    const totalRowGap =\n      (totalItems - 1) * (parseInt(window.getComputedStyle(this.containerEl).rowGap) || 0);\n\n    if (this.elWidth <= totalMinWidthOfItems + totalRowGap) {\n      this.multipleViewMode = false;\n\n      this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {\n        if (index !== activePosition) {\n          item.hidden = true;\n        } else {\n          item.hidden = false;\n          item.multipleViewMode = false;\n        }\n      });\n    } else if (this.elWidth > totalMinWidthOfItems + totalRowGap) {\n      if (this.multipleViewMode && !currentActivePositionChanged) {\n        return;\n      }\n\n      this.multipleViewMode = true;\n      this.setGridTemplateColumns(this.items);\n      this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n        item.hidden = false;\n        item.multipleViewMode = true;\n      });\n    }\n  }\n\n  private getEnabledStepIndex(\n    startIndex: number,\n    direction: \"next\" | \"previous\" = \"next\",\n  ): number | null {\n    const { items, currentActivePosition } = this;\n\n    let newIndex = startIndex;\n\n    while (items[newIndex]?.disabled && this.multipleViewMode) {\n      newIndex = newIndex + (direction === \"previous\" ? -1 : 1);\n    }\n\n    return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0\n      ? newIndex\n      : null;\n  }\n\n  private updateStep(position: number): void {\n    this.currentActivePosition = position;\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  private filterItems(): HTMLCalciteStepperItemElement[] {\n    return this.items.filter((item) => !item.disabled);\n  }\n\n  private setStepperItemNumberingSystem(): void {\n    this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n      item.numberingSystem = this.numberingSystem;\n    });\n  }\n\n  private renderAction(position: Position): VNode {\n    const isPositionStart = position === \"start\";\n    const path = isPositionStart ? \"chevron-left\" : \"chevron-right\";\n    const { currentActivePosition, multipleViewMode, layout } = this;\n    const totalItems = this.items.length;\n    const id = `${this.guid}-${isPositionStart ? \"start\" : \"end\"}`;\n\n    return layout === \"horizontal\" && !multipleViewMode ? (\n      <calcite-action\n        alignment=\"center\"\n        appearance=\"transparent\"\n        class={{\n          [CSS.actionIcon]: true,\n        }}\n        compact={true}\n        data-position={position}\n        disabled={\n          (currentActivePosition === 0 && isPositionStart) ||\n          (currentActivePosition === totalItems - 1 && !isPositionStart)\n        }\n        icon={path}\n        iconFlipRtl={true}\n        id={id}\n        onClick={this.handleActionClick}\n        scale={this.scale}\n        text={isPositionStart ? this.messages.previousStep : this.messages.nextStep}\n      />\n    ) : null;\n  }\n\n  private handleActionClick = (event: MouseEvent): void => {\n    const currentActivePosition = this.currentActivePosition;\n    const target = event.target as HTMLCalciteActionElement;\n    if (target.getAttribute(\"data-position\") === \"start\") {\n      this.prevStep();\n    } else {\n      this.nextStep();\n    }\n\n    if (\n      typeof this.currentActivePosition === \"number\" &&\n      currentActivePosition !== this.currentActivePosition &&\n      !this.items[this.currentActivePosition].disabled\n    ) {\n      this.calciteStepperItemChange.emit();\n    }\n  };\n\n  private getFirstEnabledStepperPosition(): number {\n    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);\n\n    if (enabledStepIndex > -1) {\n      return enabledStepIndex;\n    }\n\n    return 0;\n  }\n\n  private setContainerEl = (el: HTMLDivElement): void => {\n    this.containerEl = el;\n  };\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const items = slotChangeGetAssignedElements(event).filter(\n      (el) => el?.tagName === \"CALCITE-STEPPER-ITEM\",\n    );\n    this.items = items as HTMLCalciteStepperItemElement[];\n    this.setGridTemplateColumns(items);\n    this.setStepperItemNumberingSystem();\n  };\n\n  private setGridTemplateColumns(items: Element[]): void {\n    const minWidth = this.getMinWidthOfStepperItem();\n    const spacing = Array(items.length).fill(`minmax(${minWidth}px, 1fr)`).join(\" \");\n    this.containerEl.style.gridTemplateAreas = spacing;\n    this.containerEl.style.gridTemplateColumns = spacing;\n  }\n\n  private getMinWidthOfStepperItem(): number {\n    return ITEM_MIN_WIDTH[this.scale];\n  }\n}\n","export const CSS = {\n  container: \"container\",\n  stepperItemContent: \"stepper-item-content\",\n  stepperItemDescription: \"stepper-item-description\",\n  stepperItemHeader: \"stepper-item-header\",\n  stepperItemHeading: \"stepper-item-heading\",\n  stepperItemHeaderText: \"stepper-item-header-text\",\n  stepperItemNumber: \"stepper-item-number\",\n  visuallyHidden: \"visually-hidden\",\n};\n",":host([scale=\"s\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.4\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  @apply text-n1h;\n  margin-inline-end: theme(\"margin.1\");\n  .stepper-item-description {\n    @apply text-n2h;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.4\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.5\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n  @apply text-0h;\n  margin-inline-end: theme(\"margin.2\");\n  .stepper-item-description {\n    @apply text-n1h;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.5\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.6\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  @apply text-1h;\n  margin-inline-end: theme(\"margin.3\");\n  .stepper-item-description {\n    @apply text-0h;\n  }\n}\n\n:host {\n  @apply relative\n  flex\n  flex-grow\n  flex-col\n  self-start;\n  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);\n}\n\n:host .container {\n  @apply text-color-3\n    border-color-3\n    relative\n    flex\n    flex-grow\n    cursor-pointer\n    flex-col\n    border-0\n    border-t-2\n    border-solid\n    no-underline\n    outline-none\n    duration-150\n    ease-in-out;\n}\n\n// focus styles\n:host {\n  @apply focus-base;\n}\n:host(:focus) {\n  @apply focus-outset;\n}\n\n// .stepper-item-header / content\n:host .stepper-item-header {\n  @apply flex cursor-pointer items-start;\n}\n\n:host .stepper-item-content,\n:host .stepper-item-header {\n  @apply duration-150 ease-in-out;\n  padding-block: var(--calcite-stepper-item-spacing-unit-l);\n  padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  text-align: start;\n}\n\n:host .stepper-item-header * {\n  @apply inline-flex\n    items-center\n    duration-150\n    ease-in-out;\n}\n\n:host .stepper-item-content {\n  @apply text-n2-wrap\n    hidden\n    w-full\n    flex-col;\n}\n\n// stepper item icon\n:host .stepper-item-icon {\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  @apply text-color-3\n    opacity-disabled\n    mt-px\n    inline-flex\n    h-3\n    flex-shrink-0\n    self-start\n    duration-150\n    ease-in-out;\n}\n\n// stepper item title\n:host .stepper-item-header-text {\n  @apply flex-col;\n  text-align: initial;\n  margin-inline-end: auto;\n}\n\n:host .stepper-item-heading,\n:host .stepper-item-description {\n  @apply flex w-full;\n}\n:host .stepper-item-heading {\n  @apply text-color-2 mb-1 font-medium;\n}\n:host .stepper-item-description {\n  @apply text-color-3;\n}\n\n:host .stepper-item-number {\n  @apply text-color-3\n    font-medium\n    duration-150\n    ease-in-out;\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n}\n\n@include disabled();\n\n:host([complete]) .container {\n  // todo dark mode\n  border-color: rgba($h-bb-060, 0.5);\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n  }\n}\n\n:host([error]) .container {\n  @apply border-t-color-danger;\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host(:hover:not([disabled]):not([selected])) .container,\n:host(:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-brand;\n\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n}\n\n:host([error]:hover:not([disabled]):not([selected])) .container,\n:host([error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-danger-hover;\n}\n\n:host([selected]) .container {\n  border-block-start-color: theme(\"backgroundColor.brand\");\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.brand\");\n  }\n\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n    @apply opacity-100;\n  }\n}\n\n:host([selected]) .container {\n  & .stepper-item-content {\n    @apply flex;\n  }\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply border-color-3\n  mx-0\n  mt-0\n  flex-auto\n  border-t-0\n  border-solid\n  py-0;\n  border-inline-start-width: theme(\"borderWidth.2\");\n  padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);\n\n  & .stepper-item-icon {\n    @apply order-3 mt-px mb-0;\n    padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);\n    margin-inline-start: theme(\"margin.auto\");\n  }\n  & .stepper-item-header {\n    padding-inline-end: theme(\"padding.0\");\n  }\n  & .stepper-item-content {\n    @apply p-0;\n  }\n}\n\n:host([layout=\"vertical\"][complete]) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][complete]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][complete]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-brand;\n}\n:host([layout=\"vertical\"][error]) .container {\n  @apply border-color-danger;\n}\n:host([layout=\"vertical\"][selected]) .container {\n  @apply border-color-brand;\n\n  & .stepper-item-content:not(:empty) {\n    margin-block-end: var(--calcite-stepper-item-spacing-unit-l);\n  }\n}\n:host([layout=\"vertical\"]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"]:focus:not([disabled]):not([selected])) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][error]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-danger-hover;\n}\n\n:host([layout=\"horizontal\"]) {\n  display: contents;\n\n  .container {\n    display: contents;\n  }\n\n  .stepper-item-header {\n    @apply border-color-3\n    border-0\n    border-solid\n    border-t-2\n    focus-base;\n    grid-row: items;\n\n    &:focus {\n      @apply focus-outset;\n    }\n  }\n\n  .stepper-item-content {\n    @apply cursor-auto duration-150 ease-in-out;\n    padding-block: 0;\n    padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n    text-align: start;\n  }\n}\n\n:host([layout=\"horizontal\"][disabled]) {\n  .stepper-item-header {\n    @extend %disabled-host-only;\n  }\n}\n\n:host([layout=\"horizontal\"][selected]) {\n  .stepper-item-content {\n    grid-area: 2 / 1 / 2 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"][complete]) .stepper-item-header {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"horizontal\"][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,\n:host([layout=\"horizontal\"][complete]:focus:not([disabled]):not([selected])) .stepper-item-header {\n  @apply border-color-brand;\n}\n:host([layout=\"horizontal\"][error]) .stepper-item-header {\n  @apply border-color-danger;\n}\n:host([layout=\"horizontal\"][selected][multiple-view-mode]) .stepper-item-header {\n  @apply border-color-brand;\n}\n:host([layout=\"horizontal\"]:hover:not([disabled]):not([selected])) .stepper-item-header,\n:host([layout=\"horizontal\"]:focus:not([disabled]):not([selected])) .stepper-item-header {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"horizontal\"][error]:hover:not([disabled]):not([selected])) .stepper-item-header,\n:host([layout=\"horizontal\"][error]:focus:not([disabled]):not([selected])) .stepper-item-header {\n  @apply border-color-danger-hover;\n}\n\n@media (forced-colors: active) {\n  :host .container {\n    outline-width: 0;\n    outline-offset: 0;\n  }\n\n  :host(:focus),\n  :host(:focus-visible) {\n    outline-color: canvasText;\n  }\n\n  :host([selected]) .container {\n    border-block-start-color: highlight;\n    & .stepper-item-number {\n      color: highlight;\n    }\n    & .stepper-item-icon {\n      color: highlight;\n    }\n  }\n\n  :host([layout=\"vertical\"][selected]) .container {\n    border-color: highlight;\n  }\n}\n\n:host([layout=\"horizontal\"]:not([multiple-view-mode])) .stepper-item-header {\n  @apply border-none \n  me-0;\n  inline-size: 100%;\n  padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);\n}\n\n:host([layout=\"horizontal\"][error]:not([multiple-view-mode])) .container {\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host([layout=\"horizontal\"][error][selected]:not([multiple-view-mode])),\n:host([layout=\"horizontal\"][complete][selected]:not([multiple-view-mode])) .container {\n  @apply text-color-3;\n  & .stepper-item-heading {\n    @apply text-color-2;\n  }\n}\n\n:host([layout=\"horizontal\"][complete][selected]:not([multiple-view-mode])) .container {\n  & .stepper-item-icon {\n    @apply opacity-disabled;\n  }\n  & .stepper-item-number {\n    @apply text-color-3;\n  }\n}\n\n.visually-hidden {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { Layout, Scale } from \"../interfaces\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemEventDetail,\n  StepperItemKeyEventDetail,\n} from \"../stepper/interfaces\";\nimport {\n  numberStringFormatter,\n  LocalizedComponent,\n  disconnectLocalized,\n  connectLocalized,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  setUpLoadableComponent,\n  setComponentLoaded,\n  LoadableComponent,\n  componentFocusable,\n} from \"../../utils/loadable\";\nimport { CSS } from \"./resources\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { StepperItemMessages } from \"./assets/stepper-item/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-stepper-item\",\n  styleUrl: \"stepper-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class StepperItem\n  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedHandler(): void {\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n  }\n\n  /** When `true`, the step has been completed. */\n  @Prop({ reflect: true }) complete = false;\n\n  /** When `true`, the component contains an error that requires resolution from the user. */\n  @Prop({ reflect: true }) error = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text. */\n  @Prop() heading: string;\n\n  /** A description for the component. Displays below the header text. */\n  @Prop() description: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * @internal\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  // watch for removal of disabled to register step\n  @Watch(\"disabled\")\n  disabledWatcher(): void {\n    this.registerStepperItem();\n  }\n\n  /**\n   * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() icon = false;\n\n  /**\n   * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\", Layout>;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperItemMessages;\n\n  /**\n   * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() numbered = false;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies if the user is viewing one `stepper-item` at a time.\n   * Helps in determining if header region is tabbable.\n   * @internal\n   */\n  @Prop({ reflect: true }) multipleViewMode = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Internal State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @State() defaultMessages: StepperItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleWatcher(locale: string): void {\n    numberStringFormatter.numberFormatOptions = {\n      locale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  headerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemKeyEvent: EventEmitter<StepperItemKeyEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemSelect: EventEmitter<StepperItemEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalUserRequestedStepperItemSelect: EventEmitter<StepperItemChangeEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemRegister: EventEmitter<StepperItemEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    this.parentStepperEl = this.el.parentElement as HTMLCalciteStepperElement;\n    this.itemPosition = this.getItemPosition();\n    this.registerStepperItem();\n\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-current={this.selected ? \"step\" : \"false\"}\n        onClick={this.handleItemClick}\n        onKeyDown={this.keyDownHandler}\n        tabIndex={this.disabled ? -1 : 0}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <div class={CSS.container}>\n            {this.complete && (\n              <span aria-live=\"polite\" class={CSS.visuallyHidden}>\n                {this.messages.complete}\n              </span>\n            )}\n            <div\n              class={CSS.stepperItemHeader}\n              tabIndex={\n                /* additional tab index logic needed because of display: contents */\n                this.layout === \"horizontal\" && !this.disabled && this.multipleViewMode ? 0 : null\n              }\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.headerEl = el)}\n            >\n              {this.icon ? this.renderIcon() : null}\n              {this.numbered ? (\n                <div class={CSS.stepperItemNumber}>{this.renderNumbers()}.</div>\n              ) : null}\n              <div class={CSS.stepperItemHeaderText}>\n                <span class={CSS.stepperItemHeading}>{this.heading}</span>\n                <span class={CSS.stepperItemDescription}>{this.description}</span>\n              </div>\n            </div>\n            <div class={CSS.stepperItemContent}>\n              <slot />\n            </div>\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent<StepperItemChangeEventDetail>): void {\n    if (\n      event.target === this.parentStepperEl ||\n      event.composedPath().includes(this.parentStepperEl)\n    ) {\n      this.selectedPosition = event.detail.position;\n      this.determineSelectedItem();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    (this.layout === \"vertical\" ? this.el : this.headerEl)?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperItemElement;\n\n  /** position within parent */\n  private itemPosition: number;\n\n  /** the latest requested item position*/\n  private selectedPosition: number;\n\n  /** the parent stepper component */\n  private parentStepperEl: HTMLCalciteStepperElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.emitUserRequestedItem();\n          event.preventDefault();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowDown\":\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalStepperItemKeyEvent.emit({ item: event });\n          event.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private renderIcon(): VNode {\n    let path = \"circle\";\n\n    if (this.selected && (this.multipleViewMode || (!this.error && !this.complete))) {\n      path = \"circleF\";\n    } else if (this.error) {\n      path = \"exclamationMarkCircleF\";\n    } else if (this.complete) {\n      path = \"checkCircleF\";\n    }\n\n    return (\n      <calcite-icon class=\"stepper-item-icon\" flipRtl={this.iconFlipRtl} icon={path} scale=\"s\" />\n    );\n  }\n\n  private determineSelectedItem(): void {\n    this.selected = !this.disabled && this.itemPosition === this.selectedPosition;\n  }\n\n  private registerStepperItem(): void {\n    this.calciteInternalStepperItemRegister.emit({\n      position: this.itemPosition,\n    });\n  }\n\n  private handleItemClick = (event: MouseEvent): void => {\n    if (\n      this.disabled ||\n      (this.layout === \"horizontal\" &&\n        event\n          .composedPath()\n          .some((el) => (el as HTMLElement).classList?.contains(\"stepper-item-content\")))\n    ) {\n      return;\n    }\n\n    this.emitUserRequestedItem();\n  };\n\n  private emitUserRequestedItem = (): void => {\n    this.emitRequestedItem();\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalUserRequestedStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private emitRequestedItem = (): void => {\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private getItemPosition(): number {\n    return Array.from(this.parentStepperEl?.querySelectorAll(\"calcite-stepper-item\")).indexOf(\n      this.el,\n    );\n  }\n\n  renderNumbers(): string {\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);\n  }\n}\n"],"version":3}
+{"file":"calcite-stepper.calcite-stepper-item.entry.cjs.js","mappings":"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","names":["CSS","h","createObserver","guid","slotChangeGetAssignedElements","connectMessages","connectLocalized","setUpMessages","disconnectMessages","disconnectLocalized","Host","index","focusElementInGroup","updateMessages","readTask","locale","numberStringFormatter","connectInteractive","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","disconnectInteractive","InteractiveContainer","componentFocusable"],"sources":["src/components/stepper/functional/step-bar.tsx","src/components/stepper/resources.ts","src/components/stepper/stepper.scss?tag=calcite-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx","src/components/stepper-item/resources.ts","src/components/stepper-item/stepper-item.scss?tag=calcite-stepper-item&encapsulation=shadow","src/components/stepper-item/stepper-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\n\ninterface StepBarProps {\n  active: boolean;\n  complete: boolean;\n  error: boolean;\n  disabled: boolean;\n  key: number;\n}\n\nexport const CSS = {\n  stepBar: \"step-bar\",\n  stepBarActive: \"step-bar--active\",\n  stepBarComplete: \"step-bar--complete\",\n  stepBarDisabled: \"step-bar--disabled\",\n  stepBarError: \"step-bar--error\",\n  stepBarInActive: \"step-bar--inactive\",\n};\n\nexport const StepBar: FunctionalComponent<StepBarProps> = ({\n  disabled,\n  active,\n  complete,\n  error,\n  key,\n}) => (\n  <svg\n    class={{\n      [CSS.stepBar]: true,\n    }}\n    key={key}\n  >\n    <rect\n      class={{\n        [CSS.stepBarActive]: active,\n        [CSS.stepBarComplete]: complete,\n        [CSS.stepBarDisabled]: disabled,\n        [CSS.stepBarError]: error,\n        [CSS.stepBarInActive]: true,\n      }}\n      width=\"100%\"\n      x=\"0\"\n      y=\"0\"\n    />\n  </svg>\n);\n","export const ITEM_MIN_WIDTH = {\n  s: 120,\n  m: 180,\n  l: 200,\n};\n\nexport const CSS = {\n  actionIcon: \"action-icon\",\n  actionIconStart: \"action-icon--start\",\n  actionIconEnd: \"action-icon--end\",\n  actionContainer: \"action-container\",\n  stepBarContainer: \"step-bar-container\",\n  singleView: \"single-view\",\n};\n",":host([scale=\"s\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.11\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.1\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.13\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-internal-stepper-action-block-size: theme(\"spacing.16\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  --calcite-internal-step-bar-gap: theme(\"spacing.3\");\n}\n\n:host {\n  @apply flex;\n}\n\n.container {\n  @apply relative\n    flex\n    w-full\n    min-w-fit\n    flex-row\n    flex-wrap\n    items-stretch\n    justify-between;\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply flex-auto flex-col;\n}\n\n:host([layout=\"horizontal\"]) .container {\n  display: grid;\n  // grid-templates-columns are dynamically generated\n  // grid-templates-rows are dynamically generated\n  grid-template-areas:\n    \"items\"\n    \"content\";\n  gap: theme(\"spacing.2\") var(--calcite-internal-stepper-item-spacing-unit-s);\n}\n\n:host([layout=\"horizontal\"][scale=\"s\"]) .container {\n  gap: theme(\"spacing.1\") var(--calcite-internal-stepper-item-spacing-unit-s);\n}\n\n:host([layout=\"horizontal\"][scale=\"l\"]) .container {\n  gap: theme(\"spacing.3\") var(--calcite-internal-stepper-item-spacing-unit-s);\n}\n\n:host([layout=\"horizontal\"]) .container.single-view {\n  @apply flex  grid-cols-none;\n}\n\n.action-icon {\n  @apply flex relative grow-0;\n  block-size: var(--calcite-internal-stepper-action-block-size);\n  inline-size: var(--calcite-internal-stepper-action-inline-size);\n}\n\n.action-container {\n  @apply absolute flex justify-between;\n  padding-block: 0.25rem;\n  inline-size: 100%;\n}\n\n@mixin stepBar {\n  .step-bar {\n    @apply flex;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  .step-bar-container {\n    @apply flex absolute justify-between items-start;\n    block-size: 0.125rem;\n    inline-size: 100%;\n    gap: var(--calcite-internal-step-bar-gap, 0.5rem);\n  }\n\n  .step-bar--inactive {\n    fill: var(--calcite-color-border-3, #dfdfdf);\n    fill-opacity: 1;\n    block-size: 100%;\n  }\n\n  .step-bar--active {\n    fill: var(--calcite-color-brand);\n  }\n\n  .step-bar--complete {\n    fill: var(--calcite-color-brand);\n    fill-opacity: 0.5;\n  }\n\n  .step-bar--error {\n    fill: var(--calcite-color-status-danger);\n  }\n\n  .step-bar--disabled {\n    opacity: 0.5;\n  }\n}\n\n@include stepBar();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n  readTask,\n} from \"@stencil/core\";\nimport { focusElementInGroup, slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport { Layout, Position, Scale } from \"../interfaces\";\nimport { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from \"./interfaces\";\nimport { createObserver } from \"../../utils/observers\";\nimport { StepBar } from \"./functional/step-bar\";\nimport { ITEM_MIN_WIDTH, CSS } from \"./resources\";\nimport { guid } from \"../../utils/guid\";\n\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  LocalizedComponent,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { StepperMessages } from \"./assets/stepper/t9n\";\n\n/**\n * @slot - A slot for adding `calcite-stepper-item` elements.\n */\n@Component({\n  tag: \"calcite-stepper\",\n  styleUrl: \"stepper.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Stepper implements LocalizedComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) icon = false;\n\n  /** Defines the layout of the component. */\n  @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\", Layout> = \"horizontal\";\n\n  /** When `true`, displays the step number in the `calcite-stepper-item` heading. */\n  @Prop({ reflect: true }) numbered = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"icon\")\n  @Watch(\"layout\")\n  @Watch(\"numbered\")\n  @Watch(\"scale\")\n  handleItemPropChange(): void {\n    this.updateItems();\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperMessages;\n\n  /**\n   * Specifies the Unicode numeral system used by the component for localization.\n   */\n  @Prop({ reflect: true }) numberingSystem?: NumberingSystem;\n\n  @Watch(\"numberingSystem\")\n  numberingSystemChange(): void {\n    this.setStepperItemNumberingSystem();\n  }\n\n  /**\n   * Specifies the component's selected item.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteStepperItemElement = null;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   */\n  @Event({ cancelable: false }) calciteStepperItemChange: EventEmitter<void>;\n\n  /**\n   * Fires when the active `calcite-stepper-item` changes.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true });\n    this.updateItems();\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    this.resizeObserver?.observe(this.containerEl);\n    // if no stepper items are set as active, default to the first one\n    if (typeof this.currentActivePosition !== \"number\") {\n      const enabledStepIndex = this.getFirstEnabledStepperPosition();\n\n      if (enabledStepIndex === 0) {\n        this.currentActivePosition = enabledStepIndex;\n      }\n\n      this.calciteInternalStepperItemChange.emit({\n        position: enabledStepIndex,\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n    disconnectMessages(this);\n    disconnectLocalized(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  render(): VNode {\n    return (\n      <Host aria-label={this.messages.label} role=\"region\">\n        <div\n          class={{ container: true, [CSS.singleView]: !this.multipleViewMode }}\n          ref={this.setContainerEl}\n        >\n          {!this.multipleViewMode && this.layout === \"horizontal\" && (\n            <div class={{ [CSS.stepBarContainer]: true }}>\n              {this.items.map((item, index) => (\n                <StepBar\n                  active={index === this.currentActivePosition}\n                  complete={item.complete && index !== this.currentActivePosition && !item.error}\n                  disabled={item.disabled && index !== this.currentActivePosition}\n                  error={item.error && index !== this.currentActivePosition}\n                  key={index}\n                />\n              ))}\n            </div>\n          )}\n          <div class={{ [CSS.actionContainer]: true }}>\n            {this.renderAction(\"start\")}\n            {this.renderAction(\"end\")}\n          </div>\n          <slot onSlotchange={this.handleDefaultSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemKeyEvent\")\n  calciteInternalStepperItemKeyEvent(event: CustomEvent<StepperItemKeyEventDetail>): void {\n    const item = event.detail.item;\n    const itemToFocus = event.target as HTMLCalciteStepperItemElement;\n\n    switch (item.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"next\");\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"previous\");\n        break;\n      case \"Home\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"first\");\n        break;\n      case \"End\":\n        focusElementInGroup(this.enabledItems, itemToFocus, \"last\");\n        break;\n    }\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemRegister\")\n  registerItem(event: CustomEvent): void {\n    const item = event.target as HTMLCalciteStepperItemElement;\n    const { content, position } = event.detail;\n\n    this.itemMap.set(item, { position, content });\n    this.enabledItems = this.filterItems();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalStepperItemSelect\")\n  updateItem(event: CustomEvent): void {\n    const { position } = event.detail;\n    if (typeof position === \"number\") {\n      this.currentActivePosition = position;\n      this.selectedItem = event.target as HTMLCalciteStepperItemElement;\n    }\n\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  @Listen(\"calciteInternalUserRequestedStepperItemSelect\")\n  handleUserRequestedStepperItemSelect(): void {\n    this.calciteStepperItemChange.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Set the next `calcite-stepper-item` as active. */\n  @Method()\n  async nextStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition + 1, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the previous `calcite-stepper-item` as active. */\n  @Method()\n  async prevStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.currentActivePosition - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /**\n   * Set a specified `calcite-stepper-item` as active.\n   *\n   * @param step\n   */\n  @Method()\n  async goToStep(step: number): Promise<void> {\n    const position = step - 1;\n\n    if (this.currentActivePosition !== position) {\n      this.updateStep(position);\n    }\n  }\n\n  /** Set the first `calcite-stepper-item` as active. */\n  @Method()\n  async startStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(0, \"next\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  /** Set the last `calcite-stepper-item` as active. */\n  @Method()\n  async endStep(): Promise<void> {\n    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, \"previous\");\n\n    if (typeof enabledStepIndex !== \"number\") {\n      return;\n    }\n\n    this.updateStep(enabledStepIndex);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperElement;\n\n  @State() defaultMessages: StepperMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() currentActivePosition: number;\n\n  @Watch(\"currentActivePosition\")\n  handlePositionChange(): void {\n    readTask((): void => {\n      this.determineActiveStepper(true);\n    });\n  }\n\n  @State() elWidth: number;\n\n  @Watch(\"elWidth\")\n  handleElWidthChange(): void {\n    readTask((): void => {\n      this.determineActiveStepper();\n    });\n  }\n\n  private enabledItems: HTMLCalciteStepperItemElement[] = [];\n\n  private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();\n\n  private items: HTMLCalciteStepperItemElement[] = [];\n\n  private mutationObserver = createObserver(\"mutation\", () => this.updateItems());\n\n  /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */\n  private multipleViewMode = false;\n\n  private guid = `calcite-stepper-action-${guid()}`;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private resizeObserver = createObserver(\n    \"resize\",\n    (entries) => (this.elWidth = entries[0].contentRect.width),\n  );\n\n  private updateItems(): void {\n    this.el.querySelectorAll(\"calcite-stepper-item\").forEach((item) => {\n      item.icon = this.icon;\n      item.numbered = this.numbered;\n      item.layout = this.layout;\n      item.scale = this.scale;\n    });\n  }\n\n  private determineActiveStepper(currentActivePositionChanged = false): void {\n    const totalItems = this.items.length;\n    if (!this.elWidth || !totalItems || this.layout !== \"horizontal\" || totalItems === 1) {\n      return;\n    }\n\n    const activePosition = this.currentActivePosition || 0;\n    const totalMinWidthOfItems = totalItems * this.getMinWidthOfStepperItem();\n    const totalRowGap =\n      (totalItems - 1) * (parseInt(window.getComputedStyle(this.containerEl).rowGap) || 0);\n\n    if (this.elWidth <= totalMinWidthOfItems + totalRowGap) {\n      this.multipleViewMode = false;\n\n      this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {\n        if (index !== activePosition) {\n          item.hidden = true;\n        } else {\n          item.hidden = false;\n          item.multipleViewMode = false;\n        }\n      });\n    } else if (this.elWidth > totalMinWidthOfItems + totalRowGap) {\n      if (this.multipleViewMode && !currentActivePositionChanged) {\n        return;\n      }\n\n      this.multipleViewMode = true;\n      this.setGridTemplateColumns(this.items);\n      this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n        item.hidden = false;\n        item.multipleViewMode = true;\n      });\n    }\n  }\n\n  private getEnabledStepIndex(\n    startIndex: number,\n    direction: \"next\" | \"previous\" = \"next\",\n  ): number | null {\n    const { items, currentActivePosition } = this;\n\n    let newIndex = startIndex;\n\n    while (items[newIndex]?.disabled && this.multipleViewMode) {\n      newIndex = newIndex + (direction === \"previous\" ? -1 : 1);\n    }\n\n    return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0\n      ? newIndex\n      : null;\n  }\n\n  private updateStep(position: number): void {\n    this.currentActivePosition = position;\n    this.calciteInternalStepperItemChange.emit({\n      position,\n    });\n  }\n\n  private filterItems(): HTMLCalciteStepperItemElement[] {\n    return this.items.filter((item) => !item.disabled);\n  }\n\n  private setStepperItemNumberingSystem(): void {\n    this.items.forEach((item: HTMLCalciteStepperItemElement) => {\n      item.numberingSystem = this.numberingSystem;\n    });\n  }\n\n  private renderAction(position: Position): VNode {\n    const isPositionStart = position === \"start\";\n    const path = isPositionStart ? \"chevron-left\" : \"chevron-right\";\n    const { currentActivePosition, multipleViewMode, layout } = this;\n    const totalItems = this.items.length;\n    const id = `${this.guid}-${isPositionStart ? \"start\" : \"end\"}`;\n\n    return layout === \"horizontal\" && !multipleViewMode ? (\n      <calcite-action\n        alignment=\"center\"\n        appearance=\"transparent\"\n        class={{\n          [CSS.actionIcon]: true,\n        }}\n        compact={true}\n        data-position={position}\n        disabled={\n          (currentActivePosition === 0 && isPositionStart) ||\n          (currentActivePosition === totalItems - 1 && !isPositionStart)\n        }\n        icon={path}\n        iconFlipRtl={true}\n        id={id}\n        onClick={this.handleActionClick}\n        scale={this.scale}\n        text={isPositionStart ? this.messages.previousStep : this.messages.nextStep}\n      />\n    ) : null;\n  }\n\n  private handleActionClick = (event: MouseEvent): void => {\n    const currentActivePosition = this.currentActivePosition;\n    const target = event.target as HTMLCalciteActionElement;\n    if (target.getAttribute(\"data-position\") === \"start\") {\n      this.prevStep();\n    } else {\n      this.nextStep();\n    }\n\n    if (\n      typeof this.currentActivePosition === \"number\" &&\n      currentActivePosition !== this.currentActivePosition &&\n      !this.items[this.currentActivePosition].disabled\n    ) {\n      this.calciteStepperItemChange.emit();\n    }\n  };\n\n  private getFirstEnabledStepperPosition(): number {\n    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);\n\n    if (enabledStepIndex > -1) {\n      return enabledStepIndex;\n    }\n\n    return 0;\n  }\n\n  private setContainerEl = (el: HTMLDivElement): void => {\n    this.containerEl = el;\n  };\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const items = slotChangeGetAssignedElements(event).filter(\n      (el) => el?.tagName === \"CALCITE-STEPPER-ITEM\",\n    );\n    this.items = items as HTMLCalciteStepperItemElement[];\n    this.setGridTemplateColumns(items);\n    this.setStepperItemNumberingSystem();\n  };\n\n  private setGridTemplateColumns(items: Element[]): void {\n    const minWidth = this.getMinWidthOfStepperItem();\n    const spacing = Array(items.length).fill(`minmax(${minWidth}px, 1fr)`).join(\" \");\n    this.containerEl.style.gridTemplateAreas = spacing;\n    this.containerEl.style.gridTemplateColumns = spacing;\n  }\n\n  private getMinWidthOfStepperItem(): number {\n    return ITEM_MIN_WIDTH[this.scale];\n  }\n}\n","export const CSS = {\n  container: \"container\",\n  stepperItemContent: \"stepper-item-content\",\n  stepperItemDescription: \"stepper-item-description\",\n  stepperItemHeader: \"stepper-item-header\",\n  stepperItemHeading: \"stepper-item-heading\",\n  stepperItemHeaderText: \"stepper-item-header-text\",\n  stepperItemNumber: \"stepper-item-number\",\n  visuallyHidden: \"visually-hidden\",\n};\n",":host([scale=\"s\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.4\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.8\");\n  @apply text-n1h;\n  margin-inline-end: theme(\"margin.1\");\n  .stepper-item-description {\n    @apply text-n2h;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.4\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.5\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.10\");\n  @apply text-0h;\n  margin-inline-end: theme(\"margin.2\");\n  .stepper-item-description {\n    @apply text-n1h;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-stepper-item-spacing-unit-s: theme(\"spacing.3\");\n  --calcite-stepper-item-spacing-unit-m: theme(\"spacing.5\");\n  --calcite-stepper-item-spacing-unit-l: theme(\"spacing.6\");\n  --calcite-internal-stepper-action-inline-size: theme(\"spacing.12\");\n  @apply text-1h;\n  margin-inline-end: theme(\"margin.3\");\n  .stepper-item-description {\n    @apply text-0h;\n  }\n}\n\n:host {\n  @apply relative\n  flex\n  flex-grow\n  flex-col\n  self-start;\n  margin-block-end: var(--calcite-stepper-item-spacing-unit-s);\n}\n\n:host .container {\n  @apply text-color-3\n    border-color-3\n    relative\n    flex\n    flex-grow\n    cursor-pointer\n    flex-col\n    border-0\n    border-t-2\n    border-solid\n    no-underline\n    outline-none\n    duration-150\n    ease-in-out;\n}\n\n// focus styles\n:host {\n  @apply focus-base;\n}\n:host(:focus) {\n  @apply focus-outset;\n}\n\n// .stepper-item-header / content\n:host .stepper-item-header {\n  @apply flex cursor-pointer items-start;\n}\n\n:host .stepper-item-content,\n:host .stepper-item-header {\n  @apply duration-150 ease-in-out;\n  padding-block: var(--calcite-stepper-item-spacing-unit-l);\n  padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  text-align: start;\n}\n\n:host .stepper-item-header * {\n  @apply inline-flex\n    items-center\n    duration-150\n    ease-in-out;\n}\n\n:host .stepper-item-content {\n  @apply text-n2-wrap\n    hidden\n    w-full\n    flex-col;\n}\n\n// stepper item icon\n:host .stepper-item-icon {\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n  @apply text-color-3\n    opacity-disabled\n    mt-px\n    inline-flex\n    h-3\n    flex-shrink-0\n    self-start\n    duration-150\n    ease-in-out;\n}\n\n// stepper item title\n:host .stepper-item-header-text {\n  @apply flex-col;\n  text-align: initial;\n  margin-inline-end: auto;\n}\n\n:host .stepper-item-heading,\n:host .stepper-item-description {\n  @apply flex w-full;\n}\n:host .stepper-item-heading {\n  @apply text-color-2 mb-1 font-medium;\n}\n:host .stepper-item-description {\n  @apply text-color-3;\n}\n\n:host .stepper-item-number {\n  @apply text-color-3\n    font-medium\n    duration-150\n    ease-in-out;\n  margin-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n}\n\n@include disabled();\n\n:host([complete]) .container {\n  // todo dark mode\n  border-color: rgba($h-bb-060, 0.5);\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n  }\n}\n\n:host([error]) .container {\n  @apply border-t-color-danger;\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host(:hover:not([disabled]):not([selected])) .container,\n:host(:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-brand;\n\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n}\n\n:host([error]:hover:not([disabled]):not([selected])) .container,\n:host([error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-t-color-danger-hover;\n}\n\n:host([selected]) .container {\n  border-block-start-color: theme(\"backgroundColor.brand\");\n  & .stepper-item-heading {\n    @apply text-color-1;\n  }\n  & .stepper-item-description {\n    @apply text-color-2;\n  }\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.brand\");\n  }\n\n  & .stepper-item-icon {\n    color: theme(\"backgroundColor.brand\");\n    @apply opacity-100;\n  }\n}\n\n:host([selected]) .container {\n  & .stepper-item-content {\n    @apply flex;\n  }\n}\n\n:host([layout=\"vertical\"]) .container {\n  @apply border-color-3\n  mx-0\n  mt-0\n  flex-auto\n  border-t-0\n  border-solid\n  py-0;\n  border-inline-start-width: theme(\"borderWidth.2\");\n  padding-inline-start: var(--calcite-stepper-item-spacing-unit-l);\n\n  & .stepper-item-icon {\n    @apply order-3 mt-px mb-0;\n    padding-inline-start: var(--calcite-stepper-item-spacing-unit-s);\n    margin-inline-start: theme(\"margin.auto\");\n  }\n  & .stepper-item-header {\n    padding-inline-end: theme(\"padding.0\");\n  }\n  & .stepper-item-content {\n    @apply p-0;\n  }\n}\n\n:host([layout=\"vertical\"][complete]) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][complete]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][complete]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-brand;\n}\n:host([layout=\"vertical\"][error]) .container {\n  @apply border-color-danger;\n}\n:host([layout=\"vertical\"][selected]) .container {\n  @apply border-color-brand;\n\n  & .stepper-item-content:not(:empty) {\n    margin-block-end: var(--calcite-stepper-item-spacing-unit-l);\n  }\n}\n:host([layout=\"vertical\"]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"]:focus:not([disabled]):not([selected])) .container {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"vertical\"][error]:hover:not([disabled]):not([selected])) .container,\n:host([layout=\"vertical\"][error]:focus:not([disabled]):not([selected])) .container {\n  @apply border-color-danger-hover;\n}\n\n:host([layout=\"horizontal\"]) {\n  display: contents;\n\n  .container {\n    display: contents;\n  }\n\n  .stepper-item-header {\n    @apply border-color-3\n    border-0\n    border-solid\n    border-t-2\n    focus-base;\n    grid-row: items;\n\n    &:focus {\n      @apply focus-outset;\n    }\n  }\n\n  .stepper-item-content {\n    @apply cursor-auto duration-150 ease-in-out;\n    padding-block: 0;\n    padding-inline-end: var(--calcite-stepper-item-spacing-unit-m);\n    text-align: start;\n  }\n}\n\n:host([layout=\"horizontal\"][disabled]) {\n  .stepper-item-header {\n    @extend %disabled-host-only;\n  }\n}\n\n:host([layout=\"horizontal\"][selected]) {\n  .stepper-item-content {\n    grid-area: 2 / 1 / 2 / -1;\n  }\n}\n\n:host([layout=\"horizontal\"][complete]) .stepper-item-header {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"horizontal\"][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,\n:host([layout=\"horizontal\"][complete]:focus:not([disabled]):not([selected])) .stepper-item-header {\n  @apply border-color-brand;\n}\n:host([layout=\"horizontal\"][error]) .stepper-item-header {\n  @apply border-color-danger;\n}\n:host([layout=\"horizontal\"][selected][multiple-view-mode]) .stepper-item-header {\n  @apply border-color-brand;\n}\n:host([layout=\"horizontal\"]:hover:not([disabled]):not([selected])) .stepper-item-header,\n:host([layout=\"horizontal\"]:focus:not([disabled]):not([selected])) .stepper-item-header {\n  border-color: rgba($h-bb-060, 0.5);\n}\n:host([layout=\"horizontal\"][error]:hover:not([disabled]):not([selected])) .stepper-item-header,\n:host([layout=\"horizontal\"][error]:focus:not([disabled]):not([selected])) .stepper-item-header {\n  @apply border-color-danger-hover;\n}\n\n@media (forced-colors: active) {\n  :host .container {\n    outline-width: 0;\n    outline-offset: 0;\n  }\n\n  :host(:focus),\n  :host(:focus-visible) {\n    outline-color: canvasText;\n  }\n\n  :host([selected]) .container {\n    border-block-start-color: highlight;\n    & .stepper-item-number {\n      color: highlight;\n    }\n    & .stepper-item-icon {\n      color: highlight;\n    }\n  }\n\n  :host([layout=\"vertical\"][selected]) .container {\n    border-color: highlight;\n  }\n}\n\n:host([layout=\"horizontal\"]:not([multiple-view-mode])) .stepper-item-header {\n  @apply border-none \n  me-0;\n  inline-size: 100%;\n  padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);\n}\n\n:host([layout=\"horizontal\"][error]:not([multiple-view-mode])) .container {\n  & .stepper-item-number {\n    color: theme(\"backgroundColor.danger\");\n  }\n  & .stepper-item-icon {\n    @apply opacity-100;\n    color: theme(\"backgroundColor.danger\");\n  }\n}\n\n:host([layout=\"horizontal\"][error][selected]:not([multiple-view-mode])),\n:host([layout=\"horizontal\"][complete][selected]:not([multiple-view-mode])) .container {\n  @apply text-color-3;\n  & .stepper-item-heading {\n    @apply text-color-2;\n  }\n}\n\n:host([layout=\"horizontal\"][complete][selected]:not([multiple-view-mode])) .container {\n  & .stepper-item-icon {\n    @apply opacity-disabled;\n  }\n  & .stepper-item-number {\n    @apply text-color-3;\n  }\n}\n\n.visually-hidden {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { Layout, Scale } from \"../interfaces\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  StepperItemChangeEventDetail,\n  StepperItemEventDetail,\n  StepperItemKeyEventDetail,\n} from \"../stepper/interfaces\";\nimport {\n  numberStringFormatter,\n  LocalizedComponent,\n  disconnectLocalized,\n  connectLocalized,\n  NumberingSystem,\n} from \"../../utils/locale\";\nimport {\n  setUpLoadableComponent,\n  setComponentLoaded,\n  LoadableComponent,\n  componentFocusable,\n} from \"../../utils/loadable\";\nimport { CSS } from \"./resources\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { StepperItemMessages } from \"./assets/stepper-item/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-stepper-item\",\n  styleUrl: \"stepper-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class StepperItem\n  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedHandler(): void {\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n  }\n\n  /** When `true`, the step has been completed. */\n  @Prop({ reflect: true }) complete = false;\n\n  /** When `true`, the component contains an error that requires resolution from the user. */\n  @Prop({ reflect: true }) error = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The component header text. */\n  @Prop() heading: string;\n\n  /** A description for the component. Displays below the header text. */\n  @Prop() description: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * @internal\n   */\n  @Prop() numberingSystem: NumberingSystem;\n\n  // watch for removal of disabled to register step\n  @Watch(\"disabled\")\n  disabledWatcher(): void {\n    this.registerStepperItem();\n  }\n\n  /**\n   * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() icon = false;\n\n  /**\n   * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\", Layout>;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: StepperItemMessages;\n\n  /**\n   * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.\n   *\n   * @internal\n   */\n  @Prop() numbered = false;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies if the user is viewing one `stepper-item` at a time.\n   * Helps in determining if header region is tabbable.\n   * @internal\n   */\n  @Prop({ reflect: true }) multipleViewMode = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<StepperItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Internal State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @State() defaultMessages: StepperItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleWatcher(locale: string): void {\n    numberStringFormatter.numberFormatOptions = {\n      locale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  headerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemKeyEvent: EventEmitter<StepperItemKeyEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemSelect: EventEmitter<StepperItemEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalUserRequestedStepperItemSelect: EventEmitter<StepperItemChangeEventDetail>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalStepperItemRegister: EventEmitter<StepperItemEventDetail>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    this.parentStepperEl = this.el.parentElement as HTMLCalciteStepperElement;\n    this.itemPosition = this.getItemPosition();\n    this.registerStepperItem();\n\n    if (this.selected) {\n      this.emitRequestedItem();\n    }\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  render(): VNode {\n    return (\n      <Host\n        aria-current={this.selected ? \"step\" : \"false\"}\n        onClick={this.handleItemClick}\n        onKeyDown={this.keyDownHandler}\n        tabIndex={this.disabled ? -1 : 0}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <div class={CSS.container}>\n            {this.complete && (\n              <span aria-live=\"polite\" class={CSS.visuallyHidden}>\n                {this.messages.complete}\n              </span>\n            )}\n            <div\n              class={CSS.stepperItemHeader}\n              tabIndex={\n                /* additional tab index logic needed because of display: contents */\n                this.layout === \"horizontal\" && !this.disabled && this.multipleViewMode ? 0 : null\n              }\n              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={(el) => (this.headerEl = el)}\n            >\n              {this.icon ? this.renderIcon() : null}\n              {this.numbered ? (\n                <div class={CSS.stepperItemNumber}>{this.renderNumbers()}.</div>\n              ) : null}\n              <div class={CSS.stepperItemHeaderText}>\n                <span class={CSS.stepperItemHeading}>{this.heading}</span>\n                <span class={CSS.stepperItemDescription}>{this.description}</span>\n              </div>\n            </div>\n            <div class={CSS.stepperItemContent}>\n              <slot />\n            </div>\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalStepperItemChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent<StepperItemChangeEventDetail>): void {\n    if (\n      event.target === this.parentStepperEl ||\n      event.composedPath().includes(this.parentStepperEl)\n    ) {\n      this.selectedPosition = event.detail.position;\n      this.determineSelectedItem();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    (this.layout === \"vertical\" ? this.el : this.headerEl)?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteStepperItemElement;\n\n  /** position within parent */\n  private itemPosition: number;\n\n  /** the latest requested item position*/\n  private selectedPosition: number;\n\n  /** the parent stepper component */\n  private parentStepperEl: HTMLCalciteStepperElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.emitUserRequestedItem();\n          event.preventDefault();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowDown\":\n        case \"ArrowLeft\":\n        case \"ArrowRight\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalStepperItemKeyEvent.emit({ item: event });\n          event.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private renderIcon(): VNode {\n    let path = \"circle\";\n\n    if (this.selected && (this.multipleViewMode || (!this.error && !this.complete))) {\n      path = \"circleF\";\n    } else if (this.error) {\n      path = \"exclamationMarkCircleF\";\n    } else if (this.complete) {\n      path = \"checkCircleF\";\n    }\n\n    return (\n      <calcite-icon class=\"stepper-item-icon\" flipRtl={this.iconFlipRtl} icon={path} scale=\"s\" />\n    );\n  }\n\n  private determineSelectedItem(): void {\n    this.selected = !this.disabled && this.itemPosition === this.selectedPosition;\n  }\n\n  private registerStepperItem(): void {\n    this.calciteInternalStepperItemRegister.emit({\n      position: this.itemPosition,\n    });\n  }\n\n  private handleItemClick = (event: MouseEvent): void => {\n    if (\n      this.disabled ||\n      (this.layout === \"horizontal\" &&\n        event\n          .composedPath()\n          .some((el) => (el as HTMLElement).classList?.contains(\"stepper-item-content\")))\n    ) {\n      return;\n    }\n\n    this.emitUserRequestedItem();\n  };\n\n  private emitUserRequestedItem = (): void => {\n    this.emitRequestedItem();\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalUserRequestedStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private emitRequestedItem = (): void => {\n    if (!this.disabled) {\n      const position = this.itemPosition;\n\n      this.calciteInternalStepperItemSelect.emit({\n        position,\n      });\n    }\n  };\n\n  private getItemPosition(): number {\n    return Array.from(this.parentStepperEl?.querySelectorAll(\"calcite-stepper-item\")).indexOf(\n      this.el,\n    );\n  }\n\n  renderNumbers(): string {\n    numberStringFormatter.numberFormatOptions = {\n      locale: this.effectiveLocale,\n      numberingSystem: this.numberingSystem,\n      useGrouping: false,\n    };\n    return numberStringFormatter.numberFormatter.format(this.itemPosition + 1);\n  }\n}\n"],"version":3}

package/dist/cjs/calcite-switch.cjs.entry.js

@@ -1,25 +1,25 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.4.1-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f46fafb3.js');
-const dom = require('./dom-126a0394.js');
-const form = require('./form-d3e87808.js');
-const interactive = require('./interactive-f673262e.js');
-const key = require('./key-744435da.js');
-const label = require('./label-ee8c8ca9.js');
-const loadable = require('./loadable-c22eb606.js');
-require('./guid-1a028869.js');
-require('./resources-c1a9f7ab.js');
-require('./browser-ad107666.js');
-require('./component-b7748675.js');
+const index = require('./index-c618ac7e.js');
+const dom = require('./dom-4fe1e23f.js');
+const form = require('./form-5d559c27.js');
+const interactive = require('./interactive-a6fed224.js');
+const key = require('./key-43c0c6a9.js');
+const label = require('./label-6156647e.js');
+const loadable = require('./loadable-0768266a.js');
+require('./guid-664be242.js');
+require('./resources-0d92efa7.js');
+require('./browser-810846ec.js');
+require('./component-0d876643.js');
 
-const switchCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .container{block-size:0.75rem}:host([scale=s]) .track{block-size:0.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:0.5rem;inline-size:0.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:0.75rem;inline-size:0.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-2);vertical-align:top;outline-color:transparent}:host(:focus) .track{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-block-start:-1px;inset-inline:-1px auto}:host(:hover) .handle,:host(:focus) .handle{border-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]) .handle{border-color:var(--calcite-color-brand);inset-inline:auto -1px}:host([checked]:hover) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]:hover) .handle{border-color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const switchCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .container{block-size:0.75rem}:host([scale=s]) .track{block-size:0.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:0.5rem;inline-size:0.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:0.75rem;inline-size:0.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-2);vertical-align:top;outline-color:transparent}:host(:focus) .track{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-block-start:-1px;inset-inline:-1px auto}:host(:hover) .handle,:host(:focus) .handle{border-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]) .handle{border-color:var(--calcite-color-brand);inset-inline:auto -1px}:host([checked]:hover) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]:hover) .handle{border-color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Switch = class {
     constructor(hostRef) {

package/dist/cjs/calcite-switch.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-switch.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,s7FAAs7F;;MCwC37F,MAAM;;;;QAiFjB,mBAAc,GAAG,CAAC,KAAoB;YACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAIA,mBAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAChD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;SACF,CAAC;QAcM,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,MAAM,EAAE,CAAC;SACf,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAkB;YACvC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB,CAAC;wBApGkC,KAAK;;;;qBAqBD,GAAG;uBAGO,KAAK;;;;;;;;;IA+BvD,MAAM,QAAQ;QACZ,MAAMC,2BAAkB,CAAC,IAAI,CAAC,CAAC;QAE/BC,gBAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7B;;;;;;IAQD,mBAAmB,CAAC,KAAuB;QACzC,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;KACzB;IASD,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAEO,MAAM;QACZ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;KACjC;;;;;;IA+BD,iBAAiB;QACfC,8BAAkB,CAAC,IAAI,CAAC,CAAC;QACzBC,kBAAY,CAAC,IAAI,CAAC,CAAC;QACnBC,gBAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAED,iBAAiB;QACfC,+BAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;QAC5BC,qBAAe,CAAC,IAAI,CAAC,CAAC;QACtBC,mBAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQD,MAAM;QACJ,QACEC,QAACC,UAAI,IAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,IAC9DD,QAACE,gCAAoB,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3CF,iCACgBG,iBAAa,CAAC,IAAI,CAAC,OAAO,CAAC,gBAC7BC,kBAAY,CAAC,IAAI,CAAC,EAC9B,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC;;YAEX,GAAG,EAAE,IAAI,CAAC,WAAW,IAErBJ,iBAAK,KAAK,EAAC,OAAO,IAChBA,iBAAK,KAAK,EAAC,QAAQ,GAAG,CAClB,EACNA,QAACK,wBAAmB,IAAC,SAAS,EAAE,IAAI,GAAI,CACpC,CACe,CAClB,EACP;KACH;;;;;;;","names":["isActivationKey","componentFocusable","focusElement","connectInteractive","connectLabel","connectForm","setUpLoadableComponent","setComponentLoaded","disconnectInteractive","disconnectLabel","disconnectForm","updateHostInteraction","h","Host","InteractiveContainer","toAriaBoolean","getLabelText","HiddenFormInputSlot"],"sources":["src/components/switch/switch.scss?tag=calcite-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["// sizes\n:host([scale=\"s\"]) {\n  .container {\n    @apply h-3;\n  }\n  .track {\n    @apply h-3 w-6;\n  }\n  .handle {\n    @apply h-2 w-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  .container {\n    @apply h-4;\n  }\n  .track {\n    @apply h-4 w-8;\n  }\n  .handle {\n    @apply h-3 w-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .container {\n    @apply h-6;\n  }\n  .track {\n    @apply h-6 w-12;\n  }\n  .handle {\n    @apply h-5 w-5;\n  }\n}\n\n:host {\n  @apply relative\n    inline-block\n    w-auto\n    cursor-pointer\n    select-none\n    align-middle;\n  tap-highlight-color: transparent;\n}\n\n@include disabled();\n\n.container {\n  @apply outline-0;\n}\n\n.track {\n  @apply bg-foreground-2\n    border-color-2\n    pointer-events-none\n    relative\n    box-border\n    inline-block\n    rounded-full\n    border\n    border-solid\n    align-top\n    focus-base;\n}\n\n:host(:focus) .track {\n  @apply focus-outset;\n}\n\n.handle {\n  @apply bg-foreground-1\n    border-color-input\n    pointer-events-none\n    absolute\n    block\n    rounded-full\n    border-2\n    border-solid\n    transition-all\n    duration-150\n    ease-in-out;\n  inset-block-start: -1px;\n  inset-inline: -1px theme(\"inset.auto\");\n}\n\n:host(:hover),\n:host(:focus) {\n  .handle {\n    @apply border-color-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n\n:host([checked]) {\n  .track {\n    @apply bg-brand border-color-brand-hover;\n  }\n  .handle {\n    @apply border-color-brand;\n    inset-inline: theme(\"inset.auto\") -1px;\n  }\n}\n\n:host([checked]:hover) {\n  .track {\n    @apply bg-brand border-color-brand-hover;\n  }\n  .handle {\n    @apply border-color-brand-hover;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n  }\n}\n\n@media (forced-colors: active) {\n  :host([checked]) {\n    .track {\n      background-color: canvasText;\n    }\n  }\n}\n\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { focusElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n} from \"../../utils/form\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-switch\",\n  styleUrl: \"switch.scss\",\n  shadow: true,\n})\nexport class Switch\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSwitchElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  switchEl: HTMLDivElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Switch[\"checked\"];\n\n  defaultChecked: boolean;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    focusElement(this.switchEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  onLabelClick(): void {\n    if (!this.disabled) {\n      this.toggle();\n      this.setFocus();\n    }\n  }\n\n  private toggle(): void {\n    this.checked = !this.checked;\n    this.calciteSwitchChange.emit();\n  }\n\n  private clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  private setSwitchEl = (el: HTMLDivElement): void => {\n    this.switchEl = el;\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the `checked` value has changed.\n   */\n  @Event({ cancelable: false }) calciteSwitchChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class=\"container\"\n            role=\"switch\"\n            tabIndex={0}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.setSwitchEl}\n          >\n            <div class=\"track\">\n              <div class=\"handle\" />\n            </div>\n            <HiddenFormInputSlot component={this} />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-switch.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,w/FAAw/F;;MCwC7/F,MAAM;;;;QAiFjB,mBAAc,GAAG,CAAC,KAAoB;YACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAIA,mBAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAChD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;SACF,CAAC;QAcM,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,MAAM,EAAE,CAAC;SACf,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAkB;YACvC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB,CAAC;wBApGkC,KAAK;;;;qBAqBD,GAAG;uBAGO,KAAK;;;;;;;;;IA+BvD,MAAM,QAAQ;QACZ,MAAMC,2BAAkB,CAAC,IAAI,CAAC,CAAC;QAE/BC,gBAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7B;;;;;;IAQD,mBAAmB,CAAC,KAAuB;QACzC,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;KACzB;IASD,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAEO,MAAM;QACZ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;KACjC;;;;;;IA+BD,iBAAiB;QACfC,8BAAkB,CAAC,IAAI,CAAC,CAAC;QACzBC,kBAAY,CAAC,IAAI,CAAC,CAAC;QACnBC,gBAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAED,iBAAiB;QACfC,+BAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;QAC5BC,qBAAe,CAAC,IAAI,CAAC,CAAC;QACtBC,mBAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQD,MAAM;QACJ,QACEC,QAACC,UAAI,IAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,IAC9DD,QAACE,gCAAoB,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3CF,iCACgBG,iBAAa,CAAC,IAAI,CAAC,OAAO,CAAC,gBAC7BC,kBAAY,CAAC,IAAI,CAAC,EAC9B,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC;;YAEX,GAAG,EAAE,IAAI,CAAC,WAAW,IAErBJ,iBAAK,KAAK,EAAC,OAAO,IAChBA,iBAAK,KAAK,EAAC,QAAQ,GAAG,CAClB,EACNA,QAACK,wBAAmB,IAAC,SAAS,EAAE,IAAI,GAAI,CACpC,CACe,CAClB,EACP;KACH;;;;;;;","names":["isActivationKey","componentFocusable","focusElement","connectInteractive","connectLabel","connectForm","setUpLoadableComponent","setComponentLoaded","disconnectInteractive","disconnectLabel","disconnectForm","updateHostInteraction","h","Host","InteractiveContainer","toAriaBoolean","getLabelText","HiddenFormInputSlot"],"sources":["src/components/switch/switch.scss?tag=calcite-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["// sizes\n:host([scale=\"s\"]) {\n  .container {\n    @apply h-3;\n  }\n  .track {\n    @apply h-3 w-6;\n  }\n  .handle {\n    @apply h-2 w-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  .container {\n    @apply h-4;\n  }\n  .track {\n    @apply h-4 w-8;\n  }\n  .handle {\n    @apply h-3 w-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .container {\n    @apply h-6;\n  }\n  .track {\n    @apply h-6 w-12;\n  }\n  .handle {\n    @apply h-5 w-5;\n  }\n}\n\n:host {\n  @apply relative\n    inline-block\n    w-auto\n    cursor-pointer\n    select-none\n    align-middle;\n  tap-highlight-color: transparent;\n}\n\n@include disabled();\n\n.container {\n  @apply outline-0;\n}\n\n.track {\n  @apply bg-foreground-2\n    border-color-2\n    pointer-events-none\n    relative\n    box-border\n    inline-block\n    rounded-full\n    border\n    border-solid\n    align-top\n    focus-base;\n}\n\n:host(:focus) .track {\n  @apply focus-outset;\n}\n\n.handle {\n  @apply bg-foreground-1\n    border-color-input\n    pointer-events-none\n    absolute\n    block\n    rounded-full\n    border-2\n    border-solid\n    transition-all\n    duration-150\n    ease-in-out;\n  inset-block-start: -1px;\n  inset-inline: -1px theme(\"inset.auto\");\n}\n\n:host(:hover),\n:host(:focus) {\n  .handle {\n    @apply border-color-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n\n:host([checked]) {\n  .track {\n    @apply bg-brand border-color-brand-hover;\n  }\n  .handle {\n    @apply border-color-brand;\n    inset-inline: theme(\"inset.auto\") -1px;\n  }\n}\n\n:host([checked]:hover) {\n  .track {\n    @apply bg-brand border-color-brand-hover;\n  }\n  .handle {\n    @apply border-color-brand-hover;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n  }\n}\n\n@media (forced-colors: active) {\n  :host([checked]) {\n    .track {\n      background-color: canvasText;\n    }\n  }\n}\n\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { focusElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n} from \"../../utils/form\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-switch\",\n  styleUrl: \"switch.scss\",\n  shadow: true,\n})\nexport class Switch\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSwitchElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  switchEl: HTMLDivElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Switch[\"checked\"];\n\n  defaultChecked: boolean;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    focusElement(this.switchEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  onLabelClick(): void {\n    if (!this.disabled) {\n      this.toggle();\n      this.setFocus();\n    }\n  }\n\n  private toggle(): void {\n    this.checked = !this.checked;\n    this.calciteSwitchChange.emit();\n  }\n\n  private clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  private setSwitchEl = (el: HTMLDivElement): void => {\n    this.switchEl = el;\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the `checked` value has changed.\n   */\n  @Event({ cancelable: false }) calciteSwitchChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class=\"container\"\n            role=\"switch\"\n            tabIndex={0}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.setSwitchEl}\n          >\n            <div class=\"track\">\n              <div class=\"handle\" />\n            </div>\n            <HiddenFormInputSlot component={this} />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/calcite-tab_4.cjs.entry.js

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.4.1-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f46fafb3.js');
-const dom = require('./dom-126a0394.js');
-const guid = require('./guid-1a028869.js');
-const observers = require('./observers-a6a546ef.js');
-const interactive = require('./interactive-f673262e.js');
-const locale = require('./locale-30f42ef5.js');
-const t9n = require('./t9n-7132dfc3.js');
-const component = require('./component-b7748675.js');
-require('./resources-c1a9f7ab.js');
-require('./browser-ad107666.js');
-require('./key-744435da.js');
+const index = require('./index-c618ac7e.js');
+const dom = require('./dom-4fe1e23f.js');
+const guid = require('./guid-664be242.js');
+const observers = require('./observers-9b298fc6.js');
+const interactive = require('./interactive-a6fed224.js');
+const locale = require('./locale-ddc63606.js');
+const t9n = require('./t9n-94d6bc29.js');
+const component = require('./component-0d876643.js');
+require('./resources-0d92efa7.js');
+require('./browser-810846ec.js');
+require('./key-43c0c6a9.js');
 
 const CSS$2 = {
     container: "container",
@@ -362,7 +362,7 @@ const ICONS = {
     close: "x",
 };
 
-const tabTitleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;text-align:center;flex-basis:12rem}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{margin:auto}:host([layout=center][closable]) .content{padding-inline-start:32px}:host([layout=center][bordered][closable]) .scale-s .content{padding-inline-start:36px}:host([layout=center][bordered][closable]) .scale-m .content{padding-inline-start:40px}:host([layout=center][closable]) .scale-l .content{padding-inline-start:40px}:host([layout=center][closable][bordered]) .scale-s .content{padding-inline-start:52px}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([closed]){display:none}.container{outline-color:transparent}:host(:focus) .container{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);text-decoration-line:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.container{box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;border-block-end-width:2px;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}.content{display:flex;align-items:center;justify-content:center}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:0.5rem}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:0.5rem}.close-button{display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:calc(100% - 2px);background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:-1px}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-2)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:0.5rem}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0px -2px var(--calcite-color-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 2px 0 var(--calcite-color-foreground-1)}:host([bordered]:hover) .container,:host([bordered]:focus) .container,:host([bordered]:active) .container{position:relative}:host([bordered]:hover) .container{background-color:var(--calcite-color-transparent-hover)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:1px solid transparent;border-inline-end:1px solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline:0}:host([closable]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}:host([closable][position=bottom]) .container,:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-color-border-1);border-inline-end-color:var(--calcite-color-border-1)}:host([bordered]) .content{padding-inline:0.75rem}:host([bordered]) .scale-s .content{padding-inline:0.5rem}:host([bordered]) .scale-l .content{padding-inline:1rem}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
+const tabTitleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;text-align:center;flex-basis:12rem}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{margin:auto}:host([layout=center][closable]) .content{padding-inline-start:32px}:host([layout=center][bordered][closable]) .scale-s .content{padding-inline-start:36px}:host([layout=center][bordered][closable]) .scale-m .content{padding-inline-start:40px}:host([layout=center][closable]) .scale-l .content{padding-inline-start:40px}:host([layout=center][closable][bordered]) .scale-s .content{padding-inline-start:52px}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([closed]){display:none}.container{outline-color:transparent}:host(:focus) .container{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);text-decoration-line:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.container{box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;border-block-end-width:2px;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}.content{display:flex;align-items:center;justify-content:center}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:0.5rem}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:0.5rem}.close-button{display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:calc(100% - 2px);background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:-1px}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-2)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:0.5rem}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0px -2px var(--calcite-color-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 2px 0 var(--calcite-color-foreground-1)}:host([bordered]:hover) .container,:host([bordered]:focus) .container,:host([bordered]:active) .container{position:relative}:host([bordered]:hover) .container{background-color:var(--calcite-color-transparent-hover)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:1px solid transparent;border-inline-end:1px solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline:0}:host([closable]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}:host([closable][position=bottom]) .container,:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-color-border-1);border-inline-end-color:var(--calcite-color-border-1)}:host([bordered]) .content{padding-inline:0.75rem}:host([bordered]) .scale-s .content{padding-inline:0.5rem}:host([bordered]) .scale-l .content{padding-inline:1rem}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
 
 const TabTitle = class {
     constructor(hostRef) {