@xplor-education/core-stencil-components 2.0.0 → 3.0.0

package/dist/collection/components/xplor-date-picker/xplor-date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-date-picker.js","sourceRoot":"","sources":["../../../src/components/xplor-date-picker/xplor-date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOtG,MAAM,OAAO,eAAe;IAL5B;QAQE,yCAAyC;QAChB,UAAK,GAAW,EAAE,CAAC;QAEpC,UAAK,GAAW,EAAE,CAAC;QACnB,gBAAW,GAAW,aAAa,CAAC;QAE5C,wBAAwB;QAChB,SAAI,GAAqB,MAAM,CAAC;QAExC,mDAAmD;QAC3C,cAAS,GAAoB,OAAO,CAAC;QAE7C,4DAA4D;QACpD,YAAO,GAAqB,OAAO,CAAC;QAE5C,yFAAyF;QACjF,eAAU,GAA6B,OAAO,CAAC;QAE/C,QAAG,GAAW,EAAE,CAAC;QACjB,QAAG,GAAW,EAAE,CAAC;QACjB,aAAQ,GAAY,KAAK,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAC1B,cAAS,GAAY,KAAK,CAAC;QAC3B,kBAAa,GAAY,IAAI,CAAC;QAC9B,YAAO,GAAW,OAAO,CAAC;QAC1B,UAAK,GAAW,SAAS,CAAC;QAC1B,sBAAiB,GAAY,IAAI,CAAC;QAClC,UAAK,GAAW,EAAE,CAAC;QACnB,gBAAW,GAAqB,MAAM,CAAC;QACvC,aAAQ,GAAY,KAAK,CAAC;QAEzB,WAAM,GAAY,KAAK,CAAC;QACxB,cAAS,GAAW,EAAE,CAAC;QACvB,qBAAgB,GAAqB,QAAQ,CAAC;QAyG/C,mBAAc,GAAG,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC3C,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC9C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3B,0BAA0B;YAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACnD,IAAI,MAAM,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC;gBACzC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;gBACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;gBACnD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;iBAAM,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACtB,kCAAkC;gBAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC3C,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC;QAC/B,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,KAA0B,EAAE,EAAE;YAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC;YACzB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;gBAAE,OAAO;YAErC,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC1B,MAAM,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;gBACjC,IAAI,CAAC,EAAE,CAAC;oBACN,IAAI,SAAe,CAAC;oBACpB,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;wBAC7B,SAAS,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;oBAC7D,CAAC;yBAAM,CAAC;wBACN,SAAS,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;oBACzD,CAAC;oBACD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;oBACvC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;oBACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;oBACrD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACjC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;gBACjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;gBAChD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC5B,CAAC;YAED,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;YACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACzB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC3C,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;KAyFH;IApQC,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACzD,CAAC;IACH,CAAC;IAGD,mBAAmB,CAAC,KAAiB;QACnC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAc,CAAC;QACpC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAED,gDAAgD;IACxC,YAAY,CAAC,GAAW;QAC9B,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC;QACtB,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC;QACtC,OAAO,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC;IAEO,oBAAoB,CAAC,GAAW;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;QACpC,IAAI,CAAC,IAAI;YAAE,OAAO,GAAG,CAAC;QAEtB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC3F,CAAC;QAED,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;YACxB,KAAK,MAAM;gBACT,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAC5G,KAAK,KAAK;gBACR,OAAO,GAAG,CAAC;YACb,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAChH,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,IAAU;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAChC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3D,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACpD,OAAO,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;IACnC,CAAC;IAED,4CAA4C;IACpC,cAAc,CAAC,IAAY;QACjC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAC5B,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAE1B,iBAAiB;QACjB,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,yCAAyC,CAAC,CAAC;QAC5E,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,GAAG,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1C,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACzC,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;YACzC,IAAI,CAAC,CAAC,WAAW,EAAE,KAAK,IAAI,IAAI,CAAC,CAAC,QAAQ,EAAE,KAAK,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,KAAK,GAAG,EAAE,CAAC;gBAClF,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;QAED,iBAAiB;QACjB,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC;QAChE,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACxC,MAAM,GAAG,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACtC,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;YACzC,IAAI,CAAC,CAAC,WAAW,EAAE,KAAK,IAAI,IAAI,CAAC,CAAC,QAAQ,EAAE,KAAK,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,KAAK,GAAG,EAAE,CAAC;gBAClF,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;QAED,oCAAoC;QACpC,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,aAAa,CAAC,GAAW;QAC/B,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC;QACtB,IAAI,IAAI,CAAC,GAAG,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG;YAAE,OAAO,KAAK,CAAC;QAC7C,IAAI,IAAI,CAAC,GAAG,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG;YAAE,OAAO,KAAK,CAAC;QAC7C,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,sBAAsB;QAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC;QAC7C,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;QACpD,IAAI,CAAC,gBAAgB,GAAG,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC9D,CAAC;IA6ED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QAE9F,MAAM,YAAY,GAAG,CACnB,4DAAK,KAAK,EAAC,uBAAuB,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO;YAC7K,6DAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,GAAQ;YAC9D,6DAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAQ;YAC3C,6DAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,GAAQ;YACzC,6DAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAQ,CACxC,CACP,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE;oBACV,aAAa,EAAE,IAAI;oBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;oBACtC,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;oBAClC,mBAAmB,EAAE,IAAI,CAAC,MAAM;iBACjC;gBACE,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,oBAAoB;oBAC9B,IAAI,CAAC,KAAK;oBACV,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,uBAAuB,QAAS,CACxD,CACT;gBAEA,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CACzB,WAAK,KAAK,EAAC,2BAA2B,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe;oBAClE,YAAM,KAAK,EAAC,yBAAyB,IAClC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CACjE;oBACN,YAAY,CACT,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,oBAAoB;oBAC7B,aACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,OAAO,EAAE,GACxC;oBACF,WAAK,KAAK,EAAC,sBAAsB;wBAC9B,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CACnE,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,gBAAa,OAAO,aAErF,CACV;wBACD,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,uBAAuB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAa,eAAe,IAClI,YAAY,CACN,CACL,CACF,CACP;gBAEA,WAAW,IAAI,CACd,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,KAAK,CAAO,CACrE,CACP;gBAEA,IAAI,CAAC,MAAM,IAAI,CACd,4DAAK,KAAK,EAAE;wBACV,uBAAuB,EAAE,IAAI;wBAC7B,4BAA4B,EAAE,IAAI,CAAC,gBAAgB,KAAK,KAAK;qBAC9D;oBACC,iFACE,YAAY,EAAE,IAAI,CAAC,KAAK,EACxB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,cAAc,EAAE,IAAI,CAAC,kBAAkB,GACb,CACxB,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-date-picker',\n  styleUrl: 'xplor-date-picker.scss',\n  scoped: true,\n})\nexport class XplorDatePicker {\n  @Element() el: HTMLElement;\n\n  /** Selected date in YYYY-MM-DD format */\n  @Prop({ mutable: true }) value: string = '';\n\n  @Prop() label: string = '';\n  @Prop() placeholder: string = 'Select date';\n\n  /** 'date' or 'month' */\n  @Prop() type: 'date' | 'month' = 'date';\n\n  /** For month type: select start or end of month */\n  @Prop() monthType: 'start' | 'end' = 'start';\n\n  /** 'input' shows text input, 'text' shows clickable text */\n  @Prop() display: 'input' | 'text' = 'input';\n\n  /** Date display format: 'short' (DD/MM/YYYY), 'long' (1 Jan 2025), 'iso' (YYYY-MM-DD) */\n  @Prop() dateFormat: 'short' | 'long' | 'iso' = 'short';\n\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() readonly: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() clearable: boolean = false;\n  @Prop() closeOnSelect: boolean = true;\n  @Prop() bgColor: string = 'white';\n  @Prop() color: string = '#008480';\n  @Prop() startWeekOnSunday: boolean = true;\n  @Prop() error: string = '';\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n  @Prop() required: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() inputText: string = '';\n  @State() dropdownPosition: 'bottom' | 'top' = 'bottom';\n\n  @Event() dateChange: EventEmitter<string>;\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\n  @Event() xplorClear: EventEmitter<void>;\n\n  componentWillLoad() {\n    if (this.value) {\n      this.inputText = this.formatDateForDisplay(this.value);\n    }\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const target = event.target as Node;\n    if (!this.el.contains(target)) {\n      this.isOpen = false;\n    }\n  }\n\n  /** Parse YYYY-MM-DD safely without UTC shift */\n  private parseISODate(iso: string): Date | null {\n    if (!iso) return null;\n    const d = new Date(iso + 'T00:00:00');\n    return isNaN(d.getTime()) ? null : d;\n  }\n\n  private formatDateForDisplay(iso: string): string {\n    const date = this.parseISODate(iso);\n    if (!date) return iso;\n\n    if (this.type === 'month') {\n      return new Intl.DateTimeFormat('en-AU', { month: 'long', year: 'numeric' }).format(date);\n    }\n\n    switch (this.dateFormat) {\n      case 'long':\n        return new Intl.DateTimeFormat('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);\n      case 'iso':\n        return iso;\n      case 'short':\n      default:\n        return new Intl.DateTimeFormat('en-AU', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);\n    }\n  }\n\n  private toISO(date: Date): string {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${day}`;\n  }\n\n  /** Parse user-typed text into YYYY-MM-DD */\n  private parseInputText(text: string): string | null {\n    const trimmed = text.trim();\n    if (!trimmed) return null;\n\n    // Try DD/MM/YYYY\n    const slashMatch = trimmed.match(/^(\\d{1,2})[/\\-.](\\d{1,2})[/\\-.](\\d{4})$/);\n    if (slashMatch) {\n      const day = parseInt(slashMatch[1], 10);\n      const month = parseInt(slashMatch[2], 10);\n      const year = parseInt(slashMatch[3], 10);\n      const d = new Date(year, month - 1, day);\n      if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {\n        return this.toISO(d);\n      }\n    }\n\n    // Try YYYY-MM-DD\n    const isoMatch = trimmed.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);\n    if (isoMatch) {\n      const year = parseInt(isoMatch[1], 10);\n      const month = parseInt(isoMatch[2], 10);\n      const day = parseInt(isoMatch[3], 10);\n      const d = new Date(year, month - 1, day);\n      if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {\n        return this.toISO(d);\n      }\n    }\n\n    // Try natural string via Date.parse\n    const d = new Date(trimmed);\n    if (!isNaN(d.getTime())) {\n      return this.toISO(d);\n    }\n\n    return null;\n  }\n\n  private isDateInRange(iso: string): boolean {\n    if (!iso) return true;\n    if (this.min && iso < this.min) return false;\n    if (this.max && iso > this.max) return false;\n    return true;\n  }\n\n  private updateDropdownPosition() {\n    const rect = this.el.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    this.dropdownPosition = spaceBelow < 350 ? 'top' : 'bottom';\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled || this.readonly) return;\n    this.updateDropdownPosition();\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleInputFocus = (event: FocusEvent) => {\n    this.xplorFocus.emit(event);\n  };\n\n  private handleInputBlur = (event: FocusEvent) => {\n    this.xplorBlur.emit(event);\n    // Try to parse typed text\n    const parsed = this.parseInputText(this.inputText);\n    if (parsed && this.isDateInRange(parsed)) {\n      this.value = parsed;\n      this.inputText = this.formatDateForDisplay(parsed);\n      this.dateChange.emit(parsed);\n    } else if (this.value) {\n      // Revert to current value display\n      this.inputText = this.formatDateForDisplay(this.value);\n    } else {\n      this.inputText = '';\n    }\n  };\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputText = input.value;\n  };\n\n  private handleDateSelected = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    const iso = event.detail;\n    if (!this.isDateInRange(iso)) return;\n\n    if (this.type === 'month') {\n      const d = this.parseISODate(iso);\n      if (d) {\n        let finalDate: Date;\n        if (this.monthType === 'end') {\n          finalDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);\n        } else {\n          finalDate = new Date(d.getFullYear(), d.getMonth(), 1);\n        }\n        const finalIso = this.toISO(finalDate);\n        this.value = finalIso;\n        this.inputText = this.formatDateForDisplay(finalIso);\n        this.dateChange.emit(finalIso);\n      }\n    } else {\n      this.value = iso;\n      this.inputText = this.formatDateForDisplay(iso);\n      this.dateChange.emit(iso);\n    }\n\n    if (this.closeOnSelect) {\n      this.isOpen = false;\n    }\n  };\n\n  private handleClear = (event: Event) => {\n    event.stopPropagation();\n    this.value = '';\n    this.inputText = '';\n    this.dateChange.emit('');\n    this.xplorClear.emit();\n  };\n\n  private handleTextClick = () => {\n    if (this.disabled || this.readonly) return;\n    this.updateDropdownPosition();\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);\n\n    const calendarIcon = (\n      <svg class=\"date-picker__icon-svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n      </svg>\n    );\n\n    return (\n      <Host>\n        <div class={{\n          'date-picker': true,\n          'date-picker--disabled': this.disabled,\n          'date-picker--error': !!this.error,\n          'date-picker--open': this.isOpen,\n        }}>\n          {this.label && (\n            <label class=\"date-picker__label\">\n              {this.label}\n              {this.required && <span class=\"date-picker__required\">*</span>}\n            </label>\n          )}\n\n          {this.display === 'text' ? (\n            <div class=\"date-picker__text-display\" onClick={this.handleTextClick}>\n              <span class=\"date-picker__text-value\">\n                {this.value ? this.formatDateForDisplay(this.value) : this.placeholder}\n              </span>\n              {calendarIcon}\n            </div>\n          ) : (\n            <div class=\"date-picker__field\">\n              <input\n                type=\"text\"\n                class=\"date-picker__input\"\n                value={this.inputText}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                onFocus={this.handleInputFocus}\n                onBlur={this.handleInputBlur}\n                onInput={this.handleInputChange}\n                style={{ backgroundColor: this.bgColor }}\n              />\n              <div class=\"date-picker__actions\">\n                {this.clearable && this.value && !this.disabled && !this.readonly && (\n                  <button type=\"button\" class=\"date-picker__clear\" onClick={this.handleClear} aria-label=\"Clear\">\n                    ×\n                  </button>\n                )}\n                <button type=\"button\" class=\"date-picker__icon-btn\" onClick={this.toggleDropdown} disabled={this.disabled} aria-label=\"Open calendar\">\n                  {calendarIcon}\n                </button>\n              </div>\n            </div>\n          )}\n\n          {showDetails && (\n            <div class=\"date-picker__details\">\n              {this.error && <div class=\"date-picker__error-message\">{this.error}</div>}\n            </div>\n          )}\n\n          {this.isOpen && (\n            <div class={{\n              'date-picker__dropdown': true,\n              'date-picker__dropdown--top': this.dropdownPosition === 'top',\n            }}>\n              <xplor-inline-date-picker\n                selectedDate={this.value}\n                min={this.min}\n                max={this.max}\n                readonly={this.readonly}\n                color={this.color}\n                startWeekOnSunday={this.startWeekOnSunday}\n                onDateSelected={this.handleDateSelected}\n              ></xplor-inline-date-picker>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xplor-date-picker.js","sourceRoot":"","sources":["../../../src/components/xplor-date-picker/xplor-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nlet datePickerIdCounter = 0;\n\n@Component({\n  tag: 'xplor-date-picker',\n  styleUrl: 'xplor-date-picker.scss',\n  scoped: true,\n})\nexport class XplorDatePicker {\n  @Element() el: HTMLElement;\n\n  /** Selected date in YYYY-MM-DD format */\n  @Prop({ mutable: true }) value: string = '';\n\n  @Prop() label: string = '';\n  @Prop() placeholder: string = 'Select date';\n\n  /** 'date' or 'month' */\n  @Prop() type: 'date' | 'month' = 'date';\n\n  /** For month type: select start or end of month */\n  @Prop() monthType: 'start' | 'end' = 'start';\n\n  /** 'input' shows text input, 'text' shows clickable text */\n  @Prop() display: 'input' | 'text' = 'input';\n\n  /** Date display format: 'short' (DD/MM/YYYY), 'long' (1 Jan 2025), 'iso' (YYYY-MM-DD) */\n  @Prop() dateFormat: 'short' | 'long' | 'iso' = 'short';\n\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() readonly: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() clearable: boolean = false;\n  @Prop() closeOnSelect: boolean = true;\n  @Prop() bgColor: string = 'white';\n  @Prop() color: string = '#008480';\n  @Prop() startWeekOnSunday: boolean = true;\n  @Prop() error: string = '';\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n  @Prop() required: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() inputText: string = '';\n  @State() dropdownPosition: 'bottom' | 'top' = 'bottom';\n\n  private inputId = `xplor-date-picker-${++datePickerIdCounter}`;\n  private labelId = `${this.inputId}-label`;\n  private errorId = `${this.inputId}-error`;\n\n  @Event() dateChange: EventEmitter<string>;\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\n  @Event() xplorClear: EventEmitter<void>;\n\n  componentWillLoad() {\n    if (this.value) {\n      this.inputText = this.formatDateForDisplay(this.value);\n    }\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const target = event.target as Node;\n    if (!this.el.contains(target)) {\n      this.isOpen = false;\n    }\n  }\n\n  /** Parse YYYY-MM-DD safely without UTC shift */\n  private parseISODate(iso: string): Date | null {\n    if (!iso) return null;\n    const d = new Date(iso + 'T00:00:00');\n    return isNaN(d.getTime()) ? null : d;\n  }\n\n  private formatDateForDisplay(iso: string): string {\n    const date = this.parseISODate(iso);\n    if (!date) return iso;\n\n    if (this.type === 'month') {\n      return new Intl.DateTimeFormat('en-AU', { month: 'long', year: 'numeric' }).format(date);\n    }\n\n    switch (this.dateFormat) {\n      case 'long':\n        return new Intl.DateTimeFormat('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);\n      case 'iso':\n        return iso;\n      case 'short':\n      default:\n        return new Intl.DateTimeFormat('en-AU', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);\n    }\n  }\n\n  private toISO(date: Date): string {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${day}`;\n  }\n\n  /** Parse user-typed text into YYYY-MM-DD */\n  private parseInputText(text: string): string | null {\n    const trimmed = text.trim();\n    if (!trimmed) return null;\n\n    // Try DD/MM/YYYY\n    const slashMatch = trimmed.match(/^(\\d{1,2})[/\\-.](\\d{1,2})[/\\-.](\\d{4})$/);\n    if (slashMatch) {\n      const day = parseInt(slashMatch[1], 10);\n      const month = parseInt(slashMatch[2], 10);\n      const year = parseInt(slashMatch[3], 10);\n      const d = new Date(year, month - 1, day);\n      if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {\n        return this.toISO(d);\n      }\n    }\n\n    // Try YYYY-MM-DD\n    const isoMatch = trimmed.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);\n    if (isoMatch) {\n      const year = parseInt(isoMatch[1], 10);\n      const month = parseInt(isoMatch[2], 10);\n      const day = parseInt(isoMatch[3], 10);\n      const d = new Date(year, month - 1, day);\n      if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {\n        return this.toISO(d);\n      }\n    }\n\n    // Try natural string via Date.parse\n    const d = new Date(trimmed);\n    if (!isNaN(d.getTime())) {\n      return this.toISO(d);\n    }\n\n    return null;\n  }\n\n  private isDateInRange(iso: string): boolean {\n    if (!iso) return true;\n    if (this.min && iso < this.min) return false;\n    if (this.max && iso > this.max) return false;\n    return true;\n  }\n\n  private updateDropdownPosition() {\n    const rect = this.el.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    this.dropdownPosition = spaceBelow < 350 ? 'top' : 'bottom';\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled || this.readonly) return;\n    this.updateDropdownPosition();\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleInputFocus = (event: FocusEvent) => {\n    this.xplorFocus.emit(event);\n  };\n\n  private handleInputBlur = (event: FocusEvent) => {\n    this.xplorBlur.emit(event);\n    // Try to parse typed text\n    const parsed = this.parseInputText(this.inputText);\n    if (parsed && this.isDateInRange(parsed)) {\n      this.value = parsed;\n      this.inputText = this.formatDateForDisplay(parsed);\n      this.dateChange.emit(parsed);\n    } else if (this.value) {\n      // Revert to current value display\n      this.inputText = this.formatDateForDisplay(this.value);\n    } else {\n      this.inputText = '';\n    }\n  };\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputText = input.value;\n  };\n\n  private handleDateSelected = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    const iso = event.detail;\n    if (!this.isDateInRange(iso)) return;\n\n    if (this.type === 'month') {\n      const d = this.parseISODate(iso);\n      if (d) {\n        let finalDate: Date;\n        if (this.monthType === 'end') {\n          finalDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);\n        } else {\n          finalDate = new Date(d.getFullYear(), d.getMonth(), 1);\n        }\n        const finalIso = this.toISO(finalDate);\n        this.value = finalIso;\n        this.inputText = this.formatDateForDisplay(finalIso);\n        this.dateChange.emit(finalIso);\n      }\n    } else {\n      this.value = iso;\n      this.inputText = this.formatDateForDisplay(iso);\n      this.dateChange.emit(iso);\n    }\n\n    if (this.closeOnSelect) {\n      this.isOpen = false;\n    }\n  };\n\n  private handleClear = (event: Event) => {\n    event.stopPropagation();\n    this.value = '';\n    this.inputText = '';\n    this.dateChange.emit('');\n    this.xplorClear.emit();\n  };\n\n  private handleTextClick = () => {\n    if (this.disabled || this.readonly) return;\n    this.updateDropdownPosition();\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);\n\n    const calendarIcon = (\n      <svg class=\"date-picker__icon-svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n      </svg>\n    );\n\n    return (\n      <Host>\n        <div class={{\n          'date-picker': true,\n          'date-picker--disabled': this.disabled,\n          'date-picker--error': !!this.error,\n          'date-picker--open': this.isOpen,\n        }}>\n          {this.label && (\n            <label class=\"date-picker__label\" id={this.labelId} htmlFor={this.inputId}>\n              {this.label}\n              {this.required && <span class=\"date-picker__required\">*</span>}\n            </label>\n          )}\n\n          {this.display === 'text' ? (\n            <div\n              class=\"date-picker__text-display\"\n              onClick={this.handleTextClick}\n              aria-expanded={this.isOpen ? 'true' : 'false'}\n              aria-haspopup=\"dialog\"\n              role=\"button\"\n              tabIndex={0}\n            >\n              <span class=\"date-picker__text-value\">\n                {this.value ? this.formatDateForDisplay(this.value) : this.placeholder}\n              </span>\n              {calendarIcon}\n            </div>\n          ) : (\n            <div class=\"date-picker__field\">\n              <input\n                id={this.inputId}\n                type=\"text\"\n                class=\"date-picker__input\"\n                value={this.inputText}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                onFocus={this.handleInputFocus}\n                onBlur={this.handleInputBlur}\n                onInput={this.handleInputChange}\n                style={{ backgroundColor: this.bgColor }}\n                aria-expanded={this.isOpen ? 'true' : 'false'}\n                aria-haspopup=\"dialog\"\n                aria-describedby={this.error ? this.errorId : undefined}\n                aria-invalid={this.error ? 'true' : undefined}\n                aria-required={this.required ? 'true' : undefined}\n              />\n              <div class=\"date-picker__actions\">\n                {this.clearable && this.value && !this.disabled && !this.readonly && (\n                  <button type=\"button\" class=\"date-picker__clear\" onClick={this.handleClear} aria-label=\"Clear\">\n                    ×\n                  </button>\n                )}\n                <button type=\"button\" class=\"date-picker__icon-btn\" onClick={this.toggleDropdown} disabled={this.disabled} aria-label=\"Open calendar\">\n                  {calendarIcon}\n                </button>\n              </div>\n            </div>\n          )}\n\n          {showDetails && (\n            <div class=\"date-picker__details\">\n              {this.error && <div class=\"date-picker__error-message\" id={this.errorId}>{this.error}</div>}\n            </div>\n          )}\n\n          {this.isOpen && (\n            <div class={{\n              'date-picker__dropdown': true,\n              'date-picker__dropdown--top': this.dropdownPosition === 'top',\n            }}>\n              <xplor-inline-date-picker\n                selectedDate={this.value}\n                min={this.min}\n                max={this.max}\n                readonly={this.readonly}\n                color={this.color}\n                startWeekOnSunday={this.startWeekOnSunday}\n                onDateSelected={this.handleDateSelected}\n              ></xplor-inline-date-picker>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.css

@@ -1050,7 +1050,7 @@ ul.mdc-list li.mdc-list-item {
   display: block;
 }
 
-.drag-drop-wrapper {
+.drag-drop-zone {
   position: relative;
   padding-bottom: 2.5rem;
 }
@@ -1060,21 +1060,22 @@ ul.mdc-list li.mdc-list-item {
 }
 
 .drag-drop-card {
-  background-color: var(--color-secondary-50, #f3e5f5);
+  background-color: #f5f5f5;
   border-radius: 8px;
-  border: 3px dashed #e0e0e0;
-  min-height: 240px;
-  padding: 1rem 1.5rem 2.5rem;
+  border: 2px dashed var(--color-secondary);
+  min-height: 160px;
+  padding: 1rem 1.5rem 2rem;
   text-align: center;
   transition: all 0.2s ease;
   cursor: default;
 }
 .drag-drop-card:hover:not(.drag-drop-card--disabled) {
   border-color: var(--color-secondary);
+  background-color: #eeeeee;
 }
 .drag-drop-card--dragover {
-  border: 3px dashed var(--color-secondary);
-  background-color: var(--color-secondary-100, #e1bee7);
+  border: 2px dashed var(--color-secondary);
+  background-color: #eeeeee;
 }
 .drag-drop-card--disabled {
   opacity: 0.6;
@@ -1085,22 +1086,22 @@ ul.mdc-list li.mdc-list-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
-  padding: 0.5rem 0 0;
+  gap: 0.25rem;
+  padding: 0.25rem 0 0;
 }
 
 .drag-drop-card__icon {
   color: var(--color-secondary);
-  width: 68px;
-  height: 68px;
+  width: 40px;
+  height: 40px;
 }
 
 .drag-drop-card__title {
   color: #000000;
   font-family: Inter, sans-serif;
-  font-size: 24px;
+  font-size: 18px;
   font-weight: 700;
-  line-height: 32px;
+  line-height: 24px;
   letter-spacing: 0;
   margin: 0;
 }
@@ -1122,24 +1123,127 @@ ul.mdc-list li.mdc-list-item {
   transform: translateX(-50%);
 }
 
-.drag-drop-card__file-info {
-  margin-top: 1rem;
-  color: #616161;
+.file-info {
+  margin-top: 1.5rem;
+}
+
+.file-info__status {
   font-family: Inter, sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
-  padding: 0.25rem;
-  text-align: center;
+  color: #616161;
+  margin: 0 0 0.5rem 0;
+}
+
+.file-info__card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+}
+
+.file-info__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background-color: var(--color-secondary-50, #f3e5f5);
+  color: var(--color-secondary);
+}
+
+.file-info__details {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-info__name {
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: #000000;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-info__meta {
+  font-family: Inter, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: var(--color-secondary);
+  margin: 0.25rem 0 0 0;
+}
+
+.file-info__progress-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.file-info__progress-bar {
+  flex: 1;
+  height: 6px;
+  background-color: #eeeeee;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.file-info__progress-fill {
+  height: 100%;
+  background-color: var(--color-secondary);
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.file-info__progress-text {
+  font-family: Inter, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #757575;
+  flex-shrink: 0;
+  min-width: 32px;
+  text-align: right;
+}
+
+.file-info__remove {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background-color: #eeeeee;
+  color: #757575;
+  cursor: pointer;
+  padding: 0;
+  transition: background-color 0.2s ease;
+}
+.file-info__remove:hover {
+  background-color: #e0e0e0;
+  color: #424242;
 }
 
 @media (max-width: 768px) {
   .drag-drop-card {
-    min-height: 200px;
+    min-height: 140px;
   }
   .drag-drop-card__title {
-    font-size: 20px;
-    line-height: 28px;
+    font-size: 16px;
+    line-height: 22px;
   }
   .drag-drop-card__accepts,
   .drag-drop-card__divider {

package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js

@@ -13,11 +13,15 @@ export class XplorDragAndDropInput {
         /**
          * Instruction text displayed in the drop zone
          */
-        this.label = 'Drag and drop your file here';
+        this.label = 'Drag and drop your files here';
         /**
          * Browse button label text
          */
         this.browseLabel = 'Browse Files';
+        /**
+         * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.
+         */
+        this.progress = -1;
         this.dragover = false;
         this.currentFile = null;
         this.onDrop = (e) => {
@@ -73,6 +77,34 @@ export class XplorDragAndDropInput {
             }
             return accepts;
         };
+        this.formatFileSize = (bytes) => {
+            if (bytes === 0)
+                return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        };
+        this.formatDate = (timestamp) => {
+            const date = new Date(timestamp);
+            const day = date.getDate();
+            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+            const month = months[date.getMonth()];
+            const year = date.getFullYear();
+            const suffix = (day === 1 || day === 21 || day === 31) ? 'st'
+                : (day === 2 || day === 22) ? 'nd'
+                    : (day === 3 || day === 23) ? 'rd'
+                        : 'th';
+            const hours = date.getHours();
+            const minutes = date.getMinutes().toString().padStart(2, '0');
+            const seconds = date.getSeconds().toString().padStart(2, '0');
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            const displayHours = hours % 12 || 12;
+            return `${day}${suffix} ${month} ${year}, ${displayHours}:${minutes}:${seconds} ${ampm}`;
+        };
+        this.showProgress = () => {
+            return this.progress >= 0 && this.progress <= 100;
+        };
     }
     /**
      * Clears the currently selected file
@@ -85,11 +117,15 @@ export class XplorDragAndDropInput {
         this.fileClear.emit();
     }
     render() {
-        return (h(Host, { key: 'b72e4af7297041c85e4739d815a306ff911e7aa1' }, h("div", { key: '40ffa20b154c281bfc25b9b84ad4c2f0b8ed8ccb', class: "drag-drop-wrapper" }, h("div", { key: '32129f70d878d4d9521125038ea19deddfed91d4', class: {
+        const progressValue = Math.min(Math.max(this.progress, 0), 100);
+        const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;
+        return (h(Host, { key: '4ca1a26f1c043761a3bcafebf3ccdf57ec17467b' }, h("div", { key: '60c9f55d838820e2d9c087fbb652559944ecfc36', class: "drag-drop-zone" }, h("div", { key: 'f15e206b7f1e1741f5ee96681e000400e72d66b1', class: {
                 'drag-drop-card': true,
                 'drag-drop-card--dragover': this.dragover,
                 'drag-drop-card--disabled': this.disabled,
-            }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave }, h("div", { key: 'a85fdd90c7906f3aaaa7abc8d32242c8187962fe', class: "drag-drop-card__content" }, h("svg", { key: '6db73c93ac4466f211877acf4624e619e1a720f3', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "60", height: "60", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '498a203a5dd4bae94216812bbd0bb50e7754ab87', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), h("path", { key: 'eb67e96947f184dab5a6b85987ef7938993b5f33', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), h("h3", { key: 'e37febff26d168eee495b5bc7dd49346fdb1079f', class: "drag-drop-card__title" }, this.label), h("p", { key: '514955f0836288b51e45d1ddaefe5eb2361e6007', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel()), h("p", { key: 'd390f6dc61ba8d87a512ca216c46dc8faf6d76a8', class: "drag-drop-card__divider" }, "or"))), h("div", { key: '2127925fcb39ec6adea03f107ffe6faaee5a0c48', class: "drag-drop-card__action" }, h("xplor-button", { key: '0659fa9bcc6f363516aebc12f66329f1aee630ab', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog })), this.currentFile && (h("div", { key: 'f6a788d77dd8d6f725ee0c6fde06ee3dbbadd77b', class: "drag-drop-card__file-info" }, "File Selected: ", this.currentFile.name))), h("input", { key: 'c514f68ceea5a5c6fd51e9bbe2098d100c6a9870', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect })));
+            }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, h("div", { key: '49325fd7ff2d44a045eba593e2cb3708316a5be4', class: "drag-drop-card__content" }, h("svg", { key: '23b8f38df073266201a01ec78a45b1cac924a3e4', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'eb1c750d1657fd578cf15c9bc16d5d1885d703e8', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), h("path", { key: '04dc16407d2abd999fbef9cc02346d499644f0a7', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), h("h3", { key: '82c31b56cb5f17445748e0bfb8668caef4ceea59', class: "drag-drop-card__title" }, this.label), h("p", { key: '69f3cf01f58dc8f3e2e13782be2a0274f2925a0d', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel()), h("p", { key: '0a6221601983e61cb4a0afd4a5178377b59b4ce4', class: "drag-drop-card__divider" }, "or"))), h("div", { key: '164c31d1407d492e415a086ae97dc8081a32eccc', class: "drag-drop-card__action" }, h("xplor-button", { key: 'b47c05a246700472cebc32c551096ad17f12da77', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))), this.currentFile && (h("div", { key: '6e74d72d3545bc85f91a6d55865743bde26eba78', class: "file-info", "aria-live": "polite" }, this.showProgress() && (h("p", { key: '7884acf7b14ddcd052a11b53131e6fea03c0376d', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), h("div", { key: '980b31adfde06383bdbe9d03f868a9cf907c83f8', class: "file-info__card" }, h("div", { key: 'c9ed4fc96a229e748a461d788ed60a8b7c693f7c', class: "file-info__icon", "aria-hidden": "true" }, h("svg", { key: '1749fafd0495beacdbbf2f89b2cf62c2530101db', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '1b114d4b5b0f055534ba5f6a476d413600829c74', d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" }))), h("div", { key: '45608139178d2d821a6aeb39d75b1aa4117ca12a', class: "file-info__details" }, h("p", { key: '66df2443dd4dd310891e30f78ccd007df726afd3', class: "file-info__name" }, this.currentFile.name), h("p", { key: 'f8efc8b19987c88e7ff7de242b7ad3df4ff5962e', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
+            ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
+            : ''), this.showProgress() && (h("div", { key: 'eb384d34fcb7908a39bb3dd1520389f8bc35a8fd', class: "file-info__progress-row" }, h("div", { key: 'bbfb481fa86247c231db4c7505009d1a991c85d2', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, h("div", { key: '8b93dcc26a1497783c4ef832b75c202e639a04ff', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), h("span", { key: 'a429605ee278d74660a717bc04765ca21af60f64', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), h("button", { key: '5ede3c138b788270b45a053ccf2504a35a5037ed', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, h("svg", { key: '0a5c03471e01b7f59dadaff6c8ea08b746c8c4c2', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '29a950f57d7a7d9aa74262f64fc055d8230e4453', d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z" })))))), h("input", { key: '437111b2dbd80a8aaf1a2a4105bc8298431b2b95', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect, "aria-label": `${this.browseLabel} - ${this.label}`, tabindex: -1 })));
     }
     static get is() { return "xplor-drag-and-drop-input"; }
     static get encapsulation() { return "scoped"; }
@@ -163,7 +199,7 @@ export class XplorDragAndDropInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'Drag and drop your file here'"
+                "defaultValue": "'Drag and drop your files here'"
             },
             "browseLabel": {
                 "type": "string",
@@ -184,6 +220,45 @@ export class XplorDragAndDropInput {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'Browse Files'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "attribute": "aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the drop zone area"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "progress": {
+                "type": "number",
+                "attribute": "progress",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "-1"
             }
         };
     }

package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-drag-and-drop-input.js","sourceRoot":"","sources":["../../../src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Method } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\n\n@Component({\n  tag: 'xplor-drag-and-drop-input',\n  styleUrl: 'xplor-drag-and-drop-input.scss',\n  scoped: true,\n})\nexport class XplorDragAndDropInput {\n  /**\n   * Disable the file upload\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Accepted file types (e.g., 'image/png,.pdf')\n   */\n  @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n  /**\n   * Instruction text displayed in the drop zone\n   */\n  @Prop() label: string = 'Drag and drop your file here';\n\n  /**\n   * Browse button label text\n   */\n  @Prop() browseLabel: string = 'Browse Files';\n\n  @State() dragover: boolean = false;\n  @State() currentFile: File | null = null;\n\n  /**\n   * Emitted when a file is selected via drop or click\n   */\n  @Event() fileSelect: EventEmitter<File>;\n\n  /**\n   * Emitted when the current file is cleared\n   */\n  @Event() fileClear: EventEmitter<void>;\n\n  private fileInputEl: HTMLInputElement;\n\n  /**\n   * Clears the currently selected file\n   */\n  @Method()\n  async clearCurrentFile() {\n    this.currentFile = null;\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n    this.fileClear.emit();\n  }\n\n  private onDrop = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragover = false;\n\n    if (this.disabled) return;\n\n    const file = e.dataTransfer?.files?.[0];\n    if (file) {\n      this.currentFile = file;\n      this.fileSelect.emit(this.currentFile);\n    }\n  };\n\n  private onDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    if (!this.disabled) {\n      this.dragover = true;\n    }\n  };\n\n  private onDragEnter = (e: DragEvent) => {\n    e.preventDefault();\n    if (!this.disabled) {\n      this.dragover = true;\n    }\n  };\n\n  private onDragLeave = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragover = false;\n  };\n\n  private onFileSelect = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (file) {\n      this.currentFile = file;\n      this.fileSelect.emit(this.currentFile);\n    }\n    input.value = '';\n  };\n\n  private openFileDialog = () => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.fileInputEl?.click();\n  };\n\n  private getAcceptsLabel = () => {\n    const accepts = this.accepts?.trim();\n    if (!accepts || accepts === DEFAULT_ACCEPT_ALL) {\n      return '*';\n    }\n\n    return accepts;\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"drag-drop-wrapper\">\n          <div\n            class={{\n              'drag-drop-card': true,\n              'drag-drop-card--dragover': this.dragover,\n              'drag-drop-card--disabled': this.disabled,\n            }}\n            onDrop={this.onDrop}\n            onDragOver={this.onDragOver}\n            onDragEnter={this.onDragEnter}\n            onDragLeave={this.onDragLeave}\n          >\n            <div class=\"drag-drop-card__content\">\n              <svg\n                class=\"drag-drop-card__icon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"60\"\n                height=\"60\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n              >\n                <path\n                  d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z\"\n                  fill=\"currentColor\"\n                  opacity=\"0.3\"\n                />\n                <path\n                  d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n              <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n              <p class=\"drag-drop-card__divider\">or</p>\n            </div>\n          </div>\n\n          <div class=\"drag-drop-card__action\">\n            <xplor-button\n              text={this.browseLabel}\n              type={this.disabled ? 'disabled' : 'secondary'}\n              clickAction={this.openFileDialog}\n            ></xplor-button>\n          </div>\n\n          {this.currentFile && (\n            <div class=\"drag-drop-card__file-info\">\n              File Selected: {this.currentFile.name}\n            </div>\n          )}\n        </div>\n\n        <input\n          id=\"drag-drop-file-select\"\n          type=\"file\"\n          disabled={this.disabled}\n          accept={this.accepts}\n          class=\"drag-drop-input-hidden\"\n          ref={(el) => (this.fileInputEl = el)}\n          onChange={this.onFileSelect}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xplor-drag-and-drop-input.js","sourceRoot":"","sources":["../../../src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Method } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\n\n@Component({\n  tag: 'xplor-drag-and-drop-input',\n  styleUrl: 'xplor-drag-and-drop-input.scss',\n  scoped: true,\n})\nexport class XplorDragAndDropInput {\n  /**\n   * Disable the file upload\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Accepted file types (e.g., 'image/png,.pdf')\n   */\n  @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n  /**\n   * Instruction text displayed in the drop zone\n   */\n  @Prop() label: string = 'Drag and drop your files here';\n\n  /**\n   * Browse button label text\n   */\n  @Prop() browseLabel: string = 'Browse Files';\n\n  /**\n   * Accessible label for the drop zone area\n   */\n  @Prop() ariaLabel: string;\n\n  /**\n   * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.\n   */\n  @Prop() progress: number = -1;\n\n  @State() dragover: boolean = false;\n  @State() currentFile: File | null = null;\n\n  /**\n   * Emitted when a file is selected via drop or click\n   */\n  @Event() fileSelect: EventEmitter<File>;\n\n  /**\n   * Emitted when the current file is cleared\n   */\n  @Event() fileClear: EventEmitter<void>;\n\n  private fileInputEl: HTMLInputElement;\n\n  /**\n   * Clears the currently selected file\n   */\n  @Method()\n  async clearCurrentFile() {\n    this.currentFile = null;\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n    this.fileClear.emit();\n  }\n\n  private onDrop = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragover = false;\n\n    if (this.disabled) return;\n\n    const file = e.dataTransfer?.files?.[0];\n    if (file) {\n      this.currentFile = file;\n      this.fileSelect.emit(this.currentFile);\n    }\n  };\n\n  private onDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    if (!this.disabled) {\n      this.dragover = true;\n    }\n  };\n\n  private onDragEnter = (e: DragEvent) => {\n    e.preventDefault();\n    if (!this.disabled) {\n      this.dragover = true;\n    }\n  };\n\n  private onDragLeave = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragover = false;\n  };\n\n  private onFileSelect = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (file) {\n      this.currentFile = file;\n      this.fileSelect.emit(this.currentFile);\n    }\n    input.value = '';\n  };\n\n  private openFileDialog = () => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.fileInputEl?.click();\n  };\n\n  private getAcceptsLabel = () => {\n    const accepts = this.accepts?.trim();\n    if (!accepts || accepts === DEFAULT_ACCEPT_ALL) {\n      return '*';\n    }\n\n    return accepts;\n  };\n\n  private formatFileSize = (bytes: number): string => {\n    if (bytes === 0) return '0 Bytes';\n    const k = 1024;\n    const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n  };\n\n  private formatDate = (timestamp: number): string => {\n    const date = new Date(timestamp);\n    const day = date.getDate();\n    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n    const month = months[date.getMonth()];\n    const year = date.getFullYear();\n\n    const suffix = (day === 1 || day === 21 || day === 31) ? 'st'\n      : (day === 2 || day === 22) ? 'nd'\n      : (day === 3 || day === 23) ? 'rd'\n      : 'th';\n\n    const hours = date.getHours();\n    const minutes = date.getMinutes().toString().padStart(2, '0');\n    const seconds = date.getSeconds().toString().padStart(2, '0');\n    const ampm = hours >= 12 ? 'PM' : 'AM';\n    const displayHours = hours % 12 || 12;\n\n    return `${day}${suffix} ${month} ${year}, ${displayHours}:${minutes}:${seconds} ${ampm}`;\n  };\n\n  private showProgress = (): boolean => {\n    return this.progress >= 0 && this.progress <= 100;\n  };\n\n  render() {\n    const progressValue = Math.min(Math.max(this.progress, 0), 100);\n    const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;\n\n    return (\n      <Host>\n        <div class=\"drag-drop-zone\">\n          <div\n            class={{\n              'drag-drop-card': true,\n              'drag-drop-card--dragover': this.dragover,\n              'drag-drop-card--disabled': this.disabled,\n            }}\n            onDrop={this.onDrop}\n            onDragOver={this.onDragOver}\n            onDragEnter={this.onDragEnter}\n            onDragLeave={this.onDragLeave}\n            role=\"region\"\n            aria-label={dropZoneLabel}\n          >\n            <div class=\"drag-drop-card__content\">\n              <svg\n                class=\"drag-drop-card__icon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"40\"\n                height=\"40\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z\"\n                  fill=\"currentColor\"\n                  opacity=\"0.3\"\n                />\n                <path\n                  d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n              <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n              <p class=\"drag-drop-card__divider\">or</p>\n            </div>\n          </div>\n\n          <div class=\"drag-drop-card__action\">\n            <xplor-button\n              text={this.browseLabel}\n              type={this.disabled ? 'disabled' : 'secondary'}\n              clickAction={this.openFileDialog}\n              aria-label={this.browseLabel}\n            ></xplor-button>\n          </div>\n        </div>\n\n        {this.currentFile && (\n          <div class=\"file-info\" aria-live=\"polite\">\n            {this.showProgress() && (\n              <p class=\"file-info__status\">\n                Uploading {this.progress === 100 ? '1' : '0'} / 1\n              </p>\n            )}\n            <div class=\"file-info__card\">\n              <div class=\"file-info__icon\" aria-hidden=\"true\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path d=\"M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z\" />\n                </svg>\n              </div>\n              <div class=\"file-info__details\">\n                <p class=\"file-info__name\">{this.currentFile.name}</p>\n                <p class=\"file-info__meta\">\n                  {this.formatFileSize(this.currentFile.size)}\n                  {this.currentFile.lastModified\n                    ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`\n                    : ''}\n                </p>\n                {this.showProgress() && (\n                  <div class=\"file-info__progress-row\">\n                    <div\n                      class=\"file-info__progress-bar\"\n                      role=\"progressbar\"\n                      aria-valuenow={progressValue}\n                      aria-valuemin={0}\n                      aria-valuemax={100}\n                      aria-label={`Upload progress: ${Math.round(progressValue)}%`}\n                    >\n                      <div\n                        class=\"file-info__progress-fill\"\n                        style={{ width: `${progressValue}%` }}\n                      ></div>\n                    </div>\n                    <span class=\"file-info__progress-text\" aria-hidden=\"true\">{Math.round(this.progress)}%</span>\n                  </div>\n                )}\n              </div>\n              <button\n                class=\"file-info__remove\"\n                onClick={() => this.clearCurrentFile()}\n                aria-label={`Remove file ${this.currentFile.name}`}\n              >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z\" />\n                </svg>\n              </button>\n            </div>\n          </div>\n        )}\n\n        <input\n          id=\"drag-drop-file-select\"\n          type=\"file\"\n          disabled={this.disabled}\n          accept={this.accepts}\n          class=\"drag-drop-input-hidden\"\n          ref={(el) => (this.fileInputEl = el)}\n          onChange={this.onFileSelect}\n          aria-label={`${this.browseLabel} - ${this.label}`}\n          tabindex={-1}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-dropdown/xplor-dropdown.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class XplorDropdown {
     render() {
-        return (h(Host, { key: 'a4c0fd10eb0727179e89fd8d5065a679631c8df8' }, h("select", { key: '251713d910a1eda1bf6935c138b91e1a946afb6c', class: "xplor-dropdown", onChange: this.handleChange }, this.options.map((option) => (h("option", { value: option, selected: this.selected === option }, option))))));
+        return (h(Host, { key: 'bfd5bc76c18f4c7882ec47389978338eec81b1d1' }, h("select", { key: '54310c80fdda944ca6d9cc8faaf643e79d4a5f32', class: "xplor-dropdown", onChange: this.handleChange }, this.options.map((option) => (h("option", { value: option, selected: this.selected === option }, option))))));
     }
     static get is() { return "xplor-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xplor-expansion-panel/xplor-expansion-panel.js

@@ -26,16 +26,16 @@ export class XplorExpansionPanel {
         }
     }
     render() {
-        return (h(Host, { key: '0049148b013c93b1dc071a2ab339b600c9335d14' }, h("div", { key: '95ea285cf259218ecd924ca99ea60f8f82624802', class: {
+        return (h(Host, { key: 'f2b19e6a1ad6315341e0840e2c000a1123caa7e0' }, h("div", { key: '1cb9ca368efb2f9e16c64c3987546f3d16981a2b', class: {
                 'expansion-panel': true,
                 'expansion-panel--open': this.open,
                 'expansion-panel--disabled': this.disabled,
-            } }, h("button", { key: '6830f386af7ffbbcc126c3e048ea37ba774aea1c', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', type: "button" }, h("div", { key: '07214bcf411e7778d7dd0effb53dfb9d65604646', class: "expansion-panel__header-content" }, h("slot", { key: '351b3e28b5d57169f79aae1fec0df8721a4557e4', name: "header" })), h("span", { key: '041f8e499549325dd46fae89f7797576e43e047c', class: {
+            } }, h("button", { key: '5c2b82b2f13395137413e7f86160ac132c44b7ee', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.panelId}-content`, type: "button" }, h("div", { key: 'c1534981f842b0b7d75a6c8135a12fb6f209639c', class: "expansion-panel__header-content" }, h("slot", { key: '01c5a0a1dfacdf730ec82dc0a09916d159d1c016', name: "header" })), h("span", { key: 'f82ea607638e601be6b956f9ad5c6d31d6461ec6', class: {
                 'expansion-panel__icon': true,
                 'expansion-panel__icon--open': this.open,
-            } }, "\u25BC")), h("div", { key: 'c24a708cb5fb363d4e5e17e34604341872f9e4da', class: "expansion-panel__content", style: {
+            } }, "\u25BC")), h("div", { key: '385abb97450d912cda5fbd3bc5a5e48ea8ce8a0d', class: "expansion-panel__content", id: `${this.panelId}-content`, role: "region", "aria-labelledby": this.panelId, style: {
                 maxHeight: this.open ? `${this.contentHeight}px` : '0',
-            } }, h("div", { key: 'cace106961690c2f4e1312f273136b9342f7eaca', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: 'c29f780d6929b5f9687ea381cf332cfc945c8b5b' }))))));
+            } }, h("div", { key: '12c32ef07b6084b8528bf4800101afe0707adf05', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: 'a18755879b94fc09948ed8128d73cfb3b0639885' }))))));
     }
     static get is() { return "xplor-expansion-panel"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-expansion-panel/xplor-expansion-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-expansion-panel.js","sourceRoot":"","sources":["../../../src/components/xplor-expansion-panel/xplor-expansion-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAE9F,IAAI,MAAM,GAAG,CAAC,CAAC;AAOf,MAAM,OAAO,mBAAmB;IALhC;QAQY,aAAQ,GAAY,KAAK,CAAC;QACT,SAAI,GAAY,KAAK,CAAC;QAGtC,kBAAa,GAAW,CAAC,CAAC;QAoB3B,iBAAY,GAAG,GAAG,EAAE;YACxB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;YAEpE,6BAA6B;YAC7B,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC;QACpD,CAAC,CAAC;KAgDL;IAtEG,iBAAiB;QACb,IAAI,CAAC,OAAO,GAAG,SAAS,MAAM,EAAE,EAAE,CAAC;IACvC,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAEO,mBAAmB;QACvB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;QACrD,CAAC;IACL,CAAC;IAYD,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,iBAAiB,EAAE,IAAI;oBACvB,uBAAuB,EAAE,IAAI,CAAC,IAAI;oBAClC,2BAA2B,EAAE,IAAI,CAAC,QAAQ;iBAC7C;gBAED,+DACI,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC3C,IAAI,EAAC,QAAQ;oBAEb,4DAAK,KAAK,EAAC,iCAAiC;wBACxC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACpB;oBACN,6DACI,KAAK,EAAE;4BACH,uBAAuB,EAAE,IAAI;4BAC7B,6BAA6B,EAAE,IAAI,CAAC,IAAI;yBAC3C,aAGE,CACF;gBACT,4DACI,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE;wBACH,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC,GAAG;qBACzD;oBAED,4DACI,KAAK,EAAC,gCAAgC,EACtC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;wBAElC,8DAAQ,CACN,CACJ,CACJ,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n    tag: 'xplor-expansion-panel',\n    styleUrl: 'xplor-expansion-panel.scss',\n    scoped: true,\n})\nexport class XplorExpansionPanel {\n    @Element() el: HTMLElement;\n\n    @Prop() disabled: boolean = false;\n    @Prop({ mutable: true }) open: boolean = false;\n\n    @State() panelId: string;\n    @State() contentHeight: number = 0;\n\n    @Event() xplorPanelToggle: EventEmitter<{ id: string; isOpen: boolean }>;\n\n    private contentEl: HTMLDivElement;\n\n    componentWillLoad() {\n        this.panelId = `panel-${nextId++}`;\n    }\n\n    componentDidLoad() {\n        this.updateContentHeight();\n    }\n\n    private updateContentHeight() {\n        if (this.contentEl) {\n            this.contentHeight = this.contentEl.scrollHeight;\n        }\n    }\n\n    private handleToggle = () => {\n        if (this.disabled) return;\n\n        this.open = !this.open;\n        this.xplorPanelToggle.emit({ id: this.panelId, isOpen: this.open });\n\n        // Update height after toggle\n        setTimeout(() => this.updateContentHeight(), 0);\n    };\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'expansion-panel': true,\n                        'expansion-panel--open': this.open,\n                        'expansion-panel--disabled': this.disabled,\n                    }}\n                >\n                    <button\n                        class=\"expansion-panel__header\"\n                        onClick={this.handleToggle}\n                        disabled={this.disabled}\n                        aria-expanded={this.open ? 'true' : 'false'}\n                        type=\"button\"\n                    >\n                        <div class=\"expansion-panel__header-content\">\n                            <slot name=\"header\" />\n                        </div>\n                        <span\n                            class={{\n                                'expansion-panel__icon': true,\n                                'expansion-panel__icon--open': this.open,\n                            }}\n                        >\n                            ▼\n                        </span>\n                    </button>\n                    <div\n                        class=\"expansion-panel__content\"\n                        style={{\n                            maxHeight: this.open ? `${this.contentHeight}px` : '0',\n                        }}\n                    >\n                        <div\n                            class=\"expansion-panel__content-inner\"\n                            ref={(el) => (this.contentEl = el)}\n                        >\n                            <slot />\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"xplor-expansion-panel.js","sourceRoot":"","sources":["../../../src/components/xplor-expansion-panel/xplor-expansion-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAE9F,IAAI,MAAM,GAAG,CAAC,CAAC;AAOf,MAAM,OAAO,mBAAmB;IALhC;QAQY,aAAQ,GAAY,KAAK,CAAC;QACT,SAAI,GAAY,KAAK,CAAC;QAGtC,kBAAa,GAAW,CAAC,CAAC;QAoB3B,iBAAY,GAAG,GAAG,EAAE;YACxB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;YAEpE,6BAA6B;YAC7B,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC;QACpD,CAAC,CAAC;KAoDL;IA1EG,iBAAiB;QACb,IAAI,CAAC,OAAO,GAAG,SAAS,MAAM,EAAE,EAAE,CAAC;IACvC,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAEO,mBAAmB;QACvB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;QACrD,CAAC;IACL,CAAC;IAYD,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,iBAAiB,EAAE,IAAI;oBACvB,uBAAuB,EAAE,IAAI,CAAC,IAAI;oBAClC,2BAA2B,EAAE,IAAI,CAAC,QAAQ;iBAC7C;gBAED,+DACI,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC5B,GAAG,IAAI,CAAC,OAAO,UAAU,EACxC,IAAI,EAAC,QAAQ;oBAEb,4DAAK,KAAK,EAAC,iCAAiC;wBACxC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACpB;oBACN,6DACI,KAAK,EAAE;4BACH,uBAAuB,EAAE,IAAI;4BAC7B,6BAA6B,EAAE,IAAI,CAAC,IAAI;yBAC3C,aAGE,CACF;gBACT,4DACI,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,UAAU,EAC7B,IAAI,EAAC,QAAQ,qBACI,IAAI,CAAC,OAAO,EAC7B,KAAK,EAAE;wBACH,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC,GAAG;qBACzD;oBAED,4DACI,KAAK,EAAC,gCAAgC,EACtC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;wBAElC,8DAAQ,CACN,CACJ,CACJ,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n    tag: 'xplor-expansion-panel',\n    styleUrl: 'xplor-expansion-panel.scss',\n    scoped: true,\n})\nexport class XplorExpansionPanel {\n    @Element() el: HTMLElement;\n\n    @Prop() disabled: boolean = false;\n    @Prop({ mutable: true }) open: boolean = false;\n\n    @State() panelId: string;\n    @State() contentHeight: number = 0;\n\n    @Event() xplorPanelToggle: EventEmitter<{ id: string; isOpen: boolean }>;\n\n    private contentEl: HTMLDivElement;\n\n    componentWillLoad() {\n        this.panelId = `panel-${nextId++}`;\n    }\n\n    componentDidLoad() {\n        this.updateContentHeight();\n    }\n\n    private updateContentHeight() {\n        if (this.contentEl) {\n            this.contentHeight = this.contentEl.scrollHeight;\n        }\n    }\n\n    private handleToggle = () => {\n        if (this.disabled) return;\n\n        this.open = !this.open;\n        this.xplorPanelToggle.emit({ id: this.panelId, isOpen: this.open });\n\n        // Update height after toggle\n        setTimeout(() => this.updateContentHeight(), 0);\n    };\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'expansion-panel': true,\n                        'expansion-panel--open': this.open,\n                        'expansion-panel--disabled': this.disabled,\n                    }}\n                >\n                    <button\n                        class=\"expansion-panel__header\"\n                        onClick={this.handleToggle}\n                        disabled={this.disabled}\n                        aria-expanded={this.open ? 'true' : 'false'}\n                        aria-controls={`${this.panelId}-content`}\n                        type=\"button\"\n                    >\n                        <div class=\"expansion-panel__header-content\">\n                            <slot name=\"header\" />\n                        </div>\n                        <span\n                            class={{\n                                'expansion-panel__icon': true,\n                                'expansion-panel__icon--open': this.open,\n                            }}\n                        >\n                            ▼\n                        </span>\n                    </button>\n                    <div\n                        class=\"expansion-panel__content\"\n                        id={`${this.panelId}-content`}\n                        role=\"region\"\n                        aria-labelledby={this.panelId}\n                        style={{\n                            maxHeight: this.open ? `${this.contentHeight}px` : '0',\n                        }}\n                    >\n                        <div\n                            class=\"expansion-panel__content-inner\"\n                            ref={(el) => (this.contentEl = el)}\n                        >\n                            <slot />\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/xplor-expansion-panels/xplor-expansion-panels.js

@@ -33,7 +33,7 @@ export class XplorExpansionPanels {
         this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';
     }
     render() {
-        return (h(Host, { key: '84799902825dd3245333d6ae1e3c2016bfe4351c' }, h("div", { key: 'b43833c79be3f85cb941fd26a57f31efddc4b898', class: "expansion-panels" }, h("slot", { key: '56a99fa50bad4de4b1955ce7fd10db7eefa2b0fe' }))));
+        return (h(Host, { key: 'c55c8eef4f6f134c83f2f8dffcb434401596a095' }, h("div", { key: 'd29c006de658c679ce5cfa2a465b9e5756b8bba5', class: "expansion-panels", "aria-label": "Accordion" }, h("slot", { key: '32560ca5fa3b041e6e1f5f8011df9fef8f50cc6f' }))));
     }
     static get is() { return "xplor-expansion-panels"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-expansion-panels/xplor-expansion-panels.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-expansion-panels.js","sourceRoot":"","sources":["../../../src/components/xplor-expansion-panels/xplor-expansion-panels.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,oBAAoB;IALjC;QAM6B,UAAK,GAAsB,EAAE,CAAC;QAC/C,aAAQ,GAAY,KAAK,CAAC;QAC1B,cAAS,GAAY,IAAI,CAAC,CAAC,6DAA6D;QAEvF,eAAU,GAAgB,IAAI,GAAG,EAAE,CAAC;KAuChD;IArCG,iBAAiB;QACb,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5C,CAAC;IACL,CAAC;IAGD,iBAAiB,CAAC,KAAmD;QACjE,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAEpC,IAAI,MAAM,EAAE,CAAC;YACT,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChB,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC;YACxD,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACpC,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC3C,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAChC,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IACpG,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DAAK,KAAK,EAAC,kBAAkB;gBACzB,8DAAQ,CACN,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n    tag: 'xplor-expansion-panels',\n    styleUrl: 'xplor-expansion-panels.scss',\n    scoped: true,\n})\nexport class XplorExpansionPanels {\n    @Prop({ mutable: true }) value: string | string[] = [];\n    @Prop() multiple: boolean = false;\n    @Prop() accordion: boolean = true; // accordion mode (only one open at a time when not multiple)\n\n    @State() openPanels: Set<string> = new Set();\n\n    componentWillLoad() {\n        if (Array.isArray(this.value)) {\n            this.openPanels = new Set(this.value);\n        } else if (this.value) {\n            this.openPanels = new Set([this.value]);\n        }\n    }\n\n    @Listen('xplorPanelToggle')\n    handlePanelToggle(event: CustomEvent<{ id: string; isOpen: boolean }>) {\n        event.stopPropagation();\n        const { id, isOpen } = event.detail;\n\n        if (isOpen) {\n            if (this.multiple) {\n                this.openPanels = new Set([...this.openPanels, id]);\n            } else {\n                this.openPanels = new Set([id]);\n            }\n        } else {\n            const newPanels = new Set(this.openPanels);\n            newPanels.delete(id);\n            this.openPanels = newPanels;\n        }\n\n        this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"expansion-panels\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"xplor-expansion-panels.js","sourceRoot":"","sources":["../../../src/components/xplor-expansion-panels/xplor-expansion-panels.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,oBAAoB;IALjC;QAM6B,UAAK,GAAsB,EAAE,CAAC;QAC/C,aAAQ,GAAY,KAAK,CAAC;QAC1B,cAAS,GAAY,IAAI,CAAC,CAAC,6DAA6D;QAEvF,eAAU,GAAgB,IAAI,GAAG,EAAE,CAAC;KAuChD;IArCG,iBAAiB;QACb,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5C,CAAC;IACL,CAAC;IAGD,iBAAiB,CAAC,KAAmD;QACjE,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAEpC,IAAI,MAAM,EAAE,CAAC;YACT,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChB,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC;YACxD,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACpC,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC3C,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAChC,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IACpG,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DAAK,KAAK,EAAC,kBAAkB,gBAAY,WAAW;gBAChD,8DAAQ,CACN,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n    tag: 'xplor-expansion-panels',\n    styleUrl: 'xplor-expansion-panels.scss',\n    scoped: true,\n})\nexport class XplorExpansionPanels {\n    @Prop({ mutable: true }) value: string | string[] = [];\n    @Prop() multiple: boolean = false;\n    @Prop() accordion: boolean = true; // accordion mode (only one open at a time when not multiple)\n\n    @State() openPanels: Set<string> = new Set();\n\n    componentWillLoad() {\n        if (Array.isArray(this.value)) {\n            this.openPanels = new Set(this.value);\n        } else if (this.value) {\n            this.openPanels = new Set([this.value]);\n        }\n    }\n\n    @Listen('xplorPanelToggle')\n    handlePanelToggle(event: CustomEvent<{ id: string; isOpen: boolean }>) {\n        event.stopPropagation();\n        const { id, isOpen } = event.detail;\n\n        if (isOpen) {\n            if (this.multiple) {\n                this.openPanels = new Set([...this.openPanels, id]);\n            } else {\n                this.openPanels = new Set([id]);\n            }\n        } else {\n            const newPanels = new Set(this.openPanels);\n            newPanels.delete(id);\n            this.openPanels = newPanels;\n        }\n\n        this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"expansion-panels\" aria-label=\"Accordion\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"]}