@sellmate/design-system 0.0.55 → 1.0.0

package/dist/components/sd-number-input.js.map

@@ -1 +1 @@
-{"file":"sd-number-input.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,y+EAAy+E,CAAC;;MCiB7/EA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;;;;AAGjB,IAAA,GAAG,GAAW,MAAM,CAAC,iBAAiB;AACtC,IAAA,GAAG,GAAW,MAAM,CAAC,iBAAiB;IACtC,IAAI,GAAW,CAAC;IAChB,SAAS,GAAY,KAAK;IAC1B,UAAU,GAAY,KAAK;IAEV,KAAK,GAA4B,IAAI;AACtD,IAAA,KAAK;IACL,WAAW,GAAW,UAAU;IAChC,QAAQ,GAAY,KAAK;AACzB,IAAA,KAAK;AACL,IAAA,KAAK;IACL,SAAS,GAAY,KAAK;AAC1B,IAAA,MAAM;IACN,UAAU,GAAW,EAAE;IACvB,QAAQ,GAAY,KAAK;IACzB,UAAU,GAA8B,EAAE;IAEjC,aAAa,GAAkB,IAAI;IACnC,YAAY,GAAW,EAAE;IACzB,OAAO,GAAY,KAAK;IACxB,KAAK,GAAY,KAAK;IAE/B,QAAQ,GAAiC,SAAS;AAEjD,IAAA,WAAW;AACX,IAAA,WAAW;AACX,IAAA,OAAO;AACP,IAAA,QAAQ;AACR,IAAA,OAAO;AACP,IAAA,MAAM;AAEP,IAAA,gBAAgB,CAAC,KAAoB,EAAA;AAC5C,QAAA,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;AAAE,YAAA,OAAO,EAAE;AAEpD,QAAA,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC;QAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;AAEhC,QAAA,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC;QACzD,MAAM,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,cAAc,EAAE;AAE7C,QAAA,MAAM,MAAM,GAAG,UAAU,GAAG,GAAG,GAAG,SAAS,GAAG,SAAS;AACvD,QAAA,OAAO,OAAO,GAAG,MAAM,GAAG,GAAG,GAAG,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC;;AAGjD,IAAA,UAAU,CAAC,KAAa,EAAA;QAC/B,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE;AAAE,YAAA,OAAO,IAAI;AAE9C,QAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE;;QAG9C,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;AAC9C,YAAA,OAAO,IAAI;;AAGZ,QAAA,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;QAElC,IAAI,KAAK,CAAC,MAAM,CAAC;AAAE,YAAA,OAAO,IAAI;;AAG9B,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AAC9C,YAAA,OAAO,IAAI;;AAGZ,QAAA,OAAO,MAAM;;AAGN,IAAA,WAAW,CAAC,KAAa,EAAA;AAChC,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC;;IAG7C,aAAa,GAAA;QACpB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC;;IAGtD,mBAAmB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,IAAI;AAC/C,QAAA,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;AAChC,YAAA,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,GAAG;;AAEtC,QAAA,OAAO,KAAK;;IAGL,mBAAmB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,IAAI;AAC/C,QAAA,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;AAChC,YAAA,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,GAAG;;AAEtC,QAAA,OAAO,KAAK;;AAIb,IAAA,YAAY,CAAC,QAAgC,EAAA;QAC5C,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,EAAE,EAAE;AACzC,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;;aACnB;AACN,YAAA,MAAM,MAAM,GAAG,OAAO,QAAQ,KAAK,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,QAAQ;AAClF,YAAA,IAAI,MAAM,KAAK,IAAI,EAAE;gBACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;;;QAG/C,IAAI,CAAC,aAAa,EAAE;;AAIrB,IAAA,oBAAoB,CAAC,QAAuB,EAAA;QAC3C,IAAI,CAAC,aAAa,EAAE;AAEpB,QAAA,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE;AAC5B,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;AACrB,YAAA,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC;;QAG7B,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE;AAC5C,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;AAC9B,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;AAC7B,YAAA,IAAI,MAAM,KAAK,IAAI,EAAE;AACpB,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;gBACjB;;;;IAKH,iBAAiB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YACpD,MAAM,MAAM,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK;AACxF,YAAA,IAAI,MAAM,KAAK,IAAI,EAAE;gBACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;;;QAG/C,IAAI,CAAC,aAAa,EAAE;;AAGb,IAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACtC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK;AAE/B,QAAA,IAAI,UAAU,KAAK,EAAE,EAAE;AACtB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;AACzB,YAAA,IAAI,CAAC,YAAY,GAAG,EAAE;YACtB;;QAGD,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;;AAGlD,QAAA,MAAM,YAAY,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,MAAM;AAC9D,QAAA,IAAI,YAAY,GAAG,CAAC,EAAE;AACrB,YAAA,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;YAChC;;;AAID,QAAA,IAAI,aAAa,KAAK,GAAG,IAAI,aAAa,KAAK,GAAG,IAAI,aAAa,KAAK,IAAI,EAAE;AAC7E,YAAA,MAAM,CAAC,KAAK,GAAG,aAAa;YAC5B;;;QAID,IAAI,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,YAAY,KAAK,CAAC,EAAE;YACtD,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;AAC1C,YAAA,IAAI,MAAM,KAAK,IAAI,EAAE;gBACpB,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;AAC/C,gBAAA,MAAM,CAAC,KAAK,GAAG,SAAS,GAAG,GAAG;gBAC9B;;;QAIF,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;AAE7C,QAAA,IAAI,MAAM,KAAK,IAAI,EAAE;AACpB,YAAA,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE;AACtB,gBAAA,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;gBAChC;;AAGD,YAAA,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE;AACtB,gBAAA,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;gBAChC;;AAGD,YAAA,IAAI,CAAC,aAAa,GAAG,MAAM;YAE3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;AACjD,YAAA,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;;aAC1B;AACN,YAAA,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;;AAElC,KAAC;AAEO,IAAA,YAAY,GAAG,CAAC,KAAY,KAAI;AACvC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK;AAE/B,QAAA,IAAI,UAAU,KAAK,EAAE,EAAE;AACtB,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI;;aACnB;YACN,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;AAC1C,YAAA,IAAI,MAAM,KAAK,IAAI,EAAE;gBACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;;;QAI/C,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;AACxC,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACtC,QAAA,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;AAC1B,KAAC;AAEO,IAAA,UAAU,GAAG,CAAC,KAAY,KAAI;QACrC,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;;AAExC,QAAA,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;AACzB,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AAChD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;YAC5B,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,eAAe,EAAE;;AAChB,aAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YACrC,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,eAAe,EAAE;;AAExB,KAAC;IAEO,eAAe,GAAG,MAAK;QAC9B,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAAE;AAEhC,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;AACxD,QAAA,IAAI,OAAO,GAAG,UAAU,GAAG,IAAI,CAAC,IAAI;AAEpC,QAAA,IAAI,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE;AACvB,YAAA,OAAO,GAAG,IAAI,CAAC,GAAG;;QAGnB,IAAI,OAAO,KAAK,UAAU;YAAE;AAE5B,QAAA,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;AAEpE,QAAA,IAAI,CAAC,aAAa,GAAG,OAAO;AAC5B,QAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;AAC7B,KAAC;IAEO,eAAe,GAAG,MAAK;QAC9B,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAAE;AAEhC,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;AACxD,QAAA,IAAI,OAAO,GAAG,UAAU,GAAG,IAAI,CAAC,IAAI;AAEpC,QAAA,IAAI,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE;AACvB,YAAA,OAAO,GAAG,IAAI,CAAC,GAAG;;QAGnB,IAAI,OAAO,KAAK,UAAU;YAAE;AAE5B,QAAA,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;AAEpE,QAAA,IAAI,CAAC,aAAa,GAAG,OAAO;AAC5B,QAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;AAC7B,KAAC;AAGD,IAAA,MAAM,gBAAgB,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI;;IAG7B,cAAc,GAAA;QACb,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,2BAA2B;QACrD,IAAI,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,0BAA0B;QACnD,IAAI,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,CAAoB,iBAAA,EAAA,IAAI,CAAC,MAAM,EAAE;QACzD,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,wBAAwB;AAC/C,QAAA,OAAO,EAAE;;IAGV,MAAM,GAAA;AACL,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC;AACvB,cAAE;gBACD,eAAe,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,GAAG,IAAI,CAAC,KAAK,CAAI,EAAA,CAAA,GAAG,IAAI,CAAC,KAAK;AAChF;cACC,EAAE;AAEL,QAAA,MAAM,WAAW,GAAG;YACnB,SAAS,EAAE,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO;SAC9C;AAED,QAAA,QACC,CAAC,CAAA,IAAI,qDAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,EACzE,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,kBAAkB,EACnD,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,EACrE,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE;AACN,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI;gBAC7B,+BAA+B,EAAE,IAAI,CAAC,SAAS;AAC/C,aAAA,EACD,YAAY,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EACzC,YAAY,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,EAC1C,KAAK,EAAE,IAAI,CAAC,UAAU,EAAA,EAEtB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE,CAA0B,uBAAA,EAAA,IAAI,CAAC,UAAU,CAAA,CAAE,EAClD,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAE,WAAW,EACjB,CAAA,EAED,IAAI,CAAC,SAAS,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACpC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;AACN,gBAAA,yBAAyB,EAAE,IAAI;AAC/B,gBAAA,oCAAoC,EAAE,IAAI;AAC1C,aAAA,EACD,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,EAAE,EAAA,EAEZ,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,GAAG,SAAS,GAAG,SAAS,EAAA,CAAI,CACrF,EACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;AACN,gBAAA,yBAAyB,EAAE,IAAI;AAC/B,gBAAA,oCAAoC,EAAE,IAAI;aAC1C,EACD,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,EAAE,EAAA,EAEZ,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,KAAK,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,GAAG,SAAS,GAAG,SAAS,EAAI,CAAA,CACnF,CACJ,CACN,CACM,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdNumberInput","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-number-input/sd-number-input.scss?tag=sd-number-input","src/components/sd-number-input/sd-number-input.tsx"],"sourcesContent":["@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n\n.sd-number-input {\n box-sizing: border-box;\n display: flex;\n width: var(--input-width, 100%);\n align-items: center;\n height: 28px;\n padding: 4px 8px;\n border: 1px solid $grey_55;\n border-radius: 4px;\n color: $grey_90;\n font-size: 12px;\n line-height: 20px;\n background: white;\n position: relative;\n\n &--hovered {\n  border-color: $brilliantblue_75;\n  box-shadow: 0 0 4px 0 #0071ff66;\n }\n\n &.sd-number-input--error {\n  border-color: $red_70;\n }\n\n &.sd-number-input--pass {\n  border-color: $green_65;\n }\n\n &.sd-number-input--disabled {\n  background-color: $grey_20 !important;\n  border-color: $grey_45 !important;\n  cursor: not-allowed !important;\n  box-shadow: none !important;\n\n  .sd-number-input__input {\n   color: $grey_65 !important;\n   cursor: not-allowed !important;\n  }\n }\n\n .sd-number-input__input {\n  display: block;\n  width: 100%;\n  height: 20px;\n  line-height: 20px;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: inherit;\n  color: $grey_90;\n  margin-left: 4px;\n  margin-right: 4px;\n  padding-block: 0;\n  padding-inline: 0;\n  text-align: right;\n\n  &::placeholder {\n   font-size: 12px;\n   height: 20px;\n   line-height: 20px;\n   color: $grey_55;\n  }\n }\n\n .sd-number-input__clear-icon {\n  cursor: pointer;\n  margin-left: 8px;\n }\n\n .sd-number-input__buttons {\n  padding: 4px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n }\n\n .sd-number-input__button {\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: 2px;\n  background-color: $brilliantblue_10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin: 0;\n  transition: background-color 0.2s ease;\n\n  &:hover:not(:disabled) {\n   background-color: $brilliantblue_20;\n  }\n\n  &:disabled {\n   background-color: $grey_20;\n   cursor: not-allowed;\n  }\n\n  &--decrement {\n   border-bottom-left-radius: 0;\n   border-bottom-right-radius: 0;\n  }\n\n  &--increment {\n   border-top-left-radius: 0;\n   border-top-right-radius: 0;\n  }\n }\n\n .sd-number-input__label {\n  margin-bottom: 8px;\n  font-weight: 500;\n  color: $grey_90;\n }\n}\n\nsd-number-input:focus-within {\n .sd-number-input__buttons {\n  opacity: 1;\n  pointer-events: auto;\n }\n\n .sd-number-input {\n  border-color: $brilliantblue_75;\n  box-shadow: 0 0 4px 0 #0071ff66;\n }\n}","import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core'\n\n@Component({\n tag: 'sd-number-input',\n styleUrl: 'sd-number-input.scss',\n})\nexport class SdNumberInput {\n @Element() el!: HTMLElement;\n\n @Prop() min: number = Number.NEGATIVE_INFINITY;\n @Prop() max: number = Number.POSITIVE_INFINITY;\n @Prop() step: number = 1;\n @Prop() useButton: boolean = false;\n @Prop() useDecimal: boolean = false;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n @Prop() label?: string;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() width?: number | string;\n @Prop() rules?: Array<(value: string | number | null) => boolean | string>;\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: number | null = null;\n @State() private displayValue: string = '';\n @State() private hovered: boolean = false;\n @State() private error: boolean = false;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n\n @Event() sdIncrement?: EventEmitter<{ currentVal: number; prevVal: number }>;\n @Event() sdDecrement?: EventEmitter<{ currentVal: number; prevVal: number }>;\n @Event() sdInput?: EventEmitter<number | null>;\n @Event() sdChange?: EventEmitter<number | null>;\n @Event() sdFocus?: EventEmitter<Event>;\n @Event() sdBlur?: EventEmitter<Event>;\n\n private formatWithCommas(value: number | null): string {\n  if (value === null || value === undefined) return '';\n\n  const isNegative = value < 0;\n  const absValue = Math.abs(value);\n\n  const [intPart, decPart] = absValue.toString().split('.');\n  const formatted = (+intPart).toLocaleString();\n\n  const result = isNegative ? '-' + formatted : formatted;\n  return decPart ? result + '.' + decPart : String(result);\n }\n\n private parseInput(input: string): number | null {\n  if (!input || input.trim() === '') return null;\n\n  const cleaned = input.replace(/,/g, '').trim();\n\n  // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n\n  if (!/^-?(\\d+\\.?\\d*|\\d*\\.\\d+)$/.test(cleaned)) {\n   return null;\n  }\n\n  const parsed = parseFloat(cleaned);\n\n  if (isNaN(parsed)) return null;\n\n  // 소수점 사용 하지 않는데 . 이 있는 경우\n  if (!this.useDecimal && cleaned.includes('.')) {\n   return null;\n  }\n\n  return parsed;\n }\n\n private clampMinMax(value: number): number {\n  return Math.min(Math.max(value, this.min), this.max);\n }\n\n private updateDisplay() {\n  this.displayValue = this.formatWithCommas(this.internalValue);\n }\n\n private isIncrementDisabled(): boolean {\n  if (this.disabled || this.readonly) return true;\n  if (this.internalValue !== null) {\n   return this.internalValue >= this.max;\n  }\n  return false;\n }\n\n private isDecrementDisabled(): boolean {\n  if (this.disabled || this.readonly) return true;\n  if (this.internalValue !== null) {\n   return this.internalValue <= this.min;\n  }\n  return false;\n }\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n  if (newValue === null || newValue === '') {\n   this.internalValue = null;\n  } else {\n   const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;\n   if (parsed !== null) {\n    this.internalValue = this.clampMinMax(parsed);\n   }\n  }\n  this.updateDisplay();\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: number | null) {\n  this.updateDisplay();\n\n  if (newValue !== this.value) {\n   this.value = newValue;\n   this.sdInput?.emit(newValue);\n  }\n\n  if (!this.rules || this.rules.length === 0) return;\n  this.error = false;\n  for (const rule of this.rules) {\n   const result = rule(newValue);\n   if (result !== true) {\n    this.error = true;\n    break;\n   }\n  }\n }\n\n componentWillLoad() {\n  if (this.value !== null && this.value !== undefined) {\n   const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;\n   if (parsed !== null) {\n    this.internalValue = this.clampMinMax(parsed);\n   }\n  }\n  this.updateDisplay();\n }\n\n private handleInput = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  const inputValue = target.value;\n\n  if (inputValue === '') {\n   this.internalValue = null;\n   this.displayValue = '';\n   return;\n  }\n\n  const commasRemoved = inputValue.replace(/,/g, '');\n\n  // 만약에 소수점 (.) 이 여러개 일 경우\n  const decimalCount = (commasRemoved.match(/\\./g) || []).length;\n  if (decimalCount > 1) {\n   target.value = this.displayValue;\n   return;\n  }\n\n  // 가능: \"-\", \".\", \"-.\" (단순 기호만 있는 경우)\n  if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {\n   target.value = commasRemoved;\n   return;\n  }\n\n  // 숫자 뒤에 . 이 있는 경우 (예: \"1000.\") -> 콤마 포맷 적용 + . 유지\n  if (commasRemoved.endsWith('.') && decimalCount === 1) {\n   const numberPart = commasRemoved.slice(0, -1);\n   const parsed = this.parseInput(numberPart);\n   if (parsed !== null) {\n    const formatted = this.formatWithCommas(parsed);\n    target.value = formatted + '.';\n    return;\n   }\n  }\n\n  const parsed = this.parseInput(commasRemoved);\n\n  if (parsed !== null) {\n   if (parsed < this.min) {\n    target.value = this.displayValue;\n    return;\n   }\n\n   if (parsed > this.max) {\n    target.value = this.displayValue;\n    return;\n   }\n\n   this.internalValue = parsed;\n\n   this.displayValue = this.formatWithCommas(parsed);\n   target.value = this.displayValue;\n  } else {\n   target.value = this.displayValue;\n  }\n };\n\n private handleChange = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  const inputValue = target.value;\n\n  if (inputValue === '') {\n   this.internalValue = null;\n  } else {\n   const parsed = this.parseInput(inputValue);\n   if (parsed !== null) {\n    this.internalValue = this.clampMinMax(parsed);\n   }\n  }\n\n  this.sdChange?.emit(this.internalValue);\n };\n\n private handleFocus = (event: Event) => {\n  this.sdFocus?.emit(event);\n };\n\n private handleBlur = (event: Event) => {\n  this.updateDisplay();\n  if (this.nativeEl) {\n   this.nativeEl.value = this.displayValue;\n  }\n  this.sdBlur?.emit(event);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n  if (event.key === 'ArrowUp') {\n   event.preventDefault();\n   this.handleIncrement();\n  } else if (event.key === 'ArrowDown') {\n   event.preventDefault();\n   this.handleDecrement();\n  }\n };\n\n private handleIncrement = () => {\n  if (this.isIncrementDisabled()) return;\n\n  const currentVal = this.internalValue ?? (this.min ?? 0);\n  let nextVal = currentVal + this.step;\n\n  if (nextVal > this.max) {\n   nextVal = this.max;\n  }\n\n  if (nextVal === currentVal) return;\n\n  this.sdIncrement?.emit({ currentVal: nextVal, prevVal: currentVal });\n\n  this.internalValue = nextVal;\n  this.sdChange?.emit(nextVal);\n };\n\n private handleDecrement = () => {\n  if (this.isDecrementDisabled()) return;\n\n  const currentVal = this.internalValue ?? (this.min ?? 0);\n  let nextVal = currentVal - this.step;\n\n  if (nextVal < this.min) {\n   nextVal = this.min;\n  }\n\n  if (nextVal === currentVal) return;\n\n  this.sdDecrement?.emit({ currentVal: nextVal, prevVal: currentVal });\n\n  this.internalValue = nextVal;\n  this.sdChange?.emit(nextVal);\n };\n\n @Method()\n async getNativeElement(): Promise<HTMLInputElement | null> {\n  return this.nativeEl || null;\n }\n\n getInputStatus() {\n  if (this.disabled) return 'sd-number-input--disabled';\n  if (this.hovered) return 'sd-number-input--hovered';\n  if (this.status) return `sd-number-input--${this.status}`;\n  if (this.error) return 'sd-number-input--error';\n  return '';\n }\n\n render() {\n  const inputWidth = this.width\n   ? {\n    '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n   }\n   : {};\n\n  const inputStyles = {\n   textAlign: this.useButton ? 'center' : 'right',\n  };\n\n  return (\n   <Host style={inputWidth} onFocus={this.handleFocus} onBlur={this.handleBlur}>\n    {this.useButton ? 'use buttons' : 'dont use buttons'}\n    {this.label && <div class=\"sd-number-input__label\">{this.label}</div>}\n    <label\n     class={{\n      'sd-number-input': true,\n      [this.getInputStatus()]: true,\n      'sd-number-input--with-buttons': this.useButton,\n     }}\n     onMouseEnter={() => (this.hovered = true)}\n     onMouseLeave={() => (this.hovered = false)}\n     style={this.inputStyle}\n    >\n     <input\n      ref={el => (this.nativeEl = el)}\n      class={`sd-number-input__input ${this.inputClass}`}\n      type=\"text\"\n      inputMode=\"numeric\"\n      value={this.displayValue}\n      placeholder={this.placeholder}\n      disabled={this.disabled}\n      readonly={this.readonly}\n      autofocus={this.autoFocus}\n      onInput={this.handleInput}\n      onChange={this.handleChange}\n      onKeyDown={this.handleKeyDown}\n      style={inputStyles}\n     />\n\n     {this.useButton && (\n      <div class=\"sd-number-input__buttons\">\n       <button\n        type=\"button\"\n        class={{\n         'sd-number-input__button': true,\n         'sd-number-input__button--decrement': true,\n        }}\n        disabled={this.isDecrementDisabled()}\n        onClick={this.handleDecrement}\n        tabindex={-1}\n       >\n        <sd-icon name=\"minus\" size={12} color={this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF'} />\n       </button>\n       <button\n        type=\"button\"\n        class={{\n         'sd-number-input__button': true,\n         'sd-number-input__button--increment': true,\n        }}\n        disabled={this.isIncrementDisabled()}\n        onClick={this.handleIncrement}\n        tabindex={-1}\n       >\n        <sd-icon name=\"add\" size={12} color={this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF'} />\n       </button>\n      </div>\n     )}\n    </label>\n   </Host>\n  )\n }\n}\n"],"version":3}
+{"file":"sd-number-input.js","mappings":"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","names":["SdNumberInput","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-number-input/sd-number-input.scss?tag=sd-number-input","src/components/sd-number-input/sd-number-input.tsx"],"sourcesContent":["@import 'variables';\n@import '../sd-icon/sd-icon.scss';\n\n.sd-number-input {\n box-sizing: border-box;\n display: flex;\n width: var(--input-width, 100%);\n align-items: center;\n height: 28px;\n padding: 4px 8px;\n border: 1px solid $grey_55;\n border-radius: 4px;\n color: $grey_90;\n font-size: 12px;\n line-height: 20px;\n background: white;\n position: relative;\n\n &--hovered {\n  border-color: $brilliantblue_75;\n  box-shadow: 0 0 4px 0 #0071ff66;\n }\n\n &.sd-number-input--error {\n  border-color: $red_70;\n }\n\n &.sd-number-input--pass {\n  border-color: $green_65;\n }\n\n &.sd-number-input--disabled {\n  background-color: $grey_20 !important;\n  border-color: $grey_45 !important;\n  cursor: not-allowed !important;\n  box-shadow: none !important;\n\n  .sd-number-input__input {\n   color: $grey_65 !important;\n   cursor: not-allowed !important;\n  }\n }\n\n .sd-number-input__input {\n  display: block;\n  width: 100%;\n  height: 20px;\n  line-height: 20px;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: inherit;\n  color: $grey_90;\n  margin-left: 4px;\n  margin-right: 4px;\n  padding-block: 0;\n  padding-inline: 0;\n  text-align: right;\n\n  &::placeholder {\n   font-size: 12px;\n   height: 20px;\n   line-height: 20px;\n   color: $grey_55;\n  }\n }\n\n .sd-number-input__clear-icon {\n  cursor: pointer;\n  margin-left: 8px;\n }\n\n .sd-number-input__buttons {\n  padding: 4px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n }\n\n .sd-number-input__button {\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: 2px;\n  background-color: $brilliantblue_10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin: 0;\n  transition: background-color 0.2s ease;\n\n  &:hover:not(:disabled) {\n   background-color: $brilliantblue_20;\n  }\n\n  &:disabled {\n   background-color: $grey_20;\n   cursor: not-allowed;\n  }\n\n  &--decrement {\n   border-bottom-left-radius: 0;\n   border-bottom-right-radius: 0;\n  }\n\n  &--increment {\n   border-top-left-radius: 0;\n   border-top-right-radius: 0;\n  }\n }\n\n .sd-number-input__label {\n  margin-bottom: 8px;\n  font-weight: 500;\n  color: $grey_90;\n }\n}\n\nsd-number-input:focus-within {\n .sd-number-input__buttons {\n  opacity: 1;\n  pointer-events: auto;\n }\n\n .sd-number-input {\n  border-color: $brilliantblue_75;\n  box-shadow: 0 0 4px 0 #0071ff66;\n }\n}","import {\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n h,\n Method,\n} from '@stencil/core';\n\n@Component({\n tag: 'sd-number-input',\n styleUrl: 'sd-number-input.scss',\n})\nexport class SdNumberInput {\n @Element() el!: HTMLElement;\n\n @Prop() min: number = Number.NEGATIVE_INFINITY;\n @Prop() max: number = Number.POSITIVE_INFINITY;\n @Prop() step: number = 1;\n @Prop() useButton: boolean = false;\n @Prop() useDecimal: boolean = false;\n\n @Prop({ mutable: true }) value?: string | number | null = null;\n @Prop() label?: string;\n @Prop() placeholder: string = '입력해 주세요.';\n @Prop() disabled: boolean = false;\n @Prop() width?: number | string;\n @Prop() rules?: Array<(value: string | number | null) => boolean | string>;\n @Prop() autoFocus: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n @Prop() inputClass: string = '';\n @Prop() readonly: boolean = false;\n @Prop() inputStyle: { [key: string]: string } = {};\n\n @State() private internalValue: number | null = null;\n @State() private displayValue: string = '';\n @State() private hovered: boolean = false;\n @State() private error: boolean = false;\n\n private nativeEl: HTMLInputElement | undefined = undefined;\n\n @Event({ eventName: 'sdUpdate' }) update?: EventEmitter<number | null>;\n @Event({ eventName: 'sdFocus' }) focus?: EventEmitter<Event>;\n @Event({ eventName: 'sdBlur' }) blur?: EventEmitter<Event>;\n\n private formatWithCommas(value: number | null): string {\n  if (value === null || value === undefined) return '';\n\n  const isNegative = value < 0;\n  const absValue = Math.abs(value);\n\n  const [intPart, decPart] = absValue.toString().split('.');\n  const formatted = (+intPart).toLocaleString();\n\n  const result = isNegative ? '-' + formatted : formatted;\n  return decPart ? result + '.' + decPart : String(result);\n }\n\n private parseInput(input: string): number | null {\n  if (!input || input.trim() === '') return null;\n\n  const cleaned = input.replace(/,/g, '').trim();\n\n  // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n\n  if (!/^-?(\\d+\\.?\\d*|\\d*\\.\\d+)$/.test(cleaned)) {\n   return null;\n  }\n\n  const parsed = parseFloat(cleaned);\n\n  if (isNaN(parsed)) return null;\n\n  // 소수점 사용 하지 않는데 . 이 있는 경우\n  if (!this.useDecimal && cleaned.includes('.')) {\n   return null;\n  }\n\n  return parsed;\n }\n\n private clampMinMax(value: number): number {\n  return Math.min(Math.max(value, this.min), this.max);\n }\n\n private updateDisplay() {\n  this.displayValue = this.formatWithCommas(this.internalValue);\n }\n\n private isIncrementDisabled(): boolean {\n  if (this.disabled || this.readonly) return true;\n  if (this.internalValue !== null) {\n   return this.internalValue >= this.max;\n  }\n  return false;\n }\n\n private isDecrementDisabled(): boolean {\n  if (this.disabled || this.readonly) return true;\n  if (this.internalValue !== null) {\n   return this.internalValue <= this.min;\n  }\n  return false;\n }\n\n @Watch('value')\n valueChanged(newValue: string | number | null) {\n  if (newValue === null || newValue === '') {\n   this.internalValue = null;\n  } else {\n   const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;\n   if (parsed !== null) {\n    this.internalValue = this.clampMinMax(parsed);\n   }\n  }\n  this.updateDisplay();\n }\n\n @Watch('internalValue')\n internalValueChanged(newValue: number | null) {\n  this.updateDisplay();\n\n  if (newValue !== this.value) {\n   this.value = newValue;\n   this.update?.emit(newValue);\n  }\n\n  if (!this.rules || this.rules.length === 0) return;\n  this.error = false;\n  for (const rule of this.rules) {\n   const result = rule(newValue);\n   if (result !== true) {\n    this.error = true;\n    break;\n   }\n  }\n }\n\n componentWillLoad() {\n  if (this.value !== null && this.value !== undefined) {\n   const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;\n   if (parsed !== null) {\n    this.internalValue = this.clampMinMax(parsed);\n   }\n  }\n  this.updateDisplay();\n }\n\n private handleInput = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  const inputValue = target.value;\n\n  if (inputValue === '') {\n   this.internalValue = null;\n   this.displayValue = '';\n   return;\n  }\n\n  const commasRemoved = inputValue.replace(/,/g, '');\n\n  // 만약에 소수점 (.) 이 여러개 일 경우\n  const decimalCount = (commasRemoved.match(/\\./g) || []).length;\n  if (decimalCount > 1) {\n   target.value = this.displayValue;\n   return;\n  }\n\n  // 가능: \"-\", \".\", \"-.\" (단순 기호만 있는 경우)\n  if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {\n   target.value = commasRemoved;\n   return;\n  }\n\n  // 숫자 뒤에 . 이 있는 경우 (예: \"1000.\") -> 콤마 포맷 적용 + . 유지\n  if (commasRemoved.endsWith('.') && decimalCount === 1) {\n   const numberPart = commasRemoved.slice(0, -1);\n   const parsed = this.parseInput(numberPart);\n   if (parsed !== null) {\n    const formatted = this.formatWithCommas(parsed);\n    target.value = formatted + '.';\n    return;\n   }\n  }\n\n  const parsed = this.parseInput(commasRemoved);\n\n  if (parsed !== null) {\n   if (parsed < this.min) {\n    target.value = this.displayValue;\n    return;\n   }\n\n   if (parsed > this.max) {\n    target.value = this.displayValue;\n    return;\n   }\n\n   this.internalValue = parsed;\n   this.displayValue = this.formatWithCommas(parsed);\n   target.value = this.displayValue;\n  } else {\n   target.value = this.displayValue;\n  }\n };\n\n private handleFocus = (event: Event) => {\n  this.focus?.emit(event);\n };\n\n private handleBlur = (event: Event) => {\n  this.updateDisplay();\n  if (this.nativeEl) {\n   this.nativeEl.value = this.displayValue;\n  }\n  this.blur?.emit(event);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n  if (event.key === 'ArrowUp') {\n   event.preventDefault();\n   this.handleIncrement();\n  } else if (event.key === 'ArrowDown') {\n   event.preventDefault();\n   this.handleDecrement();\n  }\n };\n\n private handleIncrement = () => {\n  if (this.isIncrementDisabled()) return;\n\n  const currentVal = this.internalValue ?? this.min ?? 0;\n  let nextVal = currentVal + this.step;\n\n  if (nextVal > this.max) {\n   nextVal = this.max;\n  }\n\n  if (nextVal === currentVal) return;\n\n  this.internalValue = nextVal;\n };\n\n private handleDecrement = () => {\n  if (this.isDecrementDisabled()) return;\n\n  const currentVal = this.internalValue ?? this.min ?? 0;\n  let nextVal = currentVal - this.step;\n\n  if (nextVal < this.min) {\n   nextVal = this.min;\n  }\n\n  if (nextVal === currentVal) return;\n\n  this.internalValue = nextVal;\n };\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n  return this.nativeEl || null;\n }\n\n getInputStatus() {\n  if (this.disabled) return 'sd-number-input--disabled';\n  if (this.hovered) return 'sd-number-input--hovered';\n  if (this.status) return `sd-number-input--${this.status}`;\n  if (this.error) return 'sd-number-input--error';\n  return '';\n }\n\n render() {\n  const inputWidth = this.width\n   ? {\n      '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,\n     }\n   : {};\n\n  const inputStyles = {\n   textAlign: this.useButton ? 'center' : 'right',\n  };\n\n  return (\n   <Host style={inputWidth} onFocus={this.handleFocus} onBlur={this.handleBlur}>\n    {this.useButton ? 'use buttons' : 'dont use buttons'}\n    {this.label && <div class=\"sd-number-input__label\">{this.label}</div>}\n    <label\n     class={{\n      'sd-number-input': true,\n      [this.getInputStatus()]: true,\n      'sd-number-input--with-buttons': this.useButton,\n     }}\n     onMouseEnter={() => (this.hovered = true)}\n     onMouseLeave={() => (this.hovered = false)}\n     style={this.inputStyle}\n    >\n     <input\n      ref={el => (this.nativeEl = el)}\n      class={`sd-number-input__input ${this.inputClass}`}\n      type=\"text\"\n      inputMode=\"numeric\"\n      value={this.displayValue}\n      placeholder={this.placeholder}\n      disabled={this.disabled}\n      readonly={this.readonly}\n      autofocus={this.autoFocus}\n      onInput={this.handleInput}\n      onKeyDown={this.handleKeyDown}\n      style={inputStyles}\n     />\n\n     {this.useButton && (\n      <div class=\"sd-number-input__buttons\">\n       <button\n        type=\"button\"\n        class={{\n         'sd-number-input__button': true,\n         'sd-number-input__button--decrement': true,\n        }}\n        disabled={this.isDecrementDisabled()}\n        onClick={this.handleDecrement}\n        tabindex={-1}\n       >\n        <sd-icon\n         name=\"minus\"\n         size={12}\n         color={this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF'}\n        />\n       </button>\n       <button\n        type=\"button\"\n        class={{\n         'sd-number-input__button': true,\n         'sd-number-input__button--increment': true,\n        }}\n        disabled={this.isIncrementDisabled()}\n        onClick={this.handleIncrement}\n        tabindex={-1}\n       >\n        <sd-icon name=\"add\" size={12} color={this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF'} />\n       </button>\n      </div>\n     )}\n    </label>\n   </Host>\n  );\n }\n}\n"],"version":3}

package/dist/components/sd-pagination.js

@@ -1,4 +1,4 @@
-import { S as SdPagination$1, d as defineCustomElement$1 } from './p-DRGcUx0C.js';
+import { S as SdPagination$1, d as defineCustomElement$1 } from './p-DxSmO6Tr.js';
 
 const SdPagination = SdPagination$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-popover.js

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-CQBrru3e.js';
-import { T as TooltipArrow } from './p-BDkKpeVz.js';
-import { d as defineCustomElement$4 } from './p-BESbtjDi.js';
-import { d as defineCustomElement$3 } from './p-vhe6g4Qt.js';
-import { d as defineCustomElement$2 } from './p-njRAT-yp.js';
+import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-YLoygqPr.js';
+import { T as TooltipArrow } from './p-BKSlQGJv.js';
+import { d as defineCustomElement$4 } from './p-CdGD6AqM.js';
+import { d as defineCustomElement$3 } from './p-CVMprLsE.js';
+import { d as defineCustomElement$2 } from './p-DnQF6htq.js';
 
-const sdPopoverCss = () => `.sd-popover{position:relative;cursor:pointer;display:inline-block}`;
+const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:inline-flex}`;
 
 const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
     constructor(registerHost) {
@@ -12,7 +12,6 @@ const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.__attachShadow();
     }
     get el() { return this; }
     show = false;
@@ -43,17 +42,17 @@ const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'd829713fa084f446de7a92b27c2a99989143c1cd' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-tooltip-portal", { key: '9599b6919adec483243bb7c3c9aa808314098e63', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'c6384698676c147395ea42569c4fdb58ce2c8d05', class: {
-                'sd-popover-menu': true,
-                [`sd-popover-menu--${this.placement}`]: true,
+        return (h(Fragment, { key: 'b968d7b33da86fc38d683e3af1b6cbcb3f3386dd' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: '43b0962853e830256e7b749e6e27206a74bf08f4', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '62767f979f1256937d50a6cddd5d4ddef5270005', class: {
+                'sd-floating-menu': true,
+                [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: 'e7db8d5465a337f579b0986dcadc3d3cba8dbc3a', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '83536de3473e209f30d9ba758537b8a38ee7eecf' })), h("div", { key: 'be4eb9559697249db670333f4113192bd2faddf9', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'b80c8b40b00c3a97623c5ddae5fd1fea927b51e4', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'c05bbb176368895a04c58981af48f5ccd5dbe586', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '8f70454411ea148dd0595b184b3a1798e2cd5b7c', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'fb399fcea8365695801a1001842f32cae2455a11', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '9f6cd57f9053d0c8e6d2cfef358867dd39b037bb', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: 'd82bdddc8945f348aebe8087390bf26d91e1e1c4', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'ff7ca429210d6ae88e2442299c8cea5211304e58' })), h("div", { key: '366633e5f65f76126607edb52d857e1918afb0bb', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '66b0783a3f5c4d30d33ecf496f4d0c051b44f3f1', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '4f2049e9eee721f674a6c8ae4cbeb4eea9ab59bd', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'da2067ba8bf0279dd914fab6124f58526edff4d4', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '2aeb7b81e322472922802bcb6163d0913f0ee218', class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '1ad55d0c8bf3c1eeedc2069f6f1bcdd75b180446', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]
     }; }
     static get style() { return sdPopoverCss(); }
-}, [769, "sd-popover", {
+}, [768, "sd-popover", {
         "show": [1028],
         "placement": [513],
         "color": [513],
@@ -77,7 +76,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["sd-popover", "sd-button", "sd-icon", "sd-tooltip-portal"];
+    const components = ["sd-popover", "sd-button", "sd-floating-portal", "sd-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "sd-popover":
             if (!customElements.get(transformTag(tagName))) {
@@ -89,12 +88,12 @@ function defineCustomElement$1() {
                 defineCustomElement$4();
             }
             break;
-        case "sd-icon":
+        case "sd-floating-portal":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
-        case "sd-tooltip-portal":
+        case "sd-icon":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }

package/dist/components/sd-popover.js.map

@@ -1 +1 @@
-{"file":"sd-popover.js","mappings":"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","names":["SdPopover","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-popover/sd-popover.scss?tag=sd-popover&encapsulation=shadow","src/components/sd-popover/sd-popover.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-popover {\n position: relative;\n cursor: pointer;\n display: inline-block;\n}\n","import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\nimport { TooltipArrow } from '../assets/tooltipArrow';\n\n@Component({\n tag: 'sd-popover',\n styleUrl: 'sd-popover.scss',\n shadow: true,\n})\nexport class SdPopover {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) show: boolean = false;\n\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n @Prop({ reflect: true }) color: string = '#01BB4B';\n\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\n @Prop({ reflect: true }) iconSize: number = 12;\n\n @Prop() label: string = '';\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\n\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\n @Prop({ reflect: true }) messages: string[] = [];\n @Prop({ reflect: true }) buttons: {\n  [key: string]: any;\n }[] = [];\n @Prop() menuClass: string = '';\n\n @Prop() noHover: boolean = true;\n\n @Prop() useClose: boolean = false;\n\n @State() showPopover: boolean = false;\n @State() slotContent: string = '';\n\n @Watch('show')\n watchShowHandler(newValue: boolean) {\n  this.showPopover = newValue;\n }\n\n componentWillLoad() {\n  this.showPopover = this.show;\n\n  this.slotContent = this.el.innerHTML;\n }\n\n private buttonEl?: HTMLElement;\n\n private handleClose = () => {\n  this.showPopover = false;\n };\n\n render() {\n  return (\n   <Fragment>\n    {this.label ? (\n     <sd-button\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\n      label={this.label}\n      icon={this.icon}\n      size={this.buttonSize}\n      color={this.color}\n      variant={this.buttonVariant}\n      class=\"sd-popover\"\n      onClick={() => (this.showPopover = !this.showPopover)}\n     ></sd-button>\n    ) : (\n     <sd-icon\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\n      name={this.icon}\n      size={this.iconSize}\n      color={this.color}\n      class=\"sd-popover\"\n      onClick={() => (this.showPopover = !this.showPopover)}\n     ></sd-icon>\n    )}\n\n    {this.showPopover && (\n     <sd-tooltip-portal\n      parentRef={this.buttonEl}\n      onSdClose={this.handleClose}\n      placement={this.placement}\n     >\n      <div\n       class={{\n        'sd-popover-menu': true,\n        [`sd-popover-menu--${this.placement}`]: true,\n        [this.menuClass]: !!this.menuClass,\n       }}\n      >\n       <i class={`sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}`}>\n        <TooltipArrow></TooltipArrow>\n       </i>\n\n       <div class=\"sd-popover-menu__content\">\n        {this.menuTitle && <div class=\"sd-popover-menu__title\">{this.menuTitle}</div>}\n\n        {this.messages.length > 0 && (\n         <div class=\"sd-popover-menu__messages\">\n          {this.messages.map(message => (\n           <div>{message}</div>\n          ))}\n         </div>\n        )}\n\n        {this.buttons.length > 0 && (\n         <div class={`sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}`}>\n          {this.buttons.map(button => (\n           <sd-button {...button} />\n          ))}\n         </div>\n        )}\n       </div>\n\n       {this.useClose && (\n        <button class=\"sd-popover-menu__close-button\" onClick={() => this.handleClose()}>\n         <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\n        </button>\n       )}\n      </div>\n     </sd-tooltip-portal>\n    )}\n   </Fragment>\n  );\n }\n}\n"],"version":3}
+{"file":"sd-popover.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,gEAAgE,CAAC;;MCQhFA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;;;IAGI,IAAI,GAAY,KAAK;IAErB,SAAS,GAAwC,QAAQ;IACzD,KAAK,GAAW,SAAS;IAEzB,IAAI,GAAa,aAAa;IAC9B,QAAQ,GAAW,EAAE;IAEtC,KAAK,GAAW,EAAE;IACD,UAAU,GAAe,IAAI;IAC7B,aAAa,GAAkB,SAAS;AAEpB,IAAA,SAAS;IAC7B,QAAQ,GAAa,EAAE;IACvB,OAAO,GAE1B,EAAE;IACA,SAAS,GAAW,EAAE;IAEtB,OAAO,GAAY,IAAI;IAEvB,QAAQ,GAAY,KAAK;IAExB,WAAW,GAAY,KAAK;IAC5B,WAAW,GAAW,EAAE;AAGjC,IAAA,gBAAgB,CAAC,QAAiB,EAAA;AACjC,QAAA,IAAI,CAAC,WAAW,GAAG,QAAQ;;IAG5B,iBAAiB,GAAA;AAChB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI;QAE5B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS;;AAG7B,IAAA,QAAQ;IAER,WAAW,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACzB,KAAC;IAED,MAAM,GAAA;QACL,QACC,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,IAAI,CAAC,KAAK,IACV,CACC,CAAA,WAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAA4B,CAAC,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,EACzC,CAAA,KAEb,CACC,CAAA,SAAA,EAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAA4B,CAAC,EACzD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,GAC3C,CACX,EAEA,IAAI,CAAC,WAAW,KAChB,2EACC,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,EAEzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE;AACN,gBAAA,kBAAkB,EAAE,IAAI;AACxB,gBAAA,CAAC,qBAAqB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;gBAC7C,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;aAClC,EAAA,EAED,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,oDAAoD,IAAI,CAAC,SAAS,CAAA,CAAE,EAAA,EAC7E,CAAC,CAAA,YAAY,sDAAgB,CAC1B,EAEJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,IAAI,CAAC,SAAS,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAE,EAAA,IAAI,CAAC,SAAS,CAAO,EAE7E,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,KACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,IACrC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,KACzB,CAAA,CAAA,KAAA,EAAA,IAAA,EAAM,OAAO,CAAO,CACpB,CAAC,CACG,CACN,EAEA,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KACvB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAwD,qDAAA,EAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAE,CAAA,EACvF,EAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACvB,oBAAe,MAAM,EAAA,CAAI,CACzB,CAAC,CACG,CACN,CACI,EAEL,IAAI,CAAC,QAAQ,KACb,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,gCAAgC,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAC/E,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAA,CAAW,CAClD,CACT,CACI,CACc,CACrB,CACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SdPopover","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-popover/sd-popover.scss?tag=sd-popover","src/components/sd-popover/sd-popover.tsx"],"sourcesContent":["@import 'variables';\n\nsd-popover {\n position: relative;\n cursor: pointer;\n display: inline-flex;\n}\n","import { Component, Element, Fragment, Prop, State, Watch, h } from '@stencil/core';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\nimport { TooltipArrow } from '../assets/tooltipArrow';\n\n@Component({\n tag: 'sd-popover',\n styleUrl: 'sd-popover.scss',\n})\nexport class SdPopover {\n @Element() el!: HTMLElement;\n\n @Prop({ mutable: true }) show: boolean = false;\n\n @Prop({ reflect: true }) placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n @Prop({ reflect: true }) color: string = '#01BB4B';\n\n @Prop({ reflect: true }) icon: IconName = 'helpOutline';\n @Prop({ reflect: true }) iconSize: number = 12;\n\n @Prop() label: string = '';\n @Prop({ reflect: true }) buttonSize: ButtonSize = 'sm';\n @Prop({ reflect: true }) buttonVariant: ButtonVariant = 'primary';\n\n @Prop({ attribute: 'title', reflect: true }) menuTitle?: string;\n @Prop({ reflect: true }) messages: string[] = [];\n @Prop({ reflect: true }) buttons: {\n  [key: string]: any;\n }[] = [];\n @Prop() menuClass: string = '';\n\n @Prop() noHover: boolean = true;\n\n @Prop() useClose: boolean = false;\n\n @State() showPopover: boolean = false;\n @State() slotContent: string = '';\n\n @Watch('show')\n watchShowHandler(newValue: boolean) {\n  this.showPopover = newValue;\n }\n\n componentWillLoad() {\n  this.showPopover = this.show;\n\n  this.slotContent = this.el.innerHTML;\n }\n\n private buttonEl?: HTMLElement;\n\n private handleClose = () => {\n  this.showPopover = false;\n };\n\n render() {\n  return (\n   <Fragment>\n    {this.label ? (\n     <sd-button\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\n      label={this.label}\n      icon={this.icon}\n      size={this.buttonSize}\n      color={this.color}\n      variant={this.buttonVariant}\n      class=\"sd-popover\"\n      onClick={() => (this.showPopover = !this.showPopover)}\n     ></sd-button>\n    ) : (\n     <sd-icon\n      ref={el => (this.buttonEl = el as unknown as HTMLElement)}\n      name={this.icon}\n      size={this.iconSize}\n      color={this.color}\n      class=\"sd-popover\"\n      onClick={() => (this.showPopover = !this.showPopover)}\n     ></sd-icon>\n    )}\n\n    {this.showPopover && (\n     <sd-floating-portal\n      parentRef={this.buttonEl}\n      onSdClose={this.handleClose}\n      placement={this.placement}\n     >\n      <div\n       class={{\n        'sd-floating-menu': true,\n        [`sd-floating-menu--${this.placement}`]: true,\n        [this.menuClass]: !!this.menuClass,\n       }}\n      >\n       <i class={`sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}`}>\n        <TooltipArrow></TooltipArrow>\n       </i>\n\n       <div class=\"sd-floating-menu__content\">\n        {this.menuTitle && <div class=\"sd-floating-menu__title\">{this.menuTitle}</div>}\n\n        {this.messages.length > 0 && (\n         <div class=\"sd-floating-menu__messages\">\n          {this.messages.map(message => (\n           <div>{message}</div>\n          ))}\n         </div>\n        )}\n\n        {this.buttons.length > 0 && (\n         <div class={`sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}`}>\n          {this.buttons.map(button => (\n           <sd-button {...button} />\n          ))}\n         </div>\n        )}\n       </div>\n\n       {this.useClose && (\n        <button class=\"sd-floating-menu__close-button\" onClick={() => this.handleClose()}>\n         <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\n        </button>\n       )}\n      </div>\n     </sd-floating-portal>\n    )}\n   </Fragment>\n  );\n }\n}\n"],"version":3}

package/dist/components/sd-portal.js

@@ -1,4 +1,4 @@
-import { S as SdPortal$1, d as defineCustomElement$1 } from './p-D5BkkT2U.js';
+import { S as SdPortal$1, d as defineCustomElement$1 } from './p-DbebUQwg.js';
 
 const SdPortal = SdPortal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-progress.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-CQBrru3e.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-YLoygqPr.js';
 
 const sdProgressCss = () => `sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;font-size:12px;font-weight:700;line-height:20px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:8px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}`;
 

package/dist/components/sd-radio-button-group.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
 
 const sdRadioButtonGroupCss = () => `sd-radio-button-group{display:inline-block}sd-radio-button-group .sd-radio-button-group{display:flex;flex-direction:row;gap:0}sd-radio-button-group .sd-radio-button-group__option{display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #cccccc;background-color:white;color:#333333;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-radio-button-group .sd-radio-button-group__option input{display:none}sd-radio-button-group .sd-radio-button-group__option:not(:first-child){margin-left:-1px}sd-radio-button-group .sd-radio-button-group__option:first-child{border-radius:4px 0 0 4px}sd-radio-button-group .sd-radio-button-group__option:last-child{border-radius:0 4px 4px 0}sd-radio-button-group .sd-radio-button-group__option:only-child{border-radius:4px}sd-radio-button-group .sd-radio-button-group__option::after{content:attr(data-label);position:absolute;font-weight:400;transition:font-weight 0.2s ease}sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group__option--selected):hover{background-color:#0075ff;color:white;border-color:#0075ff;z-index:2}sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group__option--selected):hover::after{font-weight:500}sd-radio-button-group .sd-radio-button-group__option--selected{border-color:#0075ff;color:#0075ff;background-color:white;z-index:1}sd-radio-button-group .sd-radio-button-group__option--disabled{background-color:#e1e1e1;border-color:#cccccc;color:#888888;cursor:not-allowed}sd-radio-button-group .sd-radio-button-group__option:has(input:disabled){cursor:not-allowed}sd-radio-button-group .sd-radio-button-group__label{user-select:none;font-weight:500;visibility:hidden}sd-radio-button-group .sd-radio-button-group--sm .sd-radio-button-group__option{padding:4px 12px;font-size:12px;line-height:20px}sd-radio-button-group .sd-radio-button-group--md .sd-radio-button-group__option{padding:4px 20px;font-size:16px;line-height:26px}`;
 
@@ -8,32 +8,22 @@ const SdRadioButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioButto
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.sdChange = createEvent(this, "sdChange");
+        this.change = createEvent(this, "sdUpdate");
     }
     value;
     radioOptions = [];
     size = 'md';
     disabled = false;
     name;
-    selectedValue;
-    sdChange;
-    componentWillLoad() {
-        if (this.value !== undefined && this.value !== null) {
-            this.selectedValue = this.value;
-        }
-    }
-    valueChanged(newValue) {
-        this.selectedValue = newValue;
-    }
+    change;
     handleRadioChange = (optionValue, optionDisabled) => {
         if (this.disabled || optionDisabled)
             return;
-        this.selectedValue = optionValue;
         this.value = optionValue;
-        this.sdChange.emit(optionValue);
+        this.change.emit(optionValue);
     };
     isOptionSelected(option) {
-        return this.selectedValue === option.value;
+        return this.value === option.value;
     }
     isOptionDisabled(option) {
         return this.disabled || !!option.disabled;
@@ -54,27 +44,21 @@ const SdRadioButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioButto
         const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];
         return classes.join(' ');
     }
+    groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
     render() {
-        const groupName = this.name || `sd-radio-button-group-${Math.random().toString(36).substring(2, 11)}`;
-        return (h("div", { key: '0142307292f00c3c590f732c465d1fea8b30e49b', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+        return (h("div", { key: '9fe1be694f1c30e4aa71a0be00218b1c5fa4db01', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
-            return (h("label", { key: `radio-${index}`, class: this.getButtonClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button-group__label" }, option.label)));
+            return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button-group__label" }, option.label)));
         })));
     }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
     static get style() { return sdRadioButtonGroupCss(); }
 }, [768, "sd-radio-button-group", {
-        "value": [1544],
+        "value": [1032],
         "radioOptions": [1040],
         "size": [1],
         "disabled": [4],
-        "name": [1],
-        "selectedValue": [32]
-    }, undefined, {
-        "value": ["valueChanged"]
+        "name": [1]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/sd-radio-button-group.js.map

@@ -1 +1 @@
-{"file":"sd-radio-button-group.js","mappings":"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","names":["SdRadioButtonGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-button-group/sd-radio-button-group.scss?tag=sd-radio-button-group","src/components/sd-radio-button-group/sd-radio-button-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-radio-button-group {\n display: inline-block;\n\n .sd-radio-button-group {\n  display: flex;\n  flex-direction: row;\n  gap: 0;\n\n  &__option {\n   display: flex;\n   align-items: center;\n   justify-content: center;\n   cursor: pointer;\n   border: 1px solid $grey_45;\n   background-color: white;\n   color: $grey_90;\n   font-weight: 400;\n   transition: all 0.2s ease;\n   position: relative;\n   user-select: none;\n\n   input {\n    display: none;\n   }\n\n   &:not(:first-child) {\n    margin-left: -1px;\n   }\n\n   &:first-child {\n    border-radius: 4px 0 0 4px;\n   }\n\n   &:last-child {\n    border-radius: 0 4px 4px 0;\n   }\n\n   &:only-child {\n    border-radius: 4px;\n   }\n\n   &::after {\n    content: attr(data-label);\n    position: absolute;\n    font-weight: 400;\n    transition: font-weight .2s ease;\n   }\n\n   &:not(&--disabled):not(&--selected):hover {\n    background-color: $brilliantblue_75;\n    color: white;\n    border-color: $brilliantblue_75;\n    z-index: 2;\n\n    &::after {\n     font-weight: 500;\n    }\n\n   }\n\n   &--selected {\n    border-color: $brilliantblue_75;\n    color: $brilliantblue_75;\n    background-color: white;\n    z-index: 1;\n   }\n\n   &--disabled {\n    background-color: $grey_30;\n    border-color: $grey_45;\n    color: $grey_65;\n    cursor: not-allowed;\n   }\n\n   &:has(input:disabled) {\n    cursor: not-allowed;\n   }\n  }\n\n  &__label {\n   user-select: none;\n   font-weight: 500;\n   visibility: hidden;\n  }\n\n\n  &--sm {\n   .sd-radio-button-group__option {\n    padding: 4px 12px;\n    font-size: 12px;\n    line-height: 20px;\n   }\n  }\n\n  &--md {\n   .sd-radio-button-group__option {\n    padding: 4px 20px;\n    font-size: 16px;\n    line-height: 26px;\n   }\n  }\n }\n}","import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\n\nexport type RadioValue = string | number | boolean;\nexport type RadioOption = {\n label: string;\n value: RadioValue;\n disabled?: boolean;\n};\n\n@Component({\n tag: 'sd-radio-button-group',\n styleUrl: 'sd-radio-button-group.scss',\n})\nexport class SdRadioButtonGroup {\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\n\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\n\n @Prop() size: 'sm' | 'md' = 'md';\n\n @Prop() disabled: boolean = false;\n\n @Prop() name?: string;\n\n @State() private selectedValue!: RadioValue;\n\n @Event()\n sdChange!: EventEmitter<RadioValue>;\n\n componentWillLoad() {\n  if (this.value !== undefined && this.value !== null) {\n   this.selectedValue = this.value;\n  }\n }\n\n @Watch('value')\n valueChanged(newValue: RadioValue) {\n  this.selectedValue = newValue;\n }\n\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\n  if (this.disabled || optionDisabled) return;\n  this.selectedValue = optionValue;\n  this.value = optionValue;\n  this.sdChange.emit(optionValue);\n };\n\n private isOptionSelected(option: RadioOption): boolean {\n  return this.selectedValue === option.value;\n }\n\n private isOptionDisabled(option: RadioOption): boolean {\n  return this.disabled || !!option.disabled;\n }\n\n private getButtonClasses(option: RadioOption): string {\n  const classes = [\n   'sd-radio-button-group__option',\n   this.isOptionSelected(option)\n    ? 'sd-radio-button-group__option--selected'\n    : 'sd-radio-button-group__option--unselected',\n  ];\n\n  if (this.isOptionDisabled(option)) {\n   classes.push('sd-radio-button-group__option--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private getGroupClasses(): string {\n  const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];\n  return classes.join(' ');\n }\n\n render() {\n  const groupName =\n   this.name || `sd-radio-button-group-${Math.random().toString(36).substring(2, 11)}`;\n\n  return (\n   <div class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\n    {this.radioOptions.map((option, index) => {\n     const isSelected = this.isOptionSelected(option);\n     const isDisabled = this.isOptionDisabled(option);\n\n     return (\n      <label\n       key={`radio-${index}`}\n       class={this.getButtonClasses(option)}\n       role=\"radio\"\n       aria-checked={isSelected.toString()}\n       aria-disabled={isDisabled.toString()}\n       aria-label={option.label || 'radio option'}\n       data-label={option.label}\n      >\n       <input\n        type=\"radio\"\n        name={groupName}\n        value={option.value.toString()}\n        checked={isSelected}\n        disabled={isDisabled}\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\n       />\n       {option.label && <span class=\"sd-radio-button-group__label\">{option.label}</span>}\n      </label>\n     );\n    })}\n   </div>\n  );\n }\n}\n"],"version":3}
+{"file":"sd-radio-button-group.js","mappings":"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","names":["SdRadioButtonGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-button-group/sd-radio-button-group.scss?tag=sd-radio-button-group","src/components/sd-radio-button-group/sd-radio-button-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-radio-button-group {\n display: inline-block;\n\n .sd-radio-button-group {\n  display: flex;\n  flex-direction: row;\n  gap: 0;\n\n  &__option {\n   display: flex;\n   align-items: center;\n   justify-content: center;\n   cursor: pointer;\n   border: 1px solid $grey_45;\n   background-color: white;\n   color: $grey_90;\n   font-weight: 400;\n   transition: all 0.2s ease;\n   position: relative;\n   user-select: none;\n\n   input {\n    display: none;\n   }\n\n   &:not(:first-child) {\n    margin-left: -1px;\n   }\n\n   &:first-child {\n    border-radius: 4px 0 0 4px;\n   }\n\n   &:last-child {\n    border-radius: 0 4px 4px 0;\n   }\n\n   &:only-child {\n    border-radius: 4px;\n   }\n\n   &::after {\n    content: attr(data-label);\n    position: absolute;\n    font-weight: 400;\n    transition: font-weight .2s ease;\n   }\n\n   &:not(&--disabled):not(&--selected):hover {\n    background-color: $brilliantblue_75;\n    color: white;\n    border-color: $brilliantblue_75;\n    z-index: 2;\n\n    &::after {\n     font-weight: 500;\n    }\n\n   }\n\n   &--selected {\n    border-color: $brilliantblue_75;\n    color: $brilliantblue_75;\n    background-color: white;\n    z-index: 1;\n   }\n\n   &--disabled {\n    background-color: $grey_30;\n    border-color: $grey_45;\n    color: $grey_65;\n    cursor: not-allowed;\n   }\n\n   &:has(input:disabled) {\n    cursor: not-allowed;\n   }\n  }\n\n  &__label {\n   user-select: none;\n   font-weight: 500;\n   visibility: hidden;\n  }\n\n\n  &--sm {\n   .sd-radio-button-group__option {\n    padding: 4px 12px;\n    font-size: 12px;\n    line-height: 20px;\n   }\n  }\n\n  &--md {\n   .sd-radio-button-group__option {\n    padding: 4px 20px;\n    font-size: 16px;\n    line-height: 26px;\n   }\n  }\n }\n}","import { Component, Prop, h, EventEmitter, Event } from '@stencil/core';\n\nexport type RadioValue = string | number | boolean;\nexport type RadioOption = {\n label: string;\n value: RadioValue;\n disabled?: boolean;\n};\n\n@Component({\n tag: 'sd-radio-button-group',\n styleUrl: 'sd-radio-button-group.scss',\n})\nexport class SdRadioButtonGroup {\n @Prop({ mutable: true }) value!: RadioValue;\n\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\n\n @Prop() size: 'sm' | 'md' = 'md';\n\n @Prop() disabled: boolean = false;\n\n @Prop() name?: string;\n\n @Event({ eventName: 'sdUpdate' })\n change!: EventEmitter<RadioValue>;\n\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\n  if (this.disabled || optionDisabled) return;\n  this.value = optionValue;\n  this.change.emit(optionValue);\n };\n\n private isOptionSelected(option: RadioOption): boolean {\n  return this.value === option.value;\n }\n\n private isOptionDisabled(option: RadioOption): boolean {\n  return this.disabled || !!option.disabled;\n }\n\n private getButtonClasses(option: RadioOption): string {\n  const classes = [\n   'sd-radio-button-group__option',\n   this.isOptionSelected(option)\n    ? 'sd-radio-button-group__option--selected'\n    : 'sd-radio-button-group__option--unselected',\n  ];\n\n  if (this.isOptionDisabled(option)) {\n   classes.push('sd-radio-button-group__option--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private getGroupClasses(): string {\n  const classes = ['sd-radio-button-group', `sd-radio-button-group--${this.size}`];\n  return classes.join(' ');\n }\n\n private groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;\n\n render() {\n  return (\n   <div class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\n    {this.radioOptions.map(option => {\n     const isSelected = this.isOptionSelected(option);\n     const isDisabled = this.isOptionDisabled(option);\n\n     return (\n      <label\n       key={`radio-${option.value}`}\n       class={this.getButtonClasses(option)}\n       role=\"radio\"\n       aria-checked={isSelected.toString()}\n       aria-disabled={isDisabled.toString()}\n       aria-label={option.label || 'radio option'}\n       data-label={option.label}\n      >\n       <input\n        type=\"radio\"\n        name={this.groupName}\n        value={option.value.toString()}\n        checked={isSelected}\n        disabled={isDisabled}\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\n       />\n       {option.label && <span class=\"sd-radio-button-group__label\">{option.label}</span>}\n      </label>\n     );\n    })}\n   </div>\n  );\n }\n}\n"],"version":3}

package/dist/components/sd-radio-group.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
 
 const sdRadioGroupCss = () => `sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}sd-radio-group .sd-radio-group__option{width:fit-content;display:flex;align-items:center;gap:8px;font-weight:400;font-size:12px;line-height:20px;cursor:pointer}sd-radio-group .sd-radio-group__option:has(input:disabled){cursor:not-allowed}sd-radio-group .sd-radio-group__option input{position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;cursor:pointer;accent-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked{border-color:#0075ff;background-color:white}sd-radio-group .sd-radio-group__option input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075ff}sd-radio-group .sd-radio-group__option input:disabled{cursor:not-allowed;border-color:#cccccc;background-color:#eeeeee}sd-radio-group .sd-radio-group__option input:disabled:checked::before{background-color:#cccccc}sd-radio-group .sd-radio-group__option input:not(:disabled):hover{border-color:#0075ff;background-color:#d9eaff}sd-radio-group .sd-radio-group__label{font-size:12px;color:#333333;line-height:20px;user-select:none}sd-radio-group .sd-radio-group__option--disabled{cursor:not-allowed}sd-radio-group .sd-radio-group__option--disabled .sd-radio-group__label{color:#888888}`;
 
@@ -8,7 +8,7 @@ const SdRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioGroup exten
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.sdChange = createEvent(this, "sdChange");
+        this.change = createEvent(this, "sdUpdate");
     }
     value;
     radioOptions = [];
@@ -16,7 +16,7 @@ const SdRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioGroup exten
     disabled = false;
     name;
     selectedValue;
-    sdChange;
+    change;
     componentWillLoad() {
         if (this.value) {
             this.selectedValue = this.value;
@@ -30,7 +30,7 @@ const SdRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioGroup exten
             return;
         this.selectedValue = optionValue;
         this.value = optionValue;
-        this.sdChange.emit(optionValue);
+        this.change.emit(optionValue);
     };
     isOptionSelected(option) {
         return this.selectedValue === option.value;
@@ -56,7 +56,7 @@ const SdRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdRadioGroup exten
     }
     render() {
         const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;
-        return (h("div", { key: 'c66984dc882990512082493a67df0d7cc6daea99', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.radioOptions.map((option, index) => {
+        return (h("div", { key: '9599dded7410ed41178f6cbf93aa24897cc9b030', class: this.getGroupClasses(), role: "radiogroup" }, this.radioOptions.map((option, index) => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${index}`, class: this.getRadioClasses(option), role: "radio", "aria-checked": isSelected.toString(), "aria-disabled": isDisabled.toString(), "aria-label": option.label || 'radio option' }, h("input", { type: "radio", name: groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-group__label" }, option.label)));

package/dist/components/sd-radio-group.js.map

@@ -1 +1 @@
-{"file":"sd-radio-group.js","mappings":"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","names":["SdRadioGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-group/sd-radio-group.scss?tag=sd-radio-group","src/components/sd-radio-group/sd-radio-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-radio-group {\n display: inline-block;\n\n .sd-radio-group {\n  display: flex;\n\n  &--vertical {\n   flex-direction: column;\n   gap: 8px;\n  }\n\n  &--horizontal {\n   flex-direction: row;\n   align-items: center;\n   gap: 20px;\n  }\n\n  &__option {\n   width: fit-content;\n   display: flex;\n   align-items: center;\n   gap: 8px;\n   font-weight: 400;\n   font-size: 12px;\n   line-height: 20px;\n   cursor: pointer;\n\n   &:has(input:disabled) {\n    cursor: not-allowed;\n   }\n\n   input {\n    position: relative;\n    appearance: none;\n    margin: 0;\n    width: 16px;\n    height: 16px;\n    border: 1px solid $grey_65;\n    border-radius: 50%;\n    cursor: pointer;\n    accent-color: $brilliantblue_75;\n    background-color: white;\n\n    &:checked {\n     border-color: $brilliantblue_75;\n     background-color: white;\n    }\n\n    &:checked::before {\n     content: '';\n     position: absolute;\n     top: 50%;\n     left: 50%;\n     transform: translate(-50%, -50%);\n     width: 10px;\n     height: 10px;\n     border-radius: 50%;\n     background-color: $brilliantblue_75;\n    }\n\n    &:disabled {\n     cursor: not-allowed;\n     border-color: $grey_45;\n     background-color: $grey_20;\n    }\n\n    &:disabled:checked::before {\n     background-color: $grey_45;\n    }\n\n    &:not(:disabled):hover {\n     border-color: $brilliantblue_75;\n     background-color: $brilliantblue_25;\n    }\n   }\n  }\n\n  &__label {\n   font-size: 12px;\n   color: $grey_90;\n   line-height: 20px;\n   user-select: none;\n  }\n\n  &__option--disabled {\n   cursor: not-allowed;\n\n   .sd-radio-group__label {\n    color: $grey_65;\n   }\n  }\n }\n}","import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\n\nexport type RadioValue = string | number | boolean;\nexport type RadioOption = {\n label: string;\n value: RadioValue;\n disabled?: boolean;\n};\n\n@Component({\n tag: 'sd-radio-group',\n styleUrl: 'sd-radio-group.scss',\n})\nexport class SdRadioGroup {\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\n\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\n\n @Prop() direction: 'horizonal' | 'vertical' = 'vertical';\n\n @Prop() disabled: boolean = false;\n\n @Prop() name?: string;\n\n @State() private selectedValue!: RadioValue;\n\n @Event()\n sdChange!: EventEmitter<RadioValue>;\n\n componentWillLoad() {\n  if (this.value) {\n   this.selectedValue = this.value;\n  }\n }\n\n @Watch('value')\n valueChanged(newValue: RadioValue) {\n  this.selectedValue = newValue;\n }\n\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\n  if (this.disabled || optionDisabled) return;\n  this.selectedValue = optionValue;\n  this.value = optionValue;\n  this.sdChange.emit(optionValue);\n };\n\n private isOptionSelected(option: RadioOption): boolean {\n  return this.selectedValue === option.value;\n }\n\n private isOptionDisabled(option: RadioOption): boolean {\n  return this.disabled || !!option.disabled;\n }\n\n private getRadioClasses(option: RadioOption): string {\n  const classes = [\n   'sd-radio-group__option',\n   this.isOptionSelected(option)\n    ? 'sd-radio-group__option--selected'\n    : 'sd-radio-group__option--unselected',\n  ];\n\n  if (this.isOptionDisabled(option)) {\n   classes.push('sd-radio-group__option--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private getGroupClasses(): string {\n  const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];\n  return classes.join(' ');\n }\n\n render() {\n  const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;\n\n  return (\n   <div class={this.getGroupClasses()} role=\"radiogroup\" aria-disabled={this.disabled.toString()}>\n    {this.radioOptions.map((option, index) => {\n     const isSelected = this.isOptionSelected(option);\n     const isDisabled = this.isOptionDisabled(option);\n\n     return (\n      <label\n       key={`radio-${index}`}\n       class={this.getRadioClasses(option)}\n       role=\"radio\"\n       aria-checked={isSelected.toString()}\n       aria-disabled={isDisabled.toString()}\n       aria-label={option.label || 'radio option'}\n      >\n       <input\n        type=\"radio\"\n        name={groupName}\n        value={option.value.toString()}\n        checked={isSelected}\n        disabled={isDisabled}\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\n       />\n       {option.label && <span class=\"sd-radio-group__label\">{option.label}</span>}\n      </label>\n     );\n    })}\n   </div>\n  );\n }\n}\n"],"version":3}
+{"file":"sd-radio-group.js","mappings":"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","names":["SdRadioGroup","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-radio-group/sd-radio-group.scss?tag=sd-radio-group","src/components/sd-radio-group/sd-radio-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-radio-group {\n display: inline-block;\n\n .sd-radio-group {\n  display: flex;\n\n  &--vertical {\n   flex-direction: column;\n   gap: 8px;\n  }\n\n  &--horizontal {\n   flex-direction: row;\n   align-items: center;\n   gap: 20px;\n  }\n\n  &__option {\n   width: fit-content;\n   display: flex;\n   align-items: center;\n   gap: 8px;\n   font-weight: 400;\n   font-size: 12px;\n   line-height: 20px;\n   cursor: pointer;\n\n   &:has(input:disabled) {\n    cursor: not-allowed;\n   }\n\n   input {\n    position: relative;\n    appearance: none;\n    margin: 0;\n    width: 16px;\n    height: 16px;\n    border: 1px solid $grey_65;\n    border-radius: 50%;\n    cursor: pointer;\n    accent-color: $brilliantblue_75;\n    background-color: white;\n\n    &:checked {\n     border-color: $brilliantblue_75;\n     background-color: white;\n    }\n\n    &:checked::before {\n     content: '';\n     position: absolute;\n     top: 50%;\n     left: 50%;\n     transform: translate(-50%, -50%);\n     width: 10px;\n     height: 10px;\n     border-radius: 50%;\n     background-color: $brilliantblue_75;\n    }\n\n    &:disabled {\n     cursor: not-allowed;\n     border-color: $grey_45;\n     background-color: $grey_20;\n    }\n\n    &:disabled:checked::before {\n     background-color: $grey_45;\n    }\n\n    &:not(:disabled):hover {\n     border-color: $brilliantblue_75;\n     background-color: $brilliantblue_25;\n    }\n   }\n  }\n\n  &__label {\n   font-size: 12px;\n   color: $grey_90;\n   line-height: 20px;\n   user-select: none;\n  }\n\n  &__option--disabled {\n   cursor: not-allowed;\n\n   .sd-radio-group__label {\n    color: $grey_65;\n   }\n  }\n }\n}","import { Component, Prop, h, EventEmitter, Event, State, Watch } from '@stencil/core';\n\nexport type RadioValue = string | number | boolean;\nexport type RadioOption = {\n label: string;\n value: RadioValue;\n disabled?: boolean;\n};\n\n@Component({\n tag: 'sd-radio-group',\n styleUrl: 'sd-radio-group.scss',\n})\nexport class SdRadioGroup {\n @Prop({ mutable: true, reflect: true }) value!: RadioValue;\n\n @Prop({ mutable: true }) radioOptions: RadioOption[] = [];\n\n @Prop() direction: 'horizonal' | 'vertical' = 'vertical';\n\n @Prop() disabled: boolean = false;\n\n @Prop() name?: string;\n\n @State() private selectedValue!: RadioValue;\n\n @Event({ eventName: 'sdUpdate' })\n change!: EventEmitter<RadioValue>;\n\n componentWillLoad() {\n  if (this.value) {\n   this.selectedValue = this.value;\n  }\n }\n\n @Watch('value')\n valueChanged(newValue: RadioValue) {\n  this.selectedValue = newValue;\n }\n\n private handleRadioChange = (optionValue: RadioValue, optionDisabled?: boolean) => {\n  if (this.disabled || optionDisabled) return;\n  this.selectedValue = optionValue;\n  this.value = optionValue;\n  this.change.emit(optionValue);\n };\n\n private isOptionSelected(option: RadioOption): boolean {\n  return this.selectedValue === option.value;\n }\n\n private isOptionDisabled(option: RadioOption): boolean {\n  return this.disabled || !!option.disabled;\n }\n\n private getRadioClasses(option: RadioOption): string {\n  const classes = [\n   'sd-radio-group__option',\n   this.isOptionSelected(option)\n    ? 'sd-radio-group__option--selected'\n    : 'sd-radio-group__option--unselected',\n  ];\n\n  if (this.isOptionDisabled(option)) {\n   classes.push('sd-radio-group__option--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private getGroupClasses(): string {\n  const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];\n  return classes.join(' ');\n }\n\n render() {\n  const groupName = this.name || `sd-radio-group-${Math.random().toString(36).substring(2, 11)}`;\n\n  return (\n   <div\n    class={this.getGroupClasses()}\n    role=\"radiogroup\"\n    // aria-disabled={this.disabled.toString()}\n   >\n    {this.radioOptions.map((option, index) => {\n     const isSelected = this.isOptionSelected(option);\n     const isDisabled = this.isOptionDisabled(option);\n\n     return (\n      <label\n       key={`radio-${index}`}\n       class={this.getRadioClasses(option)}\n       role=\"radio\"\n       aria-checked={isSelected.toString()}\n       aria-disabled={isDisabled.toString()}\n       aria-label={option.label || 'radio option'}\n      >\n       <input\n        type=\"radio\"\n        name={groupName}\n        value={option.value.toString()}\n        checked={isSelected}\n        disabled={isDisabled}\n        onInput={() => this.handleRadioChange(option.value, option.disabled)}\n       />\n       {option.label && <span class=\"sd-radio-group__label\">{option.label}</span>}\n      </label>\n     );\n    })}\n   </div>\n  );\n }\n}\n"],"version":3}

package/dist/components/{sd-tbody.d.ts → sd-select-dropdown.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface SdTbody extends Components.SdTbody, HTMLElement {}
-export const SdTbody: {
-    prototype: SdTbody;
-    new (): SdTbody;
+interface SdSelectDropdown extends Components.SdSelectDropdown, HTMLElement {}
+export const SdSelectDropdown: {
+    prototype: SdSelectDropdown;
+    new (): SdSelectDropdown;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/sd-select-dropdown.js

@@ -0,0 +1,9 @@
+import { S as SdSelectDropdown$1, d as defineCustomElement$1 } from './p-s4Mg_xSz.js';
+
+const SdSelectDropdown = SdSelectDropdown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SdSelectDropdown, defineCustomElement };
+//# sourceMappingURL=sd-select-dropdown.js.map
+
+//# sourceMappingURL=sd-select-dropdown.js.map

package/dist/components/sd-select-dropdown.js.map

@@ -0,0 +1 @@
+{"file":"sd-select-dropdown.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}