@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/slider/lib/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["slider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AACxE,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAC;AAG5C,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAC,uBAAuB,EAAE,iBAAiB,EAAE,eAAe,EAAC,MAAM,qCAAqC,CAAC;AAGhH,kDAAkD;AAClD,iDAAiD;AAGjD;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IA8FpC;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACzC,CAAC;IACD,IAAI,IAAI,CAAC,IAAY;QACnB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAClC,CAAC;IAED;;;;OAIG;IACH,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC;IACtD,CAAC;IACD,IAAI,SAAS,CAAC,IAAY;QACxB,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC;IACzD,CAAC;IACD,IAAI,OAAO,CAAC,IAAY;QACtB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACtC,CAAC;IAED;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC;IAoCD;QACE,KAAK,EAAE,CAAC;QArKV;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE3D;;WAEG;QACuB,QAAG,GAAG,CAAC,CAAC;QAElC;;WAEG;QACuB,QAAG,GAAG,GAAG,CAAC;QA+CpC;;WAEG;QACuB,SAAI,GAAG,CAAC,CAAC;QAEnC;;WAEG;QACwB,cAAS,GAAG,KAAK,CAAC;QAE7C;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAE3C;;;;WAIG;QACwB,UAAK,GAAG,KAAK,CAAC;QA6DzC,gEAAgE;QAChE,gEAAgE;QAChE,uBAAuB;QACN,qBAAgB,GAAG,KAAK,CAAC;QACzB,mBAAc,GAAG,KAAK,CAAC;QAEvB,eAAU,GAAG,KAAK,CAAC;QACnB,uBAAkB,GAAG,KAAK,CAAC;QAK5C,oEAAoE;QAC5D,oBAAe,GAAG,CAAC,CAAC;QAE5B,0DAA0D;QAClD,wBAAmB,GAAG,KAAK,CAAC;QAInB,cAAS,GACrB,IAAmB,CAAC,wBAAyB,CAAC,eAAe,EAAE,CAAC;QAInE,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;gBACnD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;oBAC/C,OAAO;iBACR;gBACD,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACzC,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC;IAEkB,UAAU,CAAC,OAAuB;QACnD,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;YAC/C,IAAI,CAAC,UAAU,CAAC,CAAC;YACjB,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC;QACnC,MAAM,eAAe,GACjB,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACpE,IAAI,CAAC,cAAc,GAAG,eAAe,CAAC,CAAC;YACnC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;YAC3C,IAAI,CAAC,QAAQ,EAAE,aAAa,CAAC;QACjC,wEAAwE;QACxE,QAAQ;QACR,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE;YACjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;SACjE;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE;YACtD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;SAC7D;IACH,CAAC;IAEkB,MAAM,CAAC,OAA+B;QACvD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YAC5C,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACxD,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,MAAM,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;gBAC5B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;gBACrD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACjD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;aACnC;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;aACjD;SACF;QAED,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC;IAEkB,OAAO,CAAC,OAAuB;QAChD,yEAAyE;QACzE,0EAA0E;QAC1E,sEAAsE;QACtE,uDAAuD;QACvD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC;SACxD;QACD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,QAAS,CAAC,aAAa,CAAC;QACnD,kCAAkC;QAClC,sDAAsD;QACtD,oCAAoC;QACpC,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE;gBACjC,IAAI,CAAC,UAAW,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC;gBACpD,+BAA+B;gBAC/B,MAAM,CAAC,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC;gBACzC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;aAC7C;YACD,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;gBAC/B,IAAI,CAAC,QAAS,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,OAAO,CAAC;gBACtD,+BAA+B;gBAC/B,MAAM,CAAC,GAAG,IAAI,CAAC,QAAS,CAAC,aAAa,CAAC;gBACvC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;aACzC;SACF;aAAM;YACL,IAAI,CAAC,KAAK,KAAV,IAAI,CAAC,KAAK,GAAK,IAAI,CAAC,cAAc,EAAC;SACpC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;YACvD,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE;YACzD,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SAC3E;QACD,0CAA0C;QAC1C,sDAAsD;QACtD,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEkB,MAAM;QACvB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QAClD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9B,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;YAC5D,CAAC,CAAC;QACN,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QAC3E,MAAM,eAAe,GAAG;YACtB,wCAAwC;YACxC,yBAAyB,EAAE,MAAM,CAAC,aAAa,CAAC;YAChD,uBAAuB,EAAE,MAAM,CAAC,WAAW,CAAC;YAC5C,4BAA4B;YAC5B,qBAAqB,EAAE,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC;SAC5C,CAAC;QACF,MAAM,gBAAgB,GAAG,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC;QAE9C,uDAAuD;QACvD,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,IAAI,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzE,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;YAChE,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAEhC,MAAM,eAAe,GAAG;YACtB,KAAK,EAAE,IAAI;YACX,KAAK,EAAE,IAAI,CAAC,gBAAgB;YAC5B,KAAK,EAAE,UAAU;SAClB,CAAC;QAEF,MAAM,aAAa,GAAG;YACpB,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,IAAI,CAAC,cAAc;YAC1B,KAAK,EAAE,QAAQ;SAChB,CAAC;QAEF,MAAM,gBAAgB,GAAG;YACvB,KAAK,EAAE,IAAI;YACX,KAAK,EAAE,IAAI,CAAC,gBAAgB;YAC5B,KAAK,EAAE,UAAU;SAClB,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,IAAI,CAAC,cAAc;YAC1B,KAAK,EAAE,QAAQ;SAChB,CAAC;QAEF,MAAM,sBAAsB,GAAG;YAC7B,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,cAAc;SACpD,CAAC;QAEF,OAAO,IAAI,CAAA;;2BAEY,QAAQ,CAAC,gBAAgB,CAAC;gBACrC,QAAQ,CAAC,eAAe,CAAC;;UAE/B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;UACzD,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;UAC/B,IAAI,CAAC,WAAW,EAAE;;;0CAGc,QAAQ,CAAC,sBAAsB,CAAC;gBAC1D,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;gBAC3D,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;;;;aAIpC,CAAC;IACZ,CAAC;IAEO,WAAW;QACjB,MAAM,YAAY,GAAG,EAAC,WAAW,EAAE,IAAI,CAAC,SAAS,EAAC,CAAC;QACnD,OAAO,IAAI,CAAA,qBAAqB,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC;IACnE,CAAC;IAEO,WAAW,CAAC,KAAa;QAC/B,OAAO,IAAI,CAAA;kDACmC,KAAK;aAC1C,CAAC;IACZ,CAAC;IAEO,YAAY,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAC+B;QACtE,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC;QAC1D,MAAM,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,CAAC;QAChE,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACrC,OAAO,IAAI,CAAA,sBAAsB,QAAQ,CAAC;YACxC,CAAC,IAAI,CAAC,EAAE,IAAI;YACZ,KAAK;YACL,KAAK;YACL,aAAa;SACd,CAAC;;QAEE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;2BAC9B,IAAI;uBACR,IAAI,UAAU,IAAI,cACjC,IAAI,CAAC,QAAQ;WACV,CAAC;IACV,CAAC;IAEO,WAAW,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EACgC;QACtE,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACrC,wDAAwD;QACxD,iCAAiC;QACjC,IAAI,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC1C,MAAM,EAAC,KAAK,EAAE,cAAc,EAAE,YAAY,EAAC,GAAG,IAAI,CAAC;QACnD,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC;SAC7D;QACD,OAAO,IAAI,CAAA;eACA,QAAQ,CAAC;YAClB,KAAK;YACL,GAAG,EAAE,CAAC,KAAK;SACZ,CAAC;eACS,IAAI,CAAC,WAAW;qBACV,IAAI,CAAC,UAAU;mBACjB,IAAI,CAAC,QAAQ;sBACV,IAAI,CAAC,WAAW;qBACjB,IAAI,CAAC,UAAU;sBACd,IAAI,CAAC,WAAW;iBACrB,IAAI,CAAC,aAAa;eACpB,IAAI,CAAC,WAAW;eAChB,IAAI,CAAC,WAAW;gBACf,IAAI,CAAC,YAAY;WACtB,IAAI;kBACG,IAAI,CAAC,QAAQ;aAClB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;aAChB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;cACf,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;eAChB,MAAM,CAAC,KAAK,CAAC;kBACV,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;mBACZ,SAAS,IAAI,OAAO;uBAChB,KAAK,GAAG,CAAC;IAC9B,CAAC;IAEO,KAAK,CAAC,iBAAiB,CAC3B,MAA8B,EAAE,QAAiB;QACnD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QACD,sDAAsD;QACtD,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,kBAAkB,CAAC,IAAI,YAAY,CACxC,cAAc,EAAE,EAAC,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAC,CAAC,CAAC,CAAC;SAC1E;aAAM;YACL,QAAQ,CAAC,kBAAkB,CAAC,IAAI,YAAY,CACxC,cAAc,EAAE,EAAC,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAC,CAAC,CAAC,CAAC;SAC1E;IACH,CAAC;IAEO,WAAW,CAAC,CAAQ;QAC1B,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAA0B,CAAC,CAAC;IACjD,CAAC;IAEO,WAAW,CAAC,CAAQ;QAC1B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,MAAM,KAAK,GACP,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAW,CAAC;QACrE,IAAI,CAAC,MAAM,GAAG;YACZ,OAAO,EAAE,CAAC,CAAC,IAAI,KAAK,aAAa;YACjC,OAAO,EAAE,KAAK;YACd,MAAM;YACN,KAAK;YACL,MAAM,EAAE,IAAI,GAAG,CACX,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;SACrE,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;IAC1B,CAAC;IAEO,aAAa,CAAC,CAAgB;QACpC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IAEO,WAAW,CAAC,CAAgB;QAClC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACvB,CAAC;IAEO,UAAU,CAAC,CAAe;QAChC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACpB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,SAAS,CAAC;QACnC,MAAM,OAAO,GAAG,CAAC,CAAC,MAA0B,KAAK,IAAI,CAAC,UAAU,CAAC;QACjE,qEAAqE;QACrE,sCAAsC;QACtC,IAAI,CAAC,gBAAgB;YACjB,CAAC,IAAI,CAAC,QAAQ,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3D,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC9E,CAAC;IAEO,KAAK,CAAC,QAAQ,CAAC,CAAe;QACpC,MAAM,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;QACpD,+DAA+D;QAC/D,0BAA0B;QAC1B,MAAM,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACzC,IAAI,MAAM,KAAK,SAAS,EAAE;YACxB,gDAAgD;YAChD,iEAAiE;YACjE,MAAM,CAAC,KAAK,EAAE,CAAC;YACf,kEAAkE;YAClE,oCAAoC;YACpC,IAAI,OAAO,IAAI,MAAM,CAAC,aAAa,KAAK,MAAO,CAAC,GAAG,CAAC,MAAM,CAAE,EAAE;gBAC5D,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;aAC5D;SACF;QACD,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACvB,CAAC;IAED;;;;;;;;;;;;OAYG;IACK,UAAU,CAAC,CAAe;QAChC,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACxE,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACtE,CAAC;IAEO,WAAW,CAAC,CAAe;QACjC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC9B,CAAC;IAEO,WAAW,CAAC,KAAuB;QACzC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACtD,CAAC;IAEO,aAAa;QACnB,MAAM,EAAC,MAAM,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,MAAO,CAAC;QACrC,MAAM,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC;QAC3C,OAAO,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;YAC5C,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC;IAC9D,CAAC;IAED,yEAAyE;IACzE,gEAAgE;IAChE,wBAAwB;IAChB,eAAe;QACrB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAO,CAAC;QAC5B,MAAM,EAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAC,GAAG,MAAM,CAAC;QACvC,IAAI,MAAM,CAAC,OAAO,EAAE;YAClB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAC5D,IAAI,UAAU,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;gBACtC,MAAM,CAAC,OAAO,GAAG,KAAK,CAAC;gBACvB,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;gBACtB,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC;gBACtB,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC;aACvB;SACF;QACD,OAAO,MAAM,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,qEAAqE;IACrE,qBAAqB;IACb,UAAU;QAChB,MAAM,EAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAC,GAAG,IAAI,CAAC,MAAO,CAAC;QAC7C,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,KAAK,KAAK,CAAC,aAAa,CAAC;QAC7D,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC;QAC3C,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC;QACzC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,iEAAiE;IACzD,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YACzB,OAAO,KAAK,CAAC;SACd;QACD,MAAM,EAAC,MAAM,EAAE,KAAK,EAAC,GAAG,IAAI,CAAC,MAAO,CAAC;QACrC,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC;QAC3C,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,WAAW,CAAC,CAAa;QAC/B,yCAAyC;QACzC,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,OAAO;SACR;QACD,IAAI,eAAe,GAAG,KAAK,EAAE,UAAU,GAAG,KAAK,CAAC;QAChD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE;gBAC1B,eAAe,GAAG,IAAI,CAAC;gBACvB,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;aAChC;YACD,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;gBACtB,eAAe,GAAG,IAAI,CAAC;gBACvB,UAAU,GAAG,KAAK,CAAC;aACpB;SACF;QACD,MAAM,EAAC,MAAM,EAAC,GAAG,IAAI,CAAC,MAAO,CAAC;QAC9B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACzB,mCAAmC;QACnC,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC;YACjD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAS,CAAC,aAAa,CAAC;SAC9C;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAS,CAAC,aAAa,CAAC;SAC3C;QACD,6CAA6C;QAC7C,IAAI,eAAe,EAAE;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;SACrB;QACD,6CAA6C;QAC7C,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAChC,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;SAClC;IACH,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,0DAA0D;QAC1D,sDAAsD;QACtD,MAAM,YAAY,GAAG,CAAC,CAAC,MAA0B,CAAC;QAClD,MAAM,EAAC,MAAM,EAAE,MAAM,EAAC,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;QAC3C,MAAM,OAAO,GACT,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,aAAa,KAAK,MAAO,CAAC,GAAG,CAAC,YAAY,CAAE,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,OAAO,EAAE;YACZ,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SAC1B;QACD,kDAAkD;QAClD,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACvB,CAAC;IAED,eAAe;IACf,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;YACpD,IAAI,CAAC,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YACvE,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;YAChD,IAAI,CAAC,QAAQ,GAAG,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YACjE,OAAO;SACR;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzC,IAAI,CAAC,KAAK,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1D,CAAC;IAED,eAAe;IACf,wBAAwB,CAAC,KAA0C;QACjE,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,MAAM,CAAC,CAAC,EAAE,UAAU,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,KAAK,CAAC;YAC7C,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;YACrC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,OAAO;SACR;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;;;AAjnBD;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,wBAAiB,GACZ,EAAC,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAC,CAAC;AAE7E,kBAAkB;AACX,qBAAc,GAAG,IAAI,CAAC;AAKa;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAkB;AAKjC;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;mCAAS;AAKR;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;mCAAW;AAKV;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;qCAAgB;AAKW;IAAnD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAC,CAAC;0CAAqB;AAKtB;IAAjD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAC,CAAC;wCAAmB;AAMxD;IAAX,QAAQ,EAAE;0CAAqB;AAMpB;IAAX,QAAQ,EAAE;+CAA0B;AAMzB;IAAX,QAAQ,EAAE;6CAAwB;AAMQ;IAA1C,QAAQ,CAAC,EAAC,SAAS,EAAE,kBAAkB,EAAC,CAAC;8CAAyB;AAM1B;IAAxC,QAAQ,CAAC,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC;4CAAuB;AAKrC;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oCAAU;AAKR;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;yCAAmB;AAKlB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;uCAAiB;AAOhB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;qCAAe;AAkDnB;IAArB,KAAK,CAAC,aAAa,CAAC;0CAAqD;AAClD;IAAvB,KAAK,CAAC,eAAe,CAAC;2CAAoD;AAE3E;IADC,UAAU,CAAC,iBAAiB,CAAC;2CACwB;AAElC;IAAnB,KAAK,CAAC,WAAW,CAAC;wCAAmD;AAChD;IAArB,KAAK,CAAC,aAAa,CAAC;yCAAkD;AAEvE;IADC,UAAU,CAAC,eAAe,CAAC;yCACwB;AAM3C;IAAR,KAAK,EAAE;gDAAkC;AACjC;IAAR,KAAK,EAAE;8CAAgC;AAE/B;IAAR,KAAK,EAAE;0CAA4B;AAC3B;IAAR,KAAK,EAAE;kDAAoC;AAEnC;IAAR,KAAK,EAAE;gDAAmC;AAClC;IAAR,KAAK,EAAE;8CAAiC;AAkd3C,SAAS,QAAQ,CAAC,EAAC,CAAC,EAAE,CAAC,EAAe,EAAE,OAA0B;IAChE,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IACD,MAAM,EAAC,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAC,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACnE,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,MAAM,CAAC;AAC5D,CAAC;AAED,SAAS,aAAa,CAAC,GAAiB,EAAE,GAAiB;IACzD,IAAI,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE;QACjB,OAAO,KAAK,CAAC;KACd;IACD,MAAM,CAAC,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;IACtC,MAAM,CAAC,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;IACtC,OAAO,CAAC,CACJ,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG;QACxD,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;AACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../internal/controller/events.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n// Disable warning for classMap with destructuring\n// tslint:disable:quoted-properties-on-dictionary\n\n\n/**\n * Slider component.\n */\nexport class Slider extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  /** @nocollapse */\n  static formAssociated = true;\n\n  /**\n   * Whether or not the slider is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The slider minimum value\n   */\n  @property({type: Number}) min = 0;\n\n  /**\n   * The slider maximum value\n   */\n  @property({type: Number}) max = 100;\n\n  /**\n   * The slider value displayed when range is false.\n   */\n  @property({type: Number}) value?: number;\n\n  /**\n   * The slider start value displayed when range is true.\n   */\n  @property({type: Number, attribute: 'value-start'}) valueStart?: number;\n\n  /**\n   * The slider end value displayed when range is true.\n   */\n  @property({type: Number, attribute: 'value-end'}) valueEnd?: number;\n\n  /**\n   * An optional label for the slider's value displayed when range is\n   * false; if not set, the label is the value itself.\n   */\n  @property() valueLabel?: string;\n\n  /**\n   * An optional label for the slider's start value displayed when\n   * range is true; if not set, the label is the valueStart itself.\n   */\n  @property() valueStartLabel?: string;\n\n  /**\n   * An optional label for the slider's end value displayed when\n   * range is true; if not set, the label is the valueEnd itself.\n   */\n  @property() valueEndLabel?: string;\n\n  /**\n   * Aria label for the slider's start value displayed when\n   * range is true.\n   */\n  @property({attribute: 'aria-label-start'}) ariaLabelStart?: string;\n\n  /**\n   * Aria label for the slider's end value displayed when\n   * range is true.\n   */\n  @property({attribute: 'aria-label-end'}) ariaLabelEnd?: string;\n\n  /**\n   * The step between values.\n   */\n  @property({type: Number}) step = 1;\n\n  /**\n   * Whether or not to show tick marks.\n   */\n  @property({type: Boolean}) tickmarks = false;\n\n  /**\n   * Whether or not to show a value label when activated.\n   */\n  @property({type: Boolean}) labeled = false;\n\n  /**\n   * Whether or not to show a value range. When false, the slider displays\n   * a slideable handle for the value property; when true, it displays\n   * slideable handles for the valueStart and valueEnd properties.\n   */\n  @property({type: Boolean}) range = false;\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  /**\n   * The HTML name to use in form submission for a range slider's starting\n   * value. Use `name` instead if both the start and end values should use the\n   * same name.\n   */\n  get nameStart() {\n    return this.getAttribute('name-start') ?? this.name;\n  }\n  set nameStart(name: string) {\n    this.setAttribute('name-start', name);\n  }\n\n  /**\n   * The HTML name to use in form submission for a range slider's ending value.\n   * Use `name` instead if both the start and end values should use the same\n   * name.\n   */\n  get nameEnd() {\n    return this.getAttribute('name-end') ?? this.nameStart;\n  }\n  set nameEnd(name: string) {\n    this.setAttribute('name-end', name);\n  }\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this.internals.form;\n  }\n\n  /**\n   * The labels this element is associated with.\n   */\n  get labels() {\n    return this.internals.labels;\n  }\n\n  @query('input.start') private readonly inputStart!: HTMLInputElement|null;\n  @query('.handle.start') private readonly handleStart!: HTMLDivElement|null;\n  @queryAsync('md-ripple.start')\n  private readonly rippleStart!: Promise<MdRipple|null>;\n\n  @query('input.end') private readonly inputEnd!: HTMLInputElement|null;\n  @query('.handle.end') private readonly handleEnd!: HTMLDivElement|null;\n  @queryAsync('md-ripple.end')\n  private readonly rippleEnd!: Promise<MdRipple|null>;\n\n\n  // handle hover/pressed states are set manually since the handle\n  // does not receive pointer events so that the native inputs are\n  // interaction targets.\n  @state() private handleStartHover = false;\n  @state() private handleEndHover = false;\n\n  @state() private startOnTop = false;\n  @state() private handlesOverlapping = false;\n\n  @state() private renderValueStart?: number;\n  @state() private renderValueEnd?: number;\n\n  // used in synthetic events generated to control ripple hover state.\n  private ripplePointerId = 1;\n\n  // flag to prvent processing of re-dispatched input event.\n  private isRedisptchingEvent = false;\n\n  private action?: Action;\n\n  private readonly internals =\n      (this as HTMLElement /* needed for closure */).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', (event: MouseEvent) => {\n        if (!isActivationClick(event) || !this.inputEnd) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.inputEnd);\n      });\n    }\n  }\n\n  override focus() {\n    this.inputEnd?.focus();\n  }\n\n  protected override willUpdate(changed: PropertyValues) {\n    this.renderValueStart = changed.has('valueStart') ?\n        this.valueStart :\n        this.inputStart?.valueAsNumber;\n    const endValueChanged =\n        (changed.has('valueEnd') && this.range) || changed.has('value');\n    this.renderValueEnd = endValueChanged ?\n        (this.range ? this.valueEnd : this.value) :\n        this.inputEnd?.valueAsNumber;\n    // manually handle ripple hover state since the handle is pointer events\n    // none.\n    if (changed.get('handleStartHover') !== undefined) {\n      this.toggleRippleHover(this.rippleStart, this.handleStartHover);\n    } else if (changed.get('handleEndHover') !== undefined) {\n      this.toggleRippleHover(this.rippleEnd, this.handleEndHover);\n    }\n  }\n\n  protected override update(changed: PropertyValues<Slider>) {\n    if (changed.has('value') || changed.has('range') ||\n        changed.has('valueStart') || changed.has('valueEnd')) {\n      if (this.range) {\n        const data = new FormData();\n        data.append(this.nameStart, String(this.valueStart));\n        data.append(this.nameEnd, String(this.valueEnd));\n        this.internals.setFormValue(data);\n      } else {\n        this.internals.setFormValue(String(this.value));\n      }\n    }\n\n    super.update(changed);\n  }\n\n  protected override updated(changed: PropertyValues) {\n    // Validate input rendered value and re-render if necessary. This ensures\n    // the rendred handle stays in sync with the input thumb which is used for\n    // interaction. These can get out of sync if a supplied value does not\n    // map to an exactly stepped value between min and max.\n    if (this.range) {\n      this.renderValueStart = this.inputStart!.valueAsNumber;\n    }\n    this.renderValueEnd = this.inputEnd!.valueAsNumber;\n    // update values if they are unset\n    // when using a range, default to equi-distant between\n    // min - valueStart - valueEnd - max\n    if (this.range) {\n      const segment = (this.max - this.min) / 3;\n      if (this.valueStart === undefined) {\n        this.inputStart!.valueAsNumber = this.min + segment;\n        // read actual value from input\n        const v = this.inputStart!.valueAsNumber;\n        this.valueStart = this.renderValueStart = v;\n      }\n      if (this.valueEnd === undefined) {\n        this.inputEnd!.valueAsNumber = this.min + 2 * segment;\n        // read actual value from input\n        const v = this.inputEnd!.valueAsNumber;\n        this.valueEnd = this.renderValueEnd = v;\n      }\n    } else {\n      this.value ??= this.renderValueEnd;\n    }\n    if (changed.has('range') || changed.has('renderValueStart') ||\n        changed.has('renderValueEnd') || this.isUpdatePending) {\n      this.handlesOverlapping = isOverlapping(this.handleStart, this.handleEnd);\n    }\n    // called to finish the update imediately;\n    // note, this is a no-op unless an update is scheduled\n    this.performUpdate();\n  }\n\n  protected override render() {\n    const step = this.step === 0 ? 1 : this.step;\n    const range = Math.max(this.max - this.min, step);\n    const startFraction = this.range ?\n        (((this.renderValueStart ?? this.min) - this.min) / range) :\n        0;\n    const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;\n    const containerStyles = {\n      // for clipping inputs and active track.\n      '--slider-start-fraction': String(startFraction),\n      '--slider-end-fraction': String(endFraction),\n      // for generating tick marks\n      '--slider-tick-count': String(range / step),\n    };\n    const containerClasses = {ranged: this.range};\n\n    // optional label values to show in place of the value.\n    const labelStart = this.valueStartLabel ?? String(this.renderValueStart);\n    const labelEnd = (this.range ? this.valueEndLabel : this.valueLabel) ??\n        String(this.renderValueEnd);\n\n    const inputStartProps = {\n      start: true,\n      value: this.renderValueStart,\n      label: labelStart\n    };\n\n    const inputEndProps = {\n      start: false,\n      value: this.renderValueEnd,\n      label: labelEnd\n    };\n\n    const handleStartProps = {\n      start: true,\n      hover: this.handleStartHover,\n      label: labelStart\n    };\n\n    const handleEndProps = {\n      start: false,\n      hover: this.handleEndHover,\n      label: labelEnd\n    };\n\n    const handleContainerClasses = {\n      hover: this.handleStartHover || this.handleEndHover\n    };\n\n    return html`\n      <div\n        class=\"container ${classMap(containerClasses)}\"\n        style=${styleMap(containerStyles)}\n      >\n        ${when(this.range, () => this.renderInput(inputStartProps))}\n        ${this.renderInput(inputEndProps)}\n        ${this.renderTrack()}\n        <div class=\"handleContainerPadded\">\n          <div class=\"handleContainerBlock\">\n            <div class=\"handleContainer ${classMap(handleContainerClasses)}\">\n              ${when(this.range, () => this.renderHandle(handleStartProps))}\n              ${this.renderHandle(handleEndProps)}\n            </div>\n          </div>\n        </div>\n      </div>`;\n  }\n\n  private renderTrack() {\n    const trackClasses = {'tickmarks': this.tickmarks};\n    return html`<div class=\"track ${classMap(trackClasses)}\"></div>`;\n  }\n\n  private renderLabel(value: string) {\n    return html`<div class=\"label\">\n        <span class=\"labelContent\" part=\"label\">${value}</span>\n      </div>`;\n  }\n\n  private renderHandle({start, hover, label}:\n                           {start: boolean, hover: boolean, label: string}) {\n    const onTop = !this.disabled && start === this.startOnTop;\n    const isOverlapping = !this.disabled && this.handlesOverlapping;\n    const name = start ? 'start' : 'end';\n    return html`<div class=\"handle ${classMap({\n      [name]: true,\n      hover,\n      onTop,\n      isOverlapping\n    })}\">\n      <div class=\"handleNub\"><md-elevation></md-elevation></div>\n      ${when(this.labeled, () => this.renderLabel(label))}\n      <md-focus-ring for=${name}></md-focus-ring>\n      <md-ripple for=${name} class=${name} ?disabled=${\n        this.disabled}></md-ripple>\n    </div>`;\n  }\n\n  private renderInput({start, value, label}:\n                          {start: boolean; value?: number; label: string;}) {\n    const name = start ? `start` : `end`;\n    // when ranged, ensure announcement includes value info.\n    // Needed for closure conformance\n    let {ariaLabel} = this as ARIAMixinStrict;\n    const {range, ariaLabelStart, ariaLabelEnd} = this;\n    if (range) {\n      ariaLabel = (start ? ariaLabelStart : ariaLabelEnd) ?? null;\n    }\n    return html`<input type=\"range\"\n      class=\"${classMap({\n      start,\n      end: !start\n    })}\"\n      @focus=${this.handleFocus}\n      @pointerdown=${this.handleDown}\n      @pointerup=${this.handleUp}\n      @pointerenter=${this.handleEnter}\n      @pointermove=${this.handleMove}\n      @pointerleave=${this.handleLeave}\n      @keydown=${this.handleKeydown}\n      @keyup=${this.handleKeyup}\n      @input=${this.handleInput}\n      @change=${this.handleChange}\n      id=${name}\n      .disabled=${this.disabled}\n      .min=${String(this.min)}\n      .max=${String(this.max)}\n      .step=${String(this.step)}\n      .value=${String(value)}\n      .tabIndex=${start ? 1 : 0}\n      aria-label=${ariaLabel || nothing}\n      aria-valuetext=${label}>`;\n  }\n\n  private async toggleRippleHover(\n      ripple: Promise<MdRipple|null>, hovering: boolean) {\n    const rippleEl = await ripple;\n    if (!rippleEl) {\n      return;\n    }\n    // TODO(b/269799771): improve slider ripple connection\n    if (hovering) {\n      rippleEl.handlePointerenter(new PointerEvent(\n          'pointerenter', {isPrimary: true, pointerId: this.ripplePointerId}));\n    } else {\n      rippleEl.handlePointerleave(new PointerEvent(\n          'pointerleave', {isPrimary: true, pointerId: this.ripplePointerId}));\n    }\n  }\n\n  private handleFocus(e: Event) {\n    this.updateOnTop(e.target as HTMLInputElement);\n  }\n\n  private startAction(e: Event) {\n    const target = e.target as HTMLInputElement;\n    const fixed =\n        (target === this.inputStart) ? this.inputEnd! : this.inputStart!;\n    this.action = {\n      canFlip: e.type === 'pointerdown',\n      flipped: false,\n      target,\n      fixed,\n      values: new Map(\n          [[target, target.valueAsNumber], [fixed, fixed?.valueAsNumber]])\n    };\n  }\n\n  private finishAction(e: Event) {\n    this.action = undefined;\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    this.startAction(e);\n  }\n\n  private handleKeyup(e: KeyboardEvent) {\n    this.finishAction(e);\n  }\n\n  private handleDown(e: PointerEvent) {\n    this.startAction(e);\n    this.ripplePointerId = e.pointerId;\n    const isStart = e.target as HTMLInputElement === this.inputStart;\n    // Since handle moves to pointer on down and there may not be a move,\n    // it needs to be considered hovered..\n    this.handleStartHover =\n        !this.disabled && isStart && Boolean(this.handleStart);\n    this.handleEndHover = !this.disabled && !isStart && Boolean(this.handleEnd);\n  }\n\n  private async handleUp(e: PointerEvent) {\n    const {target, values, flipped} = this.action ?? {};\n    //  Async here for Firefox because input can be after pointerup\n    //  when value is calmped.\n    await new Promise(requestAnimationFrame);\n    if (target !== undefined) {\n      // Ensure Safari focuses input so label renders.\n      // Ensure any flipped input is focused so the tab order is right.\n      target.focus();\n      // When action is flipped, change must be fired manually since the\n      // real event target did not change.\n      if (flipped && target.valueAsNumber !== values!.get(target)!) {\n        target.dispatchEvent(new Event('change', {bubbles: true}));\n      }\n    }\n    this.finishAction(e);\n  }\n\n  /**\n   * The move handler tracks handle hovering to facilitate proper ripple\n   * behavior on the slider handle. This is needed because user interaction with\n   * the native input is leveraged to position the handle. Because the separate\n   * displayed handle element has pointer events disabled (to allow interaction\n   * with the input) and the input's handle is a pseudo-element, neither can be\n   * the ripple's interactive element. Therefore the input is the ripple's\n   * interactive element and has a `ripple` directive; however the ripple\n   * is gated on the handle being hovered. In addition, because the ripple\n   * hover state is being specially handled, it must be triggered independent\n   * of the directive. This is done based on the hover state when the\n   * slider is updated.\n   */\n  private handleMove(e: PointerEvent) {\n    this.handleStartHover = !this.disabled && inBounds(e, this.handleStart);\n    this.handleEndHover = !this.disabled && inBounds(e, this.handleEnd);\n  }\n\n  private handleEnter(e: PointerEvent) {\n    this.handleMove(e);\n  }\n\n  private handleLeave() {\n    this.handleStartHover = false;\n    this.handleEndHover = false;\n  }\n\n  private updateOnTop(input: HTMLInputElement) {\n    this.startOnTop = input.classList.contains('start');\n  }\n\n  private needsClamping() {\n    const {target, fixed} = this.action!;\n    const isStart = target === this.inputStart;\n    return isStart ? target.valueAsNumber > fixed.valueAsNumber :\n                     target.valueAsNumber < fixed.valueAsNumber;\n  }\n\n  // if start/end start coincident and the first drag input would e.g. move\n  // start > end, avoid clamping and \"flip\" to use the other input\n  // as the action target.\n  private isActionFlipped() {\n    const action = this.action!;\n    const {target, fixed, values} = action;\n    if (action.canFlip) {\n      const coincident = values.get(target) === values.get(fixed);\n      if (coincident && this.needsClamping()) {\n        action.canFlip = false;\n        action.flipped = true;\n        action.target = fixed;\n        action.fixed = target;\n      }\n    }\n    return action.flipped;\n  }\n\n  // when flipped, apply the drag input to the flipped target and reset\n  // the actual target.\n  private flipAction() {\n    const {target, fixed, values} = this.action!;\n    const changed = target.valueAsNumber !== fixed.valueAsNumber;\n    target.valueAsNumber = fixed.valueAsNumber;\n    fixed.valueAsNumber = values.get(fixed)!;\n    return changed;\n  }\n\n  // clamp such that start does not move beyond end and visa versa.\n  private clampAction() {\n    if (!this.needsClamping()) {\n      return false;\n    }\n    const {target, fixed} = this.action!;\n    target.valueAsNumber = fixed.valueAsNumber;\n    return true;\n  }\n\n  private handleInput(e: InputEvent) {\n    // avoid processing a re-dispatched event\n    if (this.isRedisptchingEvent) {\n      return;\n    }\n    let stopPropagation = false, redispatch = false;\n    if (this.range) {\n      if (this.isActionFlipped()) {\n        stopPropagation = true;\n        redispatch = this.flipAction();\n      }\n      if (this.clampAction()) {\n        stopPropagation = true;\n        redispatch = false;\n      }\n    }\n    const {target} = this.action!;\n    this.updateOnTop(target);\n    // update value only on interaction\n    if (this.range) {\n      this.valueStart = this.inputStart!.valueAsNumber;\n      this.valueEnd = this.inputEnd!.valueAsNumber;\n    } else {\n      this.value = this.inputEnd!.valueAsNumber;\n    }\n    // control external visibility of input event\n    if (stopPropagation) {\n      e.stopPropagation();\n    }\n    // ensure event path is correct when flipped.\n    if (redispatch) {\n      this.isRedisptchingEvent = true;\n      redispatchEvent(target, e);\n      this.isRedisptchingEvent = false;\n    }\n  }\n\n  private handleChange(e: Event) {\n    // prevent keyboard triggered changes from dispatching for\n    // clamped values; note, this only occurs for keyboard\n    const changeTarget = e.target as HTMLInputElement;\n    const {target, values} = this.action ?? {};\n    const squelch =\n        (target && (target.valueAsNumber === values!.get(changeTarget)!));\n    if (!squelch) {\n      redispatchEvent(this, e);\n    }\n    // ensure keyboard triggered change clears action.\n    this.finishAction(e);\n  }\n\n  /** @private */\n  formResetCallback() {\n    if (this.range) {\n      const valueStart = this.getAttribute('value-start');\n      this.valueStart = valueStart !== null ? Number(valueStart) : undefined;\n      const valueEnd = this.getAttribute('value-end');\n      this.valueEnd = valueEnd !== null ? Number(valueEnd) : undefined;\n      return;\n    }\n    const value = this.getAttribute('value');\n    this.value = value !== null ? Number(value) : undefined;\n  }\n\n  /** @private */\n  formStateRestoreCallback(state: string|Array<[string, string]>|null) {\n    if (Array.isArray(state)) {\n      const [[, valueStart], [, valueEnd]] = state;\n      this.valueStart = Number(valueStart);\n      this.valueEnd = Number(valueEnd);\n      this.range = true;\n      return;\n    }\n\n    this.value = Number(state);\n    this.range = false;\n  }\n}\n\nfunction inBounds({x, y}: PointerEvent, element?: HTMLElement|null) {\n  if (!element) {\n    return false;\n  }\n  const {top, left, bottom, right} = element.getBoundingClientRect();\n  return x >= left && x <= right && y >= top && y <= bottom;\n}\n\nfunction isOverlapping(elA: Element|null, elB: Element|null) {\n  if (!(elA && elB)) {\n    return false;\n  }\n  const a = elA.getBoundingClientRect();\n  const b = elB.getBoundingClientRect();\n  return !(\n      a.top > b.bottom || a.right < b.left || a.bottom < b.top ||\n      a.left > b.right);\n}\n\ninterface Action {\n  canFlip: boolean;\n  flipped: boolean;\n  target: HTMLInputElement;\n  fixed: HTMLInputElement;\n  values: Map<HTMLInputElement|undefined, number|undefined>;\n}\n"]}

package/slider/slider.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Slider } from './lib/slider.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-slider': MdSlider;
+    }
+}
+/**
+ * @summary Sliders allow users to view and select a value (or range) along
+ * a track.
+ *
+ * @description
+ * Changes made with sliders are immediate, allowing the user to make slider
+ * adjustments while determining a selection. Sliders shouldn’t be used to
+ * adjust settings with any delay in providing user feedback. Sliders reflect
+ * the current state of the settings they control.
+ *
+ * __Example usages:__
+ * - Sliders are ideal for adjusting settings such as volume and brightness, or
+ * for applying image filters.
+ */
+export declare class MdSlider extends Slider {
+    static styles: import("lit").CSSResult[];
+}

package/slider/slider.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as forcedColorsStyles } from './lib/forced-colors-styles.css.js';
+import { Slider } from './lib/slider.js';
+import { styles } from './lib/slider-styles.css.js';
+/**
+ * @summary Sliders allow users to view and select a value (or range) along
+ * a track.
+ *
+ * @description
+ * Changes made with sliders are immediate, allowing the user to make slider
+ * adjustments while determining a selection. Sliders shouldn’t be used to
+ * adjust settings with any delay in providing user feedback. Sliders reflect
+ * the current state of the settings they control.
+ *
+ * __Example usages:__
+ * - Sliders are ideal for adjusting settings such as volume and brightness, or
+ * for applying image filters.
+ */
+let MdSlider = class MdSlider extends Slider {
+};
+MdSlider.styles = [styles, forcedColorsStyles];
+MdSlider = __decorate([
+    customElement('md-slider')
+], MdSlider);
+export { MdSlider };
+//# sourceMappingURL=slider.js.map

package/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["slider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAQlD;;;;;;;;;;;;;GAaG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAD3C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColorsStyles} from './lib/forced-colors-styles.css.js';\nimport {Slider} from './lib/slider.js';\nimport {styles} from './lib/slider-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-slider': MdSlider;\n  }\n}\n\n/**\n * @summary Sliders allow users to view and select a value (or range) along\n * a track.\n *\n * @description\n * Changes made with sliders are immediate, allowing the user to make slider\n * adjustments while determining a selection. Sliders shouldn’t be used to\n * adjust settings with any delay in providing user feedback. Sliders reflect\n * the current state of the settings they control.\n *\n * __Example usages:__\n * - Sliders are ideal for adjusting settings such as volume and brightness, or\n * for applying image filters.\n */\n@customElement('md-slider')\nexport class MdSlider extends Slider {\n  static override styles = [styles, forcedColorsStyles];\n}\n"]}

package/switch/harness.js

@@ -10,7 +10,7 @@ import { Harness } from '../testing/harness.js';
 export class SwitchHarness extends Harness {
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.renderRoot.querySelector('.md3-switch');
+        return this.element.renderRoot.querySelector('.switch');
     }
 }
 //# sourceMappingURL=harness.js.map

package/switch/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IAC7B,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAc,aAAa,CAAE,CAAC;IAC5E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Switch} from './lib/switch.js';\n\n/**\n * Test harness for switch elements.\n */\nexport class SwitchHarness extends Harness<Switch> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector<HTMLElement>('.md3-switch')!;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IAC7B,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAc,SAAS,CAAE,CAAC;IACxE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Switch} from './lib/switch.js';\n\n/**\n * Test harness for switch elements.\n */\nexport class SwitchHarness extends Harness<Switch> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector<HTMLElement>('.switch')!;\n  }\n}\n"]}

package/switch/lib/README.md

@@ -0,0 +1,55 @@
+# Switch
+
+## DOM structure
+
+```html
+<button class="switch">
+  <div class="track">
+    ::before
+    <div class="handle">
+      ::before
+      <div class="icons">
+      </div>
+    </div>
+  </div>
+  <input type="checkbox" aria-hidden="true">
+</button>
+```
+
+### .switch
+
+This is the outermost button. It holds the track and the input checkbox.
+
+NOTE: This is intentionally left without a border to make the focus-ring simpler
+to apply.
+
+### .track
+
+This is the track. It contains the track selected styles.
+
+### .track::before
+
+This element contains the track unselected styles. Its opacity is set to 0
+when the switch is selected.
+
+### .handle
+
+This is the handle. It contains the styles of selected styles.
+
+### .handle::before
+
+This element contains the handle unselected styles. Its opacity is set to 0
+when the switch is selected.
+
+
+## Animations
+
+*  opacity on .track::before
+   *  Why? setting opacity will change between selected and unselected track
+*  opacity on .handle::before
+   *  Why? setting opacity will change between selected and unselected handle
+*  transform (scale) on .handle
+   *  Why? This animates the growing & shrinking of the handle.
+*  margin-inline-start & margin-inline-end on .handle
+   *  Why? This animates the position of the handle.
+

package/switch/lib/_handle.scss

@@ -3,120 +3,157 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
 @use 'sass:map';
-
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../ripple/ripple';
+@use '../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+$_easing-standard: map.get($_md-sys-motion, 'easing-standard');
 
 @mixin styles() {
-  .md3-switch__handle-container {
-    display: flex;
-    $margin: calc(var(--_track-width) - var(--_track-height));
+  .handle-container {
+    display: grid;
+    place-items: center;
+    position: relative;
+    // this easing is custom to perform the "overshoot" animation
+    transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
 
-    .md3-switch--selected & {
-      margin-inline-start: $margin;
-    }
+  $margin: calc(var(--_track-width) - var(--_track-height));
 
-    .md3-switch--unselected & {
-      margin-inline-end: $margin;
-    }
+  .switch--selected .handle-container {
+    margin-inline-start: $margin;
   }
 
-  .md3-switch__handle {
+  .switch--unselected .handle-container {
+    margin-inline-end: $margin;
+  }
+
+  .switch:disabled .handle-container {
+    transition: none;
+  }
+
+  .handle {
     // Handle shape
     border-start-start-radius: var(--_handle-shape-start-start);
     border-start-end-radius: var(--_handle-shape-start-end);
     border-end-end-radius: var(--_handle-shape-end-end);
     border-end-start-radius: var(--_handle-shape-end-start);
-    height: var(--_handle-height);
-    width: var(--_handle-width);
+    height: var(--_unselected-handle-height);
+    width: var(--_unselected-handle-width);
+
+    transform-origin: center;
+    transition-property: height, width;
+    transition-duration: 250ms, 250ms;
+    transition-timing-function: $_easing-standard, $_easing-standard;
+    z-index: 0;
+  }
+
+  .handle::before {
+    content: '';
+    display: flex;
+    inset: 0;
+    position: absolute;
+    border-radius: inherit;
+    box-sizing: border-box;
+    transition: background-color 67ms linear;
+  }
+
+  .switch:disabled .handle,
+  .switch:disabled .handle::before {
+    transition: none;
+  }
+
+  .switch--selected .handle {
+    height: var(--_selected-handle-height);
+    width: var(--_selected-handle-width);
+  }
+
+  .handle.with-icon {
+    height: var(--_with-icon-handle-height);
+    width: var(--_with-icon-handle-width);
+  }
+
+  .switch--selected:enabled:active .handle,
+  .switch--unselected:enabled:active .handle {
+    height: var(--_pressed-handle-height);
+    width: var(--_pressed-handle-width);
+    transition-timing-function: linear;
+    transition-duration: 100ms;
+  }
+
+  .switch--selected .handle::before {
     background-color: var(--_selected-handle-color);
+  }
+
+  .switch--selected:hover .handle::before {
+    background-color: var(--_selected-hover-handle-color);
+  }
+
+  .switch--selected:focus-within .handle::before {
+    background-color: var(--_selected-focus-handle-color);
+  }
+
+  .switch--selected:active .handle::before {
+    background-color: var(--_selected-pressed-handle-color);
+  }
+
+  .switch--selected:disabled .handle::before {
+    background-color: var(--_disabled-selected-handle-color);
+    opacity: var(--_disabled-selected-handle-opacity);
+  }
+
+  .switch--unselected .handle::before {
+    background-color: var(--_unselected-handle-color);
+  }
 
-    // TODO(b/230484095): Use token instead of hard coded values
-    .md3-switch--selected &,
-    .md3-switch--unselected &.md3-switch__handle--big {
-      transform: scale(1.2);
-    }
-    .md3-switch--unselected & {
-      transform: scale(0.8);
-    }
-    .md3-switch--selected:enabled:active &,
-    .md3-switch--unselected:enabled:active & {
-      transform: scale(1.4);
-    }
-
-    .md3-switch--selected:hover & {
-      background-color: var(--_selected-hover-handle-color);
-    }
-
-    .md3-switch--selected:focus-visible & {
-      background-color: var(--_selected-focus-handle-color);
-    }
-
-    .md3-switch--selected:active & {
-      background-color: var(--_selected-pressed-handle-color);
-    }
-
-    .md3-switch--selected:disabled & {
-      background-color: var(--_disabled-selected-handle-color);
-    }
-
-    &::before {
-      background-color: var(--_unselected-handle-color);
-
-      .md3-switch--unselected:hover & {
-        background-color: var(--_unselected-hover-handle-color);
-      }
-
-      .md3-switch--unselected:focus-visible & {
-        background-color: var(--_unselected-focus-handle-color);
-      }
-
-      .md3-switch--unselected:active & {
-        background-color: var(--_unselected-pressed-handle-color);
-      }
-
-      .md3-switch--unselected:disabled & {
-        background-color: var(--_disabled-unselected-handle-color);
-      }
-    }
-  }
-
-  .md3-switch__ripple {
+  .switch--unselected:hover .handle::before {
+    background-color: var(--_unselected-hover-handle-color);
+  }
+
+  .switch--unselected:focus-within .handle::before {
+    background-color: var(--_unselected-focus-handle-color);
+  }
+
+  .switch--unselected:active .handle::before {
+    background-color: var(--_unselected-pressed-handle-color);
+  }
+
+  .switch--unselected:disabled .handle::before {
+    background-color: var(--_disabled-unselected-handle-color);
+    opacity: var(--_disabled-unselected-handle-opacity);
+  }
+
+  md-ripple {
+    border-radius: var(--_state-layer-shape);
     height: var(--_state-layer-size);
+    inset: unset;
     width: var(--_state-layer-size);
+  }
+
+  .switch--selected md-ripple {
+    @include ripple.theme(
+      (
+        'hover-color': var(--_selected-hover-state-layer-color),
+        'pressed-color': var(--_selected-pressed-state-layer-color),
+        'hover-opacity': var(--_selected-hover-state-layer-opacity),
+        'pressed-opacity': var(--_selected-pressed-state-layer-opacity),
+      )
+    );
+  }
 
-    .md3-switch--selected & {
-      @include ripple.theme(
-        (
-          hover-state-layer-color: var(--_selected-hover-state-layer-color),
-          focus-state-layer-color: var(--_selected-focus-state-layer-color),
-          pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-          hover-state-layer-opacity: var(--_selected-hover-state-layer-opacity),
-          focus-state-layer-opacity: var(--_selected-focus-state-layer-opacity),
-          pressed-state-layer-opacity:
-            var(--_selected-pressed-state-layer-opacity),
-        )
-      );
-    }
-
-    .md3-switch--unselected & {
-      @include ripple.theme(
-        (
-          hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-          focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-          pressed-state-layer-color:
-            var(--_unselected-pressed-state-layer-color),
-          hover-state-layer-opacity:
-            var(--_unselected-hover-state-layer-opacity),
-          focus-state-layer-opacity:
-            var(--_unselected-focus-state-layer-opacity),
-          pressed-state-layer-opacity:
-            var(--_unselected-pressed-state-layer-opacity),
-        )
-      );
-    }
+  .switch--unselected md-ripple {
+    @include ripple.theme(
+      (
+        'hover-color': var(--_unselected-hover-state-layer-color),
+        'pressed-color': var(--_unselected-pressed-state-layer-color),
+        'hover-opacity': var(--_unselected-hover-state-layer-opacity),
+        'pressed-opacity': var(--_unselected-pressed-state-layer-opacity),
+      )
+    );
   }
 }

package/switch/lib/_icon.scss

@@ -3,31 +3,90 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+$_easing-standard: map.get($_md-sys-motion, 'easing-standard');
 
 @mixin styles() {
-  .md3-switch__icon {
-    .md3-switch--selected & {
-      width: var(--_selected-icon-size);
-      height: var(--_selected-icon-size);
-      fill: var(--_selected-icon-color);
-    }
-
-    .md3-switch--unselected & {
-      width: var(--_unselected-icon-size);
-      height: var(--_unselected-icon-size);
-      fill: var(--_unselected-icon-color);
-    }
-
-    .md3-switch--selected:disabled & {
-      fill: var(--_disabled-selected-icon-color);
-    }
-
-    .md3-switch--unselected:disabled & {
-      fill: var(--_disabled-unselected-icon-color);
-    }
+  .icons {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  .icon {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+
+    transition: fill 67ms linear, opacity 33ms linear,
+      transform 167ms $_easing-standard;
+    opacity: 0;
+  }
+
+  .switch:disabled .icon {
+    transition: none;
+  }
+
+  .switch--selected .icon--on,
+  .switch--unselected .icon--off {
+    opacity: 1;
+  }
+
+  // rotate selected icon into view when there is no unselected icon
+  .switch--unselected .handle:not(.with-icon) .icon--on {
+    transform: rotate(-45deg);
+  }
+
+  .icon--off {
+    width: var(--_unselected-icon-size);
+    height: var(--_unselected-icon-size);
+    fill: var(--_unselected-icon-color);
+  }
+
+  .switch--unselected:hover .icon--off {
+    fill: var(--_unselected-hover-icon-color);
+  }
+
+  .switch--unselected:focus-within .icon--off {
+    fill: var(--_unselected-focus-icon-color);
+  }
+
+  .switch--unselected:active .icon--off {
+    fill: var(--_unselected-pressed-icon-color);
+  }
+
+  .switch--unselected:disabled .icon--off {
+    fill: var(--_disabled-unselected-icon-color);
+    opacity: var(--_disabled-unselected-icon-opacity);
+  }
+
+  .icon--on {
+    width: var(--_selected-icon-size);
+    height: var(--_selected-icon-size);
+    fill: var(--_selected-icon-color);
+  }
+
+  .switch--selected:hover .icon--on {
+    fill: var(--_selected-hover-icon-color);
+  }
+
+  .switch--selected:focus-within .icon--on {
+    fill: var(--_selected-focus-icon-color);
+  }
+
+  .switch--selected:active .icon--on {
+    fill: var(--_selected-pressed-icon-color);
+  }
+
+  .switch--selected:disabled .icon--on {
+    fill: var(--_disabled-selected-icon-color);
+    opacity: var(--_disabled-selected-icon-opacity);
   }
 }