ids-enterprise-wc 1.4.0 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (477) hide show
  1. package/README.md +4 -3
  2. package/chunks/{ids-chunk-QDQZOIPS.js → ids-chunk-27EYBMM2.js} +1 -1
  3. package/chunks/{ids-chunk-PDPK2EXN.js → ids-chunk-27V3UUNP.js} +1 -1
  4. package/chunks/{ids-chunk-SQUF4P3D.js → ids-chunk-2DRDJSGZ.js} +1 -1
  5. package/chunks/{ids-chunk-EFU4IHPO.js → ids-chunk-2ECUXW4I.js} +1 -1
  6. package/chunks/{ids-chunk-5HRO3ETK.js → ids-chunk-2FBU3CAT.js} +1 -1
  7. package/chunks/{ids-chunk-DOIGSAHJ.js → ids-chunk-2KHLGR6T.js} +1 -1
  8. package/chunks/{ids-chunk-UVWYV2SZ.js → ids-chunk-2W2TP4QP.js} +1 -1
  9. package/chunks/{ids-chunk-TBPXDGYT.js → ids-chunk-335Z47HR.js} +1 -1
  10. package/chunks/{ids-chunk-S5ECLNNP.js → ids-chunk-33NVJRWC.js} +1 -1
  11. package/chunks/{ids-chunk-5CLQQF2K.js → ids-chunk-3C5O3FW7.js} +1 -1
  12. package/chunks/{ids-chunk-WBY4MWJ4.js → ids-chunk-3GONSBCH.js} +1 -1
  13. package/chunks/{ids-chunk-DZZAKQO7.js → ids-chunk-3MEDXLQG.js} +1 -1
  14. package/chunks/{ids-chunk-A4KMGAAT.js → ids-chunk-3QU6GR77.js} +1 -1
  15. package/chunks/{ids-chunk-GFRSLBBI.js → ids-chunk-3V4PJNC3.js} +1 -1
  16. package/chunks/{ids-chunk-MNCKYIRS.js → ids-chunk-3WGR73BR.js} +1 -1
  17. package/chunks/{ids-chunk-KIV65H25.js → ids-chunk-3XOK2JST.js} +1 -1
  18. package/chunks/{ids-chunk-3QEO3ISF.js → ids-chunk-3ZBP7WCN.js} +1 -1
  19. package/chunks/{ids-chunk-IMYX4OF3.js → ids-chunk-3ZGWQV4O.js} +1 -1
  20. package/chunks/{ids-chunk-4T5K5S27.js → ids-chunk-43R2MBY3.js} +1 -1
  21. package/chunks/{ids-chunk-I24QC6KK.js → ids-chunk-46I4L6JF.js} +1 -1
  22. package/chunks/{ids-chunk-HIZLHUA7.js → ids-chunk-474FHU34.js} +1 -1
  23. package/chunks/{ids-chunk-ERX3D4QI.js → ids-chunk-4FLXQBEP.js} +1 -1
  24. package/chunks/{ids-chunk-KYOVWF5S.js → ids-chunk-4QHDW4GQ.js} +1 -1
  25. package/chunks/{ids-chunk-KB3YODBC.js → ids-chunk-4SQAO6EF.js} +1 -1
  26. package/chunks/{ids-chunk-QMLPKAPS.js → ids-chunk-4UMQVSLM.js} +1 -1
  27. package/chunks/{ids-chunk-CRVL2WMH.js → ids-chunk-4ZO2VJX2.js} +1 -1
  28. package/chunks/{ids-chunk-A7NNHSN2.js → ids-chunk-53N67ZGZ.js} +1 -1
  29. package/chunks/{ids-chunk-FMZ4VBYV.js → ids-chunk-54YCI3SA.js} +1 -1
  30. package/chunks/{ids-chunk-TUPLWSC5.js → ids-chunk-5ASOJQG4.js} +1 -1
  31. package/chunks/{ids-chunk-AWOX65GF.js → ids-chunk-5GN6JSOL.js} +1 -1
  32. package/chunks/{ids-chunk-BMRTVYWI.js → ids-chunk-5QPB7TBT.js} +1 -1
  33. package/chunks/{ids-chunk-ONDL2FOF.js → ids-chunk-5SAPHO33.js} +1 -1
  34. package/chunks/{ids-chunk-IOOYIIKA.js → ids-chunk-5SIAG6SU.js} +1 -1
  35. package/chunks/{ids-chunk-YFLBYF2V.js → ids-chunk-5XZSTI3E.js} +6 -2
  36. package/chunks/{ids-chunk-ZI62AUL6.js → ids-chunk-5YPSYIDB.js} +1 -1
  37. package/chunks/{ids-chunk-U42KS2KW.js → ids-chunk-623NIF3Q.js} +1 -1
  38. package/chunks/{ids-chunk-DZ473NQ7.js → ids-chunk-67HYR3GQ.js} +1 -1
  39. package/chunks/{ids-chunk-VVBCUYHW.js → ids-chunk-6I6QND3V.js} +1 -1
  40. package/chunks/{ids-chunk-GRHYCAN3.js → ids-chunk-6TRIT6QL.js} +1 -1
  41. package/chunks/{ids-chunk-7UKILJ67.js → ids-chunk-6XQQHFMN.js} +1 -1
  42. package/chunks/{ids-chunk-UZ5EIDZL.js → ids-chunk-6YS2XJPW.js} +2 -3
  43. package/chunks/{ids-chunk-S2IDVF4U.js → ids-chunk-74E6V7L5.js} +1 -1
  44. package/chunks/{ids-chunk-ZDTATSBF.js → ids-chunk-75YZOXT6.js} +1 -1
  45. package/chunks/{ids-chunk-ZWE2YRXA.js → ids-chunk-76UAIO4X.js} +1 -1
  46. package/chunks/{ids-chunk-34NLHJWF.js → ids-chunk-7AUJYJPO.js} +1 -1
  47. package/chunks/{ids-chunk-AU7HH366.js → ids-chunk-7LYEM7MJ.js} +1 -1
  48. package/chunks/{ids-chunk-3N6EWJZG.js → ids-chunk-7ULDCC4Z.js} +1 -1
  49. package/chunks/ids-chunk-B7BFY5IF.js +309 -0
  50. package/chunks/{ids-chunk-3T47PRGB.js → ids-chunk-BELPPFKJ.js} +1 -1
  51. package/chunks/{ids-chunk-5LDCBNNH.js → ids-chunk-BIFEDI5J.js} +1 -1
  52. package/chunks/{ids-chunk-DS5OMO2V.js → ids-chunk-BSKVVUAV.js} +1 -1
  53. package/chunks/{ids-chunk-ZJZCVZRE.js → ids-chunk-BWHUIAPU.js} +1 -1
  54. package/chunks/{ids-chunk-6LXJFW3M.js → ids-chunk-CJKQ6CZY.js} +1 -1
  55. package/chunks/{ids-chunk-LXPAAJGV.js → ids-chunk-CLQIF7AY.js} +1 -1
  56. package/chunks/{ids-chunk-YWO7JL24.js → ids-chunk-CMHLTQKT.js} +1 -1
  57. package/chunks/{ids-chunk-DYYZ25TM.js → ids-chunk-CRDP5GP7.js} +1 -1
  58. package/chunks/{ids-chunk-ESDYC6XW.js → ids-chunk-D2QJKHI4.js} +1 -1
  59. package/chunks/{ids-chunk-P76M6AR5.js → ids-chunk-EEE7IHAU.js} +1 -1
  60. package/chunks/{ids-chunk-LWSR67A3.js → ids-chunk-EGQIZ4SH.js} +1 -1
  61. package/chunks/{ids-chunk-NRY7WA5W.js → ids-chunk-EJTJUAUZ.js} +1 -1
  62. package/chunks/{ids-chunk-2VIFQGHN.js → ids-chunk-ENURCVZY.js} +1 -1
  63. package/chunks/{ids-chunk-WQ24NHAM.js → ids-chunk-EWPW6I2F.js} +1 -1
  64. package/chunks/{ids-chunk-GPTSAGUB.js → ids-chunk-EZAX56CK.js} +1 -1
  65. package/chunks/{ids-chunk-RX5TMECT.js → ids-chunk-F2FQY4QU.js} +5 -2
  66. package/chunks/{ids-chunk-3O2PPKAX.js → ids-chunk-F2JAURJZ.js} +1 -1
  67. package/chunks/{ids-chunk-X774MMYK.js → ids-chunk-F5YXWNFN.js} +3 -3
  68. package/chunks/{ids-chunk-MHIYEO26.js → ids-chunk-FGNPUVA5.js} +1 -1
  69. package/chunks/{ids-chunk-U5RGDWQL.js → ids-chunk-FJO6VDJ7.js} +1 -1
  70. package/chunks/{ids-chunk-QP7YLHPX.js → ids-chunk-FMN6MYNT.js} +1 -1
  71. package/chunks/{ids-chunk-AJRTMUCW.js → ids-chunk-FRWF4MZU.js} +1 -1
  72. package/chunks/{ids-chunk-F7WHBBWC.js → ids-chunk-FTY43IYJ.js} +2 -2
  73. package/chunks/{ids-chunk-W7ZIV3IK.js → ids-chunk-FYG7RSQ2.js} +1 -1
  74. package/chunks/{ids-chunk-426K47X3.js → ids-chunk-FYH3C73J.js} +1 -1
  75. package/chunks/{ids-chunk-XIJXNXI2.js → ids-chunk-FZS265VZ.js} +1 -1
  76. package/chunks/{ids-chunk-6AEJEWT3.js → ids-chunk-G3P6FZUA.js} +1 -1
  77. package/chunks/{ids-chunk-4KSAU5N5.js → ids-chunk-G5QND7LX.js} +1 -1
  78. package/chunks/{ids-chunk-C7ZISONP.js → ids-chunk-GDEYEJ2A.js} +1 -1
  79. package/chunks/{ids-chunk-TCDG5SH4.js → ids-chunk-GJQURM6G.js} +1 -1
  80. package/chunks/{ids-chunk-RRTWEIB4.js → ids-chunk-GKHIILTQ.js} +1 -1
  81. package/chunks/{ids-chunk-BOPHJWJZ.js → ids-chunk-GMUPTECK.js} +1 -1
  82. package/chunks/{ids-chunk-ZEWU7AGR.js → ids-chunk-GS4HDU24.js} +1 -1
  83. package/chunks/{ids-chunk-C423CYCD.js → ids-chunk-H4KUMBID.js} +1 -1
  84. package/chunks/{ids-chunk-AQP3PBNZ.js → ids-chunk-H4WFYJQQ.js} +1 -1
  85. package/chunks/{ids-chunk-3FQP6MST.js → ids-chunk-HEKB7EOJ.js} +1 -1
  86. package/chunks/{ids-chunk-FH6RDPMF.js → ids-chunk-HNLFNGIF.js} +1 -1
  87. package/chunks/{ids-chunk-RVU6PXYI.js → ids-chunk-HX3F4IQM.js} +1 -1
  88. package/chunks/{ids-chunk-G6DYEC7M.js → ids-chunk-HYLR32BX.js} +1 -1
  89. package/chunks/{ids-chunk-5NPJOU6K.js → ids-chunk-I2564JFG.js} +1 -1
  90. package/chunks/{ids-chunk-AHJGA75N.js → ids-chunk-I3HBA2Z5.js} +1 -1
  91. package/chunks/{ids-chunk-EWOCGFYC.js → ids-chunk-I7EBUOCX.js} +1 -1
  92. package/chunks/{ids-chunk-IUSHL7NC.js → ids-chunk-ILSYEQRZ.js} +1 -1
  93. package/chunks/{ids-chunk-UVVEA4W5.js → ids-chunk-IOJX2CXL.js} +1 -1
  94. package/chunks/{ids-chunk-PVDTJQGY.js → ids-chunk-IPUU6MGW.js} +1 -1
  95. package/chunks/{ids-chunk-ECWCUBB7.js → ids-chunk-IRATT7KB.js} +1 -1
  96. package/chunks/{ids-chunk-INMT55GS.js → ids-chunk-IXJU5RDS.js} +1 -1
  97. package/chunks/{ids-chunk-GZAZWQDV.js → ids-chunk-J36KWPI4.js} +1 -1
  98. package/chunks/{ids-chunk-3ARR6D3Y.js → ids-chunk-J5UKLQCX.js} +1 -1
  99. package/chunks/{ids-chunk-WQ2EUEFH.js → ids-chunk-JBTWGPMS.js} +1 -1
  100. package/chunks/{ids-chunk-NKRHZ74R.js → ids-chunk-JGGUOM47.js} +1 -1
  101. package/chunks/{ids-chunk-LGM4EGD3.js → ids-chunk-JLP3DH52.js} +1 -1
  102. package/chunks/{ids-chunk-6RTAHX6S.js → ids-chunk-JOLI4AVD.js} +1 -1
  103. package/chunks/{ids-chunk-QCW62HOY.js → ids-chunk-JT4GHCDT.js} +1 -1
  104. package/chunks/{ids-chunk-3GQHRVIP.js → ids-chunk-K3VAXYJJ.js} +1 -1
  105. package/chunks/{ids-chunk-T6S3IBH5.js → ids-chunk-K4WZ34LV.js} +1 -1
  106. package/chunks/{ids-chunk-XG76V3HL.js → ids-chunk-KBS65QZP.js} +1 -1
  107. package/chunks/{ids-chunk-RZJ7WKQ2.js → ids-chunk-KMOKNXJX.js} +1 -1
  108. package/chunks/{ids-chunk-IQHI4QMQ.js → ids-chunk-KQHHNS4I.js} +1 -1
  109. package/chunks/{ids-chunk-2U5O3JVS.js → ids-chunk-KR3MVQIX.js} +1 -1
  110. package/chunks/{ids-chunk-R7IH6SBH.js → ids-chunk-KUPFQNEF.js} +1 -1
  111. package/chunks/{ids-chunk-E365YTJS.js → ids-chunk-L4VQGQU2.js} +1 -1
  112. package/chunks/{ids-chunk-3FUCT4C5.js → ids-chunk-L5ROPU5P.js} +1 -1
  113. package/chunks/{ids-chunk-KXYK3DTO.js → ids-chunk-L7B7DGHB.js} +1 -1
  114. package/chunks/{ids-chunk-F6HBZQFL.js → ids-chunk-LDVJLT7L.js} +1 -1
  115. package/chunks/{ids-chunk-AJGQ4C3D.js → ids-chunk-LJ5UNWGT.js} +1 -1
  116. package/chunks/{ids-chunk-TVYWZWTI.js → ids-chunk-LU4ENRS7.js} +1 -1
  117. package/chunks/{ids-chunk-PT6WZLQO.js → ids-chunk-LVDVIMZX.js} +1 -1
  118. package/chunks/{ids-chunk-KOUGA37P.js → ids-chunk-M37O32UH.js} +2 -4
  119. package/chunks/{ids-chunk-AD4CST3L.js → ids-chunk-M777ZCEN.js} +1 -1
  120. package/chunks/{ids-chunk-CBN4C2OT.js → ids-chunk-MH7AWZKY.js} +1 -1
  121. package/chunks/{ids-chunk-ORVPN75E.js → ids-chunk-MHGKMSIS.js} +1 -1
  122. package/chunks/{ids-chunk-OSJQUNEG.js → ids-chunk-MOXVMVCB.js} +1 -1
  123. package/chunks/{ids-chunk-4TYXYRYO.js → ids-chunk-MQKX2S5K.js} +1 -1
  124. package/chunks/{ids-chunk-5YJ5KRES.js → ids-chunk-MSIRSZAP.js} +1 -1
  125. package/chunks/{ids-chunk-PGE66PNR.js → ids-chunk-MVB2PN7A.js} +1 -1
  126. package/chunks/{ids-chunk-PD5FLDKA.js → ids-chunk-MZAHJPXD.js} +1 -1
  127. package/chunks/{ids-chunk-VMOTM3K6.js → ids-chunk-N63C5WGW.js} +1 -1
  128. package/chunks/{ids-chunk-6UMF4OKN.js → ids-chunk-N7XIX7IH.js} +1 -1
  129. package/chunks/{ids-chunk-FECHSPRZ.js → ids-chunk-NCG6G3FQ.js} +1 -1
  130. package/chunks/{ids-chunk-FO2NGI5Y.js → ids-chunk-NFPS75OT.js} +2 -3
  131. package/chunks/{ids-chunk-SDAOM6FG.js → ids-chunk-NOXYAVOB.js} +1 -1
  132. package/chunks/{ids-chunk-UAOZICNC.js → ids-chunk-O4FWOX3Z.js} +1 -1
  133. package/chunks/{ids-chunk-FXAPP6VT.js → ids-chunk-O5MQZ2A2.js} +1 -1
  134. package/chunks/{ids-chunk-PUR7BHWC.js → ids-chunk-OQGQTYEM.js} +1 -1
  135. package/chunks/{ids-chunk-OFM2I7MX.js → ids-chunk-ORV3PBM3.js} +1 -1
  136. package/chunks/{ids-chunk-UR4DNDMW.js → ids-chunk-OVTCXDIE.js} +2 -2
  137. package/chunks/{ids-chunk-HCS452ZX.js → ids-chunk-OWSF63XR.js} +1 -1
  138. package/chunks/{ids-chunk-HSOM4UUD.js → ids-chunk-P2IV3MPP.js} +1 -1
  139. package/chunks/{ids-chunk-6Y7TEUMX.js → ids-chunk-P2JCJ3K2.js} +1 -1
  140. package/chunks/{ids-chunk-S5UEESCW.js → ids-chunk-PAVHLRCJ.js} +1 -1
  141. package/chunks/{ids-chunk-T3QXE6RE.js → ids-chunk-PDXWCMTC.js} +1 -1
  142. package/chunks/{ids-chunk-4OHZU6QV.js → ids-chunk-POHXGKVY.js} +10 -1
  143. package/chunks/{ids-chunk-WTE7D6XM.js → ids-chunk-PUXPRWIX.js} +1 -1
  144. package/chunks/{ids-chunk-OQLUHSNI.js → ids-chunk-PY2SQY2M.js} +1 -1
  145. package/chunks/{ids-chunk-MIQBJB3Z.js → ids-chunk-QHJCTNTS.js} +1 -1
  146. package/chunks/{ids-chunk-W7ZVNVAZ.js → ids-chunk-QRPVJOBK.js} +5 -6
  147. package/chunks/{ids-chunk-IAHEOKGQ.js → ids-chunk-QT6M2TZ7.js} +1 -1
  148. package/chunks/ids-chunk-QUPUHP67.js +298 -0
  149. package/chunks/{ids-chunk-QMT64UPG.js → ids-chunk-QXFKHZFY.js} +1 -1
  150. package/chunks/{ids-chunk-FZCEBXD5.js → ids-chunk-R3A7H6U7.js} +1 -1
  151. package/chunks/{ids-chunk-3LNCZPXU.js → ids-chunk-R43BQ5GL.js} +1 -1
  152. package/chunks/{ids-chunk-WVIPD6LJ.js → ids-chunk-R5GVSHAQ.js} +1 -1
  153. package/chunks/{ids-chunk-EMCHGVFQ.js → ids-chunk-R7DQUY6T.js} +1 -1
  154. package/chunks/{ids-chunk-WRDLKHAY.js → ids-chunk-RQ4MRT3F.js} +1 -1
  155. package/chunks/{ids-chunk-IPMHRQJM.js → ids-chunk-RR3AXU6W.js} +1 -1
  156. package/chunks/{ids-chunk-6QW6I7CD.js → ids-chunk-RUS6UGIC.js} +1 -1
  157. package/chunks/{ids-chunk-CSUD66FD.js → ids-chunk-S2HGNZEL.js} +1 -1
  158. package/chunks/ids-chunk-S7QBQ5NO.js +1 -0
  159. package/chunks/{ids-chunk-ILDHCEWC.js → ids-chunk-SEEUKRUP.js} +1 -1
  160. package/chunks/{ids-chunk-OHHMFIPS.js → ids-chunk-SFFCFWLW.js} +1 -1
  161. package/chunks/{ids-chunk-CCTW467M.js → ids-chunk-SHMSP2JX.js} +1 -1
  162. package/chunks/{ids-chunk-PTKDJC65.js → ids-chunk-SJG3VS7X.js} +1 -1
  163. package/chunks/{ids-chunk-FK2EWGJP.js → ids-chunk-SNMPJ2EL.js} +1 -1
  164. package/chunks/{ids-chunk-PSHN7TH4.js → ids-chunk-SZU7LSLR.js} +1 -1
  165. package/chunks/{ids-chunk-I7K67WE3.js → ids-chunk-TEB7LZVC.js} +1 -1
  166. package/chunks/{ids-chunk-PGV24BMG.js → ids-chunk-TFQO6DIH.js} +5 -1
  167. package/chunks/ids-chunk-TNY7PO2H.js +6 -0
  168. package/chunks/{ids-chunk-NDHVZWPS.js → ids-chunk-TQODDXGP.js} +1 -1
  169. package/chunks/{ids-chunk-DQ3W6N74.js → ids-chunk-TUC4DVKB.js} +13 -4
  170. package/chunks/{ids-chunk-KIXXS6JW.js → ids-chunk-U2XHCHSC.js} +1 -1
  171. package/chunks/{ids-chunk-ZFPWTKZB.js → ids-chunk-UDL63KRW.js} +1 -1
  172. package/chunks/{ids-chunk-HN5HJWK7.js → ids-chunk-UI37MMCU.js} +1 -1
  173. package/chunks/{ids-chunk-AEVEB3MG.js → ids-chunk-UKXRNWTJ.js} +1 -1
  174. package/chunks/{ids-chunk-Q33LSCUG.js → ids-chunk-UOTH4V73.js} +1 -1
  175. package/chunks/{ids-chunk-VPEGYCSK.js → ids-chunk-UPZ75MWX.js} +1 -1
  176. package/chunks/{ids-chunk-SSD7HQ7O.js → ids-chunk-UUJZAKUK.js} +1 -1
  177. package/chunks/{ids-chunk-IHXHGNTG.js → ids-chunk-UVJVMVGS.js} +1 -1
  178. package/chunks/{ids-chunk-33VHI6P7.js → ids-chunk-UYTGXMHL.js} +1 -1
  179. package/chunks/{ids-chunk-G23EWPPX.js → ids-chunk-UYUYFPOX.js} +1 -1
  180. package/chunks/{ids-chunk-XSHFSOSV.js → ids-chunk-V7DNZ5M7.js} +1 -1
  181. package/chunks/{ids-chunk-25SRTZ6U.js → ids-chunk-VBPGS62U.js} +1 -1
  182. package/chunks/{ids-chunk-U7L4RGHJ.js → ids-chunk-VEJKDH5D.js} +1 -1
  183. package/chunks/{ids-chunk-O4KDSUPY.js → ids-chunk-VP4AQN3F.js} +1 -1
  184. package/chunks/{ids-chunk-VBD5RPHP.js → ids-chunk-VRJV46ZQ.js} +1 -1
  185. package/chunks/{ids-chunk-PMVHMH6O.js → ids-chunk-VS6WHR32.js} +1 -1
  186. package/chunks/{ids-chunk-I32WP4R5.js → ids-chunk-VUSBSOI4.js} +1 -1
  187. package/chunks/{ids-chunk-7T34YH47.js → ids-chunk-VX4DQS4S.js} +1 -1
  188. package/chunks/{ids-chunk-LMTNAVYV.js → ids-chunk-W5DKOEIG.js} +2 -3
  189. package/chunks/{ids-chunk-4KRUIHUA.js → ids-chunk-W7ZULA5J.js} +1 -1
  190. package/chunks/{ids-chunk-4DEZ46GD.js → ids-chunk-WHZOUL6L.js} +1 -1
  191. package/chunks/{ids-chunk-66BUJJVR.js → ids-chunk-WLTGGHKX.js} +1 -1
  192. package/chunks/{ids-chunk-KHHRSPU7.js → ids-chunk-WPHUCAXM.js} +2 -2
  193. package/chunks/{ids-chunk-NJCTO5GT.js → ids-chunk-WWEUHHFZ.js} +1 -1
  194. package/chunks/{ids-chunk-QBCXVHQY.js → ids-chunk-WXQAVX2X.js} +1 -1
  195. package/chunks/{ids-chunk-HGMFTBXR.js → ids-chunk-X2BHPGXR.js} +1 -1
  196. package/chunks/{ids-chunk-3RJXTQ2K.js → ids-chunk-X3RETV3F.js} +1 -1
  197. package/chunks/{ids-chunk-A6NEJE6L.js → ids-chunk-XCOJA25U.js} +1 -1
  198. package/chunks/{ids-chunk-7DLBMSFF.js → ids-chunk-XWAUF52T.js} +1 -1
  199. package/chunks/{ids-chunk-ZFOVLUPL.js → ids-chunk-YROSUNNR.js} +1 -1
  200. package/chunks/{ids-chunk-C25WLYXD.js → ids-chunk-YTSJC4NJ.js} +1 -1
  201. package/chunks/{ids-chunk-QG2SZ4A5.js → ids-chunk-YZNLJXWS.js} +1 -1
  202. package/chunks/{ids-chunk-5I27CH7Z.js → ids-chunk-Z3YDQQZE.js} +2 -3
  203. package/chunks/{ids-chunk-MAWZP6O2.js → ids-chunk-Z7FTYLPD.js} +1 -1
  204. package/chunks/{ids-chunk-2DYNX2IJ.js → ids-chunk-ZBJ4VMLH.js} +1 -1
  205. package/chunks/{ids-chunk-MH4PN77L.js → ids-chunk-ZBNPUZX2.js} +1 -1
  206. package/chunks/{ids-chunk-VILET7LB.js → ids-chunk-ZNXQ3E7E.js} +1 -1
  207. package/chunks/ids-chunk-ZSCQJAJX.js +95 -0
  208. package/chunks/{ids-chunk-IQQ7OIDF.js → ids-chunk-ZWGXKJXK.js} +1 -1
  209. package/chunks/ids-chunk-ZYQ6HV5M.js +284 -0
  210. package/components/ids-about/ids-about.js +1 -1
  211. package/components/ids-accordion/ids-accordion-header.js +1 -1
  212. package/components/ids-accordion/ids-accordion-panel.js +1 -1
  213. package/components/ids-accordion/ids-accordion-section.js +1 -1
  214. package/components/ids-accordion/ids-accordion.css +63 -132
  215. package/components/ids-accordion/ids-accordion.js +1 -1
  216. package/components/ids-action-panel/ids-action-panel.js +1 -1
  217. package/components/ids-action-sheet/ids-action-sheet.js +1 -1
  218. package/components/ids-alert/ids-alert.js +1 -1
  219. package/components/ids-app-menu/ids-app-menu-container.js +1 -1
  220. package/components/ids-app-menu/ids-app-menu.js +1 -1
  221. package/components/ids-area-chart/ids-area-chart.js +1 -1
  222. package/components/ids-axis-chart/ids-axis-chart.js +1 -1
  223. package/components/ids-badge/ids-badge.js +1 -1
  224. package/components/ids-bar-chart/ids-bar-chart.js +1 -1
  225. package/components/ids-block-grid/ids-block-grid-item.js +1 -1
  226. package/components/ids-block-grid/ids-block-grid.css +62 -20
  227. package/components/ids-block-grid/ids-block-grid.js +1 -1
  228. package/components/ids-box/ids-box.js +1 -1
  229. package/components/ids-breadcrumb/ids-breadcrumb.js +1 -1
  230. package/components/ids-button/ids-button-common.js +1 -1
  231. package/components/ids-button/ids-button.d.ts +2 -6
  232. package/components/ids-button/ids-button.js +1 -1
  233. package/components/ids-calendar/ids-calendar-event.js +1 -1
  234. package/components/ids-calendar/ids-calendar.css +179 -270
  235. package/components/ids-calendar/ids-calendar.js +1 -1
  236. package/components/ids-card/ids-card-action.js +1 -1
  237. package/components/ids-card/ids-card.js +1 -1
  238. package/components/ids-checkbox/ids-checkbox-group.js +1 -1
  239. package/components/ids-checkbox/ids-checkbox.css +9 -0
  240. package/components/ids-checkbox/ids-checkbox.js +1 -1
  241. package/components/ids-color/ids-color.js +1 -1
  242. package/components/ids-color-picker/ids-color-picker.css +1 -2
  243. package/components/ids-color-picker/ids-color-picker.js +1 -1
  244. package/components/ids-container/ids-container.js +1 -1
  245. package/components/ids-counts/ids-counts.js +1 -1
  246. package/components/ids-data-grid/ids-data-grid-cell.js +1 -1
  247. package/components/ids-data-grid/ids-data-grid-editors.js +1 -1
  248. package/components/ids-data-grid/ids-data-grid-empty-message.js +1 -1
  249. package/components/ids-data-grid/ids-data-grid-filters.js +1 -1
  250. package/components/ids-data-grid/ids-data-grid-formatters.js +1 -1
  251. package/components/ids-data-grid/ids-data-grid-header.js +1 -1
  252. package/components/ids-data-grid/ids-data-grid-row.js +1 -1
  253. package/components/ids-data-grid/ids-data-grid-save-settings-mixin.js +1 -1
  254. package/components/ids-data-grid/ids-data-grid-search-mixin.js +1 -1
  255. package/components/ids-data-grid/ids-data-grid-tooltip-mixin.js +1 -1
  256. package/components/ids-data-grid/ids-data-grid.js +1 -1
  257. package/components/ids-data-label/ids-data-label.js +1 -1
  258. package/components/ids-date-picker/ids-date-picker-common.js +1 -1
  259. package/components/ids-date-picker/ids-date-picker-popup.js +1 -1
  260. package/components/ids-date-picker/ids-date-picker.css +30 -174
  261. package/components/ids-date-picker/ids-date-picker.js +1 -1
  262. package/components/ids-date-picker/ids-month-year-picklist.js +1 -1
  263. package/components/ids-draggable/ids-draggable.js +1 -1
  264. package/components/ids-drawer/ids-drawer.js +1 -1
  265. package/components/ids-dropdown/ids-dropdown-attributes-mixin.js +1 -1
  266. package/components/ids-dropdown/ids-dropdown-common.d.ts +1 -0
  267. package/components/ids-dropdown/ids-dropdown-common.js +1 -1
  268. package/components/ids-dropdown/ids-dropdown-list.js +1 -1
  269. package/components/ids-dropdown/ids-dropdown.d.ts +14 -2
  270. package/components/ids-dropdown/ids-dropdown.js +1 -1
  271. package/components/ids-editor/ids-editor-clean-utils.js +1 -1
  272. package/components/ids-editor/ids-editor-handle-paste.js +1 -1
  273. package/components/ids-editor/ids-editor-selection-utils.js +1 -1
  274. package/components/ids-editor/ids-editor-shared.js +1 -1
  275. package/components/ids-editor/ids-editor.css +4 -4
  276. package/components/ids-editor/ids-editor.d.ts +15 -10
  277. package/components/ids-editor/ids-editor.js +1 -1
  278. package/components/ids-empty-message/ids-empty-message.js +1 -1
  279. package/components/ids-error-page/ids-error-page.js +1 -1
  280. package/components/ids-expandable-area/ids-expandable-area.js +1 -1
  281. package/components/ids-fieldset/ids-fieldset.js +1 -1
  282. package/components/ids-filter-field/ids-filter-field.js +1 -1
  283. package/components/ids-form/ids-form.js +1 -1
  284. package/components/ids-global/ids-global.js +1 -1
  285. package/components/ids-header/ids-header.js +1 -1
  286. package/components/ids-hidden/ids-hidden.js +1 -1
  287. package/components/ids-hierarchy/ids-hierarchy-item.js +1 -1
  288. package/components/ids-hierarchy/ids-hierarchy-legend-item.js +1 -1
  289. package/components/ids-hierarchy/ids-hierarchy-legend.js +1 -1
  290. package/components/ids-hierarchy/ids-hierarchy.css +4 -120
  291. package/components/ids-hierarchy/ids-hierarchy.js +1 -1
  292. package/components/ids-home-page/ids-home-page.js +1 -1
  293. package/components/ids-hyperlink/ids-hyperlink.css +14 -166
  294. package/components/ids-hyperlink/ids-hyperlink.js +1 -1
  295. package/components/ids-hyperlink/ids-link-list.js +1 -1
  296. package/components/ids-icon/ids-icon.js +1 -1
  297. package/components/ids-image/ids-image.js +1 -1
  298. package/components/ids-input/ids-autocomplete.js +1 -1
  299. package/components/ids-input/ids-input.css +1 -2
  300. package/components/ids-input/ids-input.js +1 -1
  301. package/components/ids-input-group/ids-input-group.js +1 -1
  302. package/components/ids-layout-flex/ids-layout-flex-item.js +1 -1
  303. package/components/ids-layout-flex/ids-layout-flex.js +1 -1
  304. package/components/ids-layout-flex/ids-scroll-container.js +1 -1
  305. package/components/ids-layout-grid/ids-layout-grid-cell.js +1 -1
  306. package/components/ids-layout-grid/ids-layout-grid-common.js +1 -1
  307. package/components/ids-layout-grid/ids-layout-grid.css +9 -19290
  308. package/components/ids-layout-grid/ids-layout-grid.js +1 -1
  309. package/components/ids-line-chart/ids-line-chart.js +1 -1
  310. package/components/ids-list-box/ids-list-box-option.js +1 -1
  311. package/components/ids-list-box/ids-list-box.css +63 -53
  312. package/components/ids-list-box/ids-list-box.js +1 -1
  313. package/components/ids-list-builder/ids-list-builder.js +1 -1
  314. package/components/ids-list-view/ids-list-view-group-header.js +1 -1
  315. package/components/ids-list-view/ids-list-view-item.js +1 -1
  316. package/components/ids-list-view/ids-list-view-search-mixin.js +1 -1
  317. package/components/ids-list-view/ids-list-view.css +118 -114
  318. package/components/ids-list-view/ids-list-view.js +1 -1
  319. package/components/ids-loading-indicator/ids-loading-indicator-attributes.js +1 -1
  320. package/components/ids-loading-indicator/ids-loading-indicator.js +1 -1
  321. package/components/ids-locale/ids-locale-number-options.d.ts +1 -1
  322. package/components/ids-locale/ids-locale.d.ts +1 -1
  323. package/components/ids-lookup/ids-lookup.js +1 -1
  324. package/components/ids-masthead/ids-masthead.js +1 -1
  325. package/components/ids-menu/ids-menu-group.js +1 -1
  326. package/components/ids-menu/ids-menu-header.js +1 -1
  327. package/components/ids-menu/ids-menu-item.js +1 -1
  328. package/components/ids-menu/ids-menu.css +316 -10
  329. package/components/ids-menu/ids-menu.js +1 -1
  330. package/components/ids-menu-button/ids-menu-button-attributes.js +1 -1
  331. package/components/ids-menu-button/ids-menu-button.js +1 -1
  332. package/components/ids-message/ids-message.js +1 -1
  333. package/components/ids-modal/ids-modal-button.js +1 -1
  334. package/components/ids-modal/ids-modal.css +91 -16
  335. package/components/ids-modal/ids-modal.js +1 -1
  336. package/components/ids-modal/ids-overlay.js +1 -1
  337. package/components/ids-module-nav/ids-module-nav-bar.js +1 -1
  338. package/components/ids-module-nav/ids-module-nav-button.js +1 -1
  339. package/components/ids-module-nav/ids-module-nav-content.js +1 -1
  340. package/components/ids-module-nav/ids-module-nav-display-mode-mixin.js +1 -1
  341. package/components/ids-module-nav/ids-module-nav-item.js +1 -1
  342. package/components/ids-module-nav/ids-module-nav-settings.js +1 -1
  343. package/components/ids-module-nav/ids-module-nav-switcher.js +1 -1
  344. package/components/ids-module-nav/ids-module-nav-text-display-mixin.js +1 -1
  345. package/components/ids-module-nav/ids-module-nav-user.js +1 -1
  346. package/components/ids-module-nav/ids-module-nav.css +277 -7
  347. package/components/ids-module-nav/ids-module-nav.js +1 -1
  348. package/components/ids-month-view/ids-month-view-attribute-mixin.js +1 -1
  349. package/components/ids-month-view/ids-month-view.js +1 -1
  350. package/components/ids-multiselect/ids-multiselect.css +13 -6
  351. package/components/ids-multiselect/ids-multiselect.d.ts +13 -1
  352. package/components/ids-multiselect/ids-multiselect.js +1 -1
  353. package/components/ids-notification-banner/ids-notification-banner.d.ts +8 -0
  354. package/components/ids-notification-banner/ids-notification-banner.js +1 -1
  355. package/components/ids-pager/ids-pager-button.js +1 -1
  356. package/components/ids-pager/ids-pager-dropdown.js +1 -1
  357. package/components/ids-pager/ids-pager-input.js +1 -1
  358. package/components/ids-pager/ids-pager-number-list.js +1 -1
  359. package/components/ids-pager/ids-pager.css +33 -33
  360. package/components/ids-pager/ids-pager.js +1 -1
  361. package/components/ids-pie-chart/ids-pie-chart.js +1 -1
  362. package/components/ids-popup/ids-picker-popup.js +1 -1
  363. package/components/ids-popup/ids-popup-attributes.js +1 -1
  364. package/components/ids-popup/ids-popup.js +1 -1
  365. package/components/ids-popup-menu/ids-popup-menu.js +1 -1
  366. package/components/ids-process-indicator/ids-process-indicator-step.js +1 -1
  367. package/components/ids-process-indicator/ids-process-indicator.js +1 -1
  368. package/components/ids-progress-bar/ids-progress-bar.js +1 -1
  369. package/components/ids-progress-chart/ids-progress-chart.js +1 -1
  370. package/components/ids-radio/ids-radio-group.js +1 -1
  371. package/components/ids-radio/ids-radio.js +1 -1
  372. package/components/ids-rating/ids-rating.js +1 -1
  373. package/components/ids-scroll-view/ids-scroll-view.js +1 -1
  374. package/components/ids-search-field/ids-search-field.css +11 -2
  375. package/components/ids-search-field/ids-search-field.js +1 -1
  376. package/components/ids-separator/ids-separator.js +1 -1
  377. package/components/ids-skip-link/ids-skip-link.js +1 -1
  378. package/components/ids-slider/ids-slider.js +1 -1
  379. package/components/ids-spinbox/ids-spinbox.css +1 -2
  380. package/components/ids-spinbox/ids-spinbox.js +1 -1
  381. package/components/ids-splitter/ids-splitter-local-storage.js +1 -1
  382. package/components/ids-splitter/ids-splitter-pane.d.ts +10 -1
  383. package/components/ids-splitter/ids-splitter-pane.js +1 -1
  384. package/components/ids-splitter/ids-splitter.js +1 -1
  385. package/components/ids-stats/ids-stats.js +1 -1
  386. package/components/ids-step-chart/ids-step-chart.js +1 -1
  387. package/components/ids-swaplist/ids-swaplist.js +1 -1
  388. package/components/ids-swappable/ids-swappable-item.js +1 -1
  389. package/components/ids-swappable/ids-swappable.css +18 -62
  390. package/components/ids-swappable/ids-swappable.js +1 -1
  391. package/components/ids-swipe-action/ids-swipe-action.js +1 -1
  392. package/components/ids-switch/ids-switch.js +1 -1
  393. package/components/ids-tabs/ids-tab-content.js +1 -1
  394. package/components/ids-tabs/ids-tab-divider.js +1 -1
  395. package/components/ids-tabs/ids-tab-more.js +1 -1
  396. package/components/ids-tabs/ids-tab.js +1 -1
  397. package/components/ids-tabs/ids-tabs-context.js +1 -1
  398. package/components/ids-tabs/ids-tabs.js +1 -1
  399. package/components/ids-tag/ids-tag-list.js +1 -1
  400. package/components/ids-tag/ids-tag.js +1 -1
  401. package/components/ids-text/ids-text.css +4 -0
  402. package/components/ids-text/ids-text.js +1 -1
  403. package/components/ids-textarea/ids-textarea.css +1 -2
  404. package/components/ids-textarea/ids-textarea.js +1 -1
  405. package/components/ids-theme-switcher/ids-theme-switcher.js +1 -1
  406. package/components/ids-time-picker/ids-time-picker-common.js +1 -1
  407. package/components/ids-time-picker/ids-time-picker-popup.js +1 -1
  408. package/components/ids-time-picker/ids-time-picker.css +40 -49
  409. package/components/ids-time-picker/ids-time-picker.js +1 -1
  410. package/components/ids-toast/ids-toast-message.js +1 -1
  411. package/components/ids-toast/ids-toast.css +33 -97
  412. package/components/ids-toast/ids-toast.js +1 -1
  413. package/components/ids-toggle-button/ids-toggle-button.js +1 -1
  414. package/components/ids-toolbar/ids-toolbar-more-actions.js +1 -1
  415. package/components/ids-toolbar/ids-toolbar-section.js +1 -1
  416. package/components/ids-toolbar/ids-toolbar.css +82 -57
  417. package/components/ids-toolbar/ids-toolbar.js +1 -1
  418. package/components/ids-tooltip/ids-tooltip.js +1 -1
  419. package/components/ids-tree/ids-tree-node.js +1 -1
  420. package/components/ids-tree/ids-tree.js +1 -1
  421. package/components/ids-treemap/ids-treemap.js +1 -1
  422. package/components/ids-trigger-field/ids-trigger-button.js +1 -1
  423. package/components/ids-trigger-field/ids-trigger-field.css +1419 -929
  424. package/components/ids-trigger-field/ids-trigger-field.js +1 -1
  425. package/components/ids-upload/ids-upload.js +1 -1
  426. package/components/ids-upload-advanced/ids-upload-advanced-file.js +1 -1
  427. package/components/ids-upload-advanced/ids-upload-advanced.js +1 -1
  428. package/components/ids-virtual-scroll/ids-virtual-scroll.js +1 -1
  429. package/components/ids-week-view/ids-week-view.js +1 -1
  430. package/components/ids-widget/ids-widget.js +1 -1
  431. package/components/ids-wizard/ids-wizard-step.js +1 -1
  432. package/components/ids-wizard/ids-wizard.js +1 -1
  433. package/core/ids-attributes.d.ts +2 -1
  434. package/core/ids-attributes.js +1 -1
  435. package/core/ids-element.js +1 -1
  436. package/custom-elements.json +18063 -17923
  437. package/enterprise-wc.js +1 -1
  438. package/mixins/ids-attachment-mixin/ids-attachment-mixin.js +1 -1
  439. package/mixins/ids-breakpoint-mixin/ids-breakpoint-mixin.js +1 -1
  440. package/mixins/ids-calendar-events-mixin/ids-calendar-events-mixin.js +1 -1
  441. package/mixins/ids-chart-legend-mixin/ids-chart-legend-mixin.js +1 -1
  442. package/mixins/ids-chart-selection-mixin/ids-chart-selection-mixin.js +1 -1
  443. package/mixins/ids-clearable-mixin/ids-clearable-mixin.js +1 -1
  444. package/mixins/ids-color-variant-mixin/ids-color-variant-mixin.js +1 -1
  445. package/mixins/ids-date-attribute-mixin/ids-date-attribute-mixin.js +1 -1
  446. package/mixins/ids-dirty-tracker-mixin/ids-dirty-tracker-mixin.js +1 -1
  447. package/mixins/ids-field-height-mixin/ids-field-height-mixin.js +1 -1
  448. package/mixins/ids-focus-capture-mixin/ids-focus-capture-mixin.js +1 -1
  449. package/mixins/ids-form-input-mixin/ids-form-input-mixin.js +1 -1
  450. package/mixins/ids-hide-focus-mixin/ids-hide-focus-mixin.js +1 -1
  451. package/mixins/ids-hitbox-mixin/ids-hitbox-mixin.js +1 -1
  452. package/mixins/ids-label-state-mixin/ids-label-state-common.js +1 -1
  453. package/mixins/ids-label-state-mixin/ids-label-state-mixin.js +1 -1
  454. package/mixins/ids-label-state-mixin/ids-label-state-parent-mixin.js +1 -1
  455. package/mixins/ids-loading-indicator-mixin/ids-loading-indicator-mixin.js +1 -1
  456. package/mixins/ids-locale-mixin/ids-locale-mixin.js +1 -1
  457. package/mixins/ids-mask-mixin/ids-mask-mixin.js +1 -1
  458. package/mixins/ids-orientation-mixin/ids-orientation-mixin.js +1 -1
  459. package/mixins/ids-pager-mixin/ids-pager-mixin.js +1 -1
  460. package/mixins/ids-popup-interactions-mixin/ids-popup-interactions-mixin.js +1 -1
  461. package/mixins/ids-selection-mixin/ids-selection-mixin.js +1 -1
  462. package/mixins/ids-tooltip-mixin/ids-tooltip-mixin.js +1 -1
  463. package/mixins/ids-validation-mixin/ids-validation-mixin.js +1 -1
  464. package/mixins/ids-xss-mixin/ids-xss-mixin.js +1 -1
  465. package/package.json +1 -1
  466. package/themes/ids-theme-default-contrast.css +1 -0
  467. package/themes/ids-theme-default-core.css +1 -0
  468. package/themes/ids-theme-default-dark.css +1 -0
  469. package/themes/ids-theme-default-light.css +1 -0
  470. package/utils/ids-device-env-specs-utils/ids-device-env-specs-utils.js +1 -1
  471. package/vscode.html-custom-data.json +1 -1
  472. package/chunks/ids-chunk-ACEINGV4.js +0 -302
  473. package/chunks/ids-chunk-CII5AGBC.js +0 -279
  474. package/chunks/ids-chunk-DAJONKYT.js +0 -4
  475. package/chunks/ids-chunk-M6POM3T4.js +0 -298
  476. package/chunks/ids-chunk-NLSWGLYJ.js +0 -95
  477. package/chunks/ids-chunk-TQZ2W2KP.js +0 -1
package/components/ids-trigger-field/ids-trigger-field.css CHANGED
@@ -1,1105 +1,1595 @@
1
- @charset "UTF-8";
2
1
  /**
3
- * Css for clearable mixin
2
+ * Ids Button Component CSS
3
+ * (Includes standard and icon button rules)
4
4
  */
5
- .ids-input .ids-input-field .btn-clear,
6
- .ids-input .ids-textarea-field .btn-clear,
7
- .ids-textarea .ids-input-field .btn-clear,
8
- .ids-textarea .ids-textarea-field .btn-clear {
9
- outline: 0;
10
- }
11
- .ids-input .ids-input-field .btn-clear.is-empty,
12
- .ids-input .ids-textarea-field .btn-clear.is-empty,
13
- .ids-textarea .ids-input-field .btn-clear.is-empty,
14
- .ids-textarea .ids-textarea-field .btn-clear.is-empty {
15
- display: none;
16
- }
17
- .ids-input .ids-input-field .btn-clear [slot=icon],
18
- .ids-input .ids-textarea-field .btn-clear [slot=icon],
19
- .ids-textarea .ids-input-field .btn-clear [slot=icon],
20
- .ids-textarea .ids-textarea-field .btn-clear [slot=icon] {
21
- margin-inline-start: 0;
22
- color: inherit;
23
- }
24
- .ids-input.has-clearable .btn-clear,
25
- .ids-textarea.has-clearable .btn-clear {
26
- margin-inline-end: 4px;
27
- }
28
- .ids-input.has-clearable .btn-clear.is-empty,
29
- .ids-textarea.has-clearable .btn-clear.is-empty {
30
- display: initial;
31
- visibility: hidden;
32
- pointer-events: none;
5
+ /**
6
+ * Ids Button Sass mixins, used in Ids Button CSS to define base styles.
7
+ */
8
+ /**
9
+ * Provides standardized padding rules for certain button types
10
+ */
11
+ /**
12
+ * Provides the standard color rules for all regular buttons
13
+ */
14
+ /**
15
+ * Provides the standard color rules for buttons that need box shadow
16
+ */
17
+ :root {
18
+ display: inline-flex;
19
+ vertical-align: middle;
33
20
  }
34
-
35
- .ids-trigger-field .ids-input-field.has-clearable {
36
- padding-inline-end: 55px;
21
+ :host ::slotted(span) {
22
+ vertical-align: bottom;
37
23
  }
38
- .ids-trigger-field .ids-input-field.has-clearable ~ .btn-clear {
39
- margin-top: 0;
40
- right: -8px;
24
+ :host ::slotted(span),
25
+ :host ::slotted(ids-text) {
26
+ color: currentColor;
27
+ align-self: center;
41
28
  }
42
-
43
- .btn-clear[part=clearable-button] [slot=icon] {
44
- padding: 2px;
29
+ :host ::slotted(ids-icon) {
30
+ vertical-align: middle;
31
+ color: currentColor;
45
32
  }
46
-
47
- .icon-dirty {
33
+ :host ::slotted(span.audible) {
34
+ clip: rect(0, 0, 0, 0);
35
+ height: 0;
36
+ line-height: 0;
37
+ min-height: 0;
38
+ overflow: hidden;
39
+ padding: 0;
48
40
  position: absolute;
49
- color: var(--ids-color-yellow-30);
50
- top: 1px;
51
- }
52
- .icon-dirty[dir=rtl] {
53
- transform: rotate(90deg);
54
- top: 0;
55
- }
56
-
57
- .ids-color-picker .icon-dirty {
58
- margin-inline-start: 35px;
41
+ width: 1px;
59
42
  }
60
-
61
- .ids-color-picker.compact .icon-dirty {
62
- margin-inline-start: 27px;
43
+ :host button,
44
+ :host .ids-icon-button {
45
+ justify-content: center;
46
+ height: 100%;
47
+ width: 100%;
63
48
  }
64
49
 
65
- .ids-textarea .icon-dirty {
66
- top: 1px;
67
- margin-inline-start: 1px;
68
- }
69
- .ids-textarea .icon-dirty[dir=rtl] {
70
- top: 2px;
50
+ :host(.hidden) {
51
+ display: none;
71
52
  }
72
53
 
73
- .label-state-hidden .ids-label-text.empty::before {
74
- content: " ";
54
+ :host([system-button]) button:hover {
55
+ background-color: transparent;
56
+ border-color: transparent;
57
+ color: var(--ids-button-system-color-text-hover);
75
58
  }
76
59
 
77
- .label-state-collapsed .ids-label-text {
60
+ :host([hidden]) {
78
61
  display: none;
79
62
  }
80
63
 
81
- .validation-message {
82
- -webkit-font-smoothing: antialiased;
83
- -moz-osx-font-smoothing: grayscale;
84
- display: flex;
85
- font-family: var(--ids-font-family-default);
86
- margin-top: var(--ids-space-xxs);
87
- }
88
- .validation-message.has-custom-icon {
89
- color: var(--ids-icon-color-default);
90
- }
91
- .validation-message.disabled {
92
- color: var(--ids-input-color-text-disabled);
93
- }
94
- .validation-message .ids-icon {
95
- margin-inline-end: var(--ids-space-xxs);
96
- }
97
- .validation-message.alert {
98
- color: var(--ids-color-caution-default);
99
- }
100
- .validation-message.alert.disabled {
101
- color: var(--ids-color-yellow-30);
102
- }
103
- .validation-message.warning {
104
- color: var(--ids-color-warning-default);
105
- }
106
- .validation-message.warning.disabled {
107
- color: var(--ids-color-orange-30);
108
- }
109
- .validation-message.error {
110
- color: var(--ids-color-error-default);
111
- }
112
- .validation-message.error.disabled {
113
- color: var(--ids-color-red-30);
114
- }
115
- .validation-message.info {
116
- color: var(--ids-color-info-default);
117
- }
118
- .validation-message.info.disabled {
119
- color: var(--ids-color-blue-30);
120
- }
121
- .validation-message.success {
122
- color: var(--ids-color-success-default);
123
- }
124
- .validation-message.success.disabled {
125
- color: var(--ids-color-green-30);
126
- }
127
- .validation-message[hidden] {
128
- display: none;
64
+ button {
65
+ display: block;
129
66
  }
130
67
 
131
- /* stylelint-disable */
132
- /* stylelint-enable */
133
- /* in case of external label in compound component */
134
- .ids-label-text {
68
+ .ids-button,
69
+ .ids-toggle-button,
70
+ .ids-menu-button:not(.ids-icon-button),
71
+ .ids-modal-button {
135
72
  -webkit-font-smoothing: antialiased;
136
73
  -moz-osx-font-smoothing: grayscale;
137
- font-family: var(--ids-font-family-default);
138
- color: var(--ids-input-label-color-text-default);
139
- display: flex;
140
- margin-block-end: var(--ids-input-margin-bottom);
141
- align-items: baseline;
142
- justify-content: inherit;
143
- }
144
- .ids-label-text.empty::before {
145
- content: " ";
146
- }
147
- .ids-label-text.required::after {
148
- position: relative;
149
- font-family: var(--ids-font-family-default);
150
- margin-inline-start: var(--ids-space-xxxs);
151
- margin-inline-end: var(--ids-space-xxxs);
152
- font-size: var(--ids-font-size-50);
153
- color: var(--ids-input-required-indicator-color-text-default);
154
- content: "*";
155
- margin-top: -10px;
156
- top: 1px;
157
- line-height: 0;
158
- }
159
- .ids-label-text.required.no-required-indicator::after, .ids-label-text.required.empty::after {
160
- content: "";
161
- }
162
- .ids-label-text ids-text::part(text),
163
- .ids-label-text .ids-text {
164
- display: inline;
165
- }
166
-
167
- .disabled .ids-label-text {
168
- color: var(--ids-input-label-color-text-disabled);
169
- opacity: var(--ids-input-disabled-opacity);
170
- }
171
- .disabled .ids-label-text.required::after {
172
- color: var(--ids-input-required-indicator-color-text-disabled);
173
- }
174
-
175
- :root {
176
- display: block;
177
- max-width: var(--ids-input-width-full);
178
74
  }
179
- :host .ids-input {
180
- display: inline-block;
75
+ .ids-button .ids-icon,
76
+ .ids-toggle-button .ids-icon,
77
+ .ids-menu-button:not(.ids-icon-button) .ids-icon,
78
+ .ids-modal-button .ids-icon {
79
+ display: inline-flex;
80
+ place-self: center;
81
+ vertical-align: middle;
181
82
  }
182
83
 
183
- :host([size=full]) {
184
- width: 100%;
185
- }
186
-
187
- :host([label-wrap=ellipsis]) .ids-label-text {
188
- display: block;
84
+ .ids-button,
85
+ .ids-toggle-button,
86
+ .ids-menu-button {
87
+ box-shadow: var(--ids-shadow-none);
88
+ font-weight: var(--ids-font-weight-normal);
89
+ font-family: var(--ids-font-family-default);
90
+ font-size: var(--ids-font-size-40);
189
91
  overflow: hidden;
190
- text-overflow: ellipsis;
92
+ padding-bottom: calc(var(--ids-space-xs) - 2px);
93
+ padding-top: calc(var(--ids-space-xs) - 2px);
94
+ position: relative;
95
+ border: 1px solid transparent;
96
+ background-color: transparent;
97
+ color: var(--ids-button-color-text-default);
98
+ transition: background-color var(--ids-motion-duration) var(--ids-motion-ease), border-color var(--ids-motion-duration) var(--ids-motion-ease), color var(--ids-motion-duration) var(--ids-motion-ease), opacity var(--ids-motion-duration) var(--ids-motion-ease);
191
99
  white-space: nowrap;
100
+ display: inline-flex;
101
+ font-weight: var(--ids-button-tertiary-font-weight);
102
+ border-radius: var(--ids-button-radius);
103
+ background-color: var(--ids-button-tertiary-color-background-default);
104
+ border-color: var(--ids-button-tertiary-color-border-default);
105
+ color: var(--ids-button-tertiary-color-text-default);
106
+ }
107
+ .ids-button, .ids-button::before, .ids-button::after,
108
+ .ids-toggle-button,
109
+ .ids-toggle-button::before,
110
+ .ids-toggle-button::after,
111
+ .ids-menu-button,
112
+ .ids-menu-button::before,
113
+ .ids-menu-button::after {
114
+ box-sizing: border-box;
192
115
  }
193
- :host([label-wrap=ellipsis]) .ids-label-text.required {
194
- padding-inline-end: 8px;
195
- }
196
- :host([label-wrap=ellipsis]) .ids-label-text.required::after {
197
- display: block;
198
- margin-top: unset;
199
- margin-inline-start: 100%;
200
- top: -8px;
116
+ .ids-button *,
117
+ .ids-toggle-button *,
118
+ .ids-menu-button * {
119
+ pointer-events: none;
201
120
  }
202
-
203
- :host([label-wrap=ellipsis-no-stretch]) .ids-label-text {
204
- display: block;
205
- overflow: hidden;
206
- text-overflow: ellipsis;
207
- white-space: nowrap;
121
+ .ids-button:focus,
122
+ .ids-toggle-button:focus,
123
+ .ids-menu-button:focus {
124
+ outline: none;
125
+ outline-color: transparent;
208
126
  }
209
- :host([label-wrap=ellipsis-no-stretch]) .ids-label-text.required {
210
- padding-inline-end: 8px;
127
+ .ids-button:not([disabled]),
128
+ .ids-toggle-button:not([disabled]),
129
+ .ids-menu-button:not([disabled]) {
130
+ cursor: var(--ids-cursor-pointer);
211
131
  }
212
- :host([label-wrap=ellipsis-no-stretch]) .ids-label-text.required::after {
213
- display: block;
214
- margin-top: unset;
215
- margin-inline-start: 100%;
216
- top: -8px;
132
+ .ids-button span,
133
+ .ids-toggle-button span,
134
+ .ids-menu-button span {
135
+ vertical-align: bottom;
217
136
  }
218
- :host([label-wrap=ellipsis-no-stretch]) .xs .ids-label-text {
219
- max-width: calc(var(--ids-input-width-10) - 2px);
137
+ .ids-button span.audible,
138
+ .ids-toggle-button span.audible,
139
+ .ids-menu-button span.audible {
140
+ clip: rect(0, 0, 0, 0);
141
+ height: 0;
142
+ line-height: 0;
143
+ min-height: 0;
144
+ overflow: hidden;
145
+ padding: 0;
146
+ position: absolute;
147
+ width: 1px;
220
148
  }
221
- :host([label-wrap=ellipsis-no-stretch]) .sm .ids-label-text {
222
- max-width: calc(var(--ids-input-width-20) - 2px - 8px);
149
+ .ids-button:not(.ids-icon-button):not(.align-icon-end) ::slotted(ids-icon:not([icon=insights-smart-panel])),
150
+ .ids-toggle-button:not(.ids-icon-button):not(.align-icon-end) ::slotted(ids-icon:not([icon=insights-smart-panel])),
151
+ .ids-menu-button:not(.ids-icon-button):not(.align-icon-end) ::slotted(ids-icon:not([icon=insights-smart-panel])) {
152
+ margin-inline-end: calc(var(--ids-space-xxs) + 3px);
153
+ }
154
+ .ids-button .ids-icon,
155
+ .ids-toggle-button .ids-icon,
156
+ .ids-menu-button .ids-icon {
157
+ vertical-align: middle;
158
+ }
159
+ .ids-button.align-icon-end ::slotted(ids-icon),
160
+ .ids-toggle-button.align-icon-end ::slotted(ids-icon),
161
+ .ids-menu-button.align-icon-end ::slotted(ids-icon) {
162
+ margin-inline-start: var(--ids-space-xxs);
163
+ }
164
+ .ids-button.content-align-start,
165
+ .ids-toggle-button.content-align-start,
166
+ .ids-menu-button.content-align-start {
167
+ justify-content: start;
168
+ }
169
+ .ids-button.content-align-end,
170
+ .ids-toggle-button.content-align-end,
171
+ .ids-menu-button.content-align-end {
172
+ justify-content: end;
173
+ }
174
+ .ids-button.no-margins,
175
+ .ids-toggle-button.no-margins,
176
+ .ids-menu-button.no-margins {
177
+ margin-inline: var(--ids-space-none);
178
+ }
179
+ .ids-button:not(.no-margins),
180
+ .ids-toggle-button:not(.no-margins),
181
+ .ids-menu-button:not(.no-margins) {
182
+ margin: var(--ids-button-alt-margin);
183
+ }
184
+ .ids-button.field-height-xxs:not(.btn-secondary):not(.no-margins),
185
+ .ids-toggle-button.field-height-xxs:not(.btn-secondary):not(.no-margins),
186
+ .ids-menu-button.field-height-xxs:not(.btn-secondary):not(.no-margins) {
187
+ margin-block-start: 3px;
188
+ margin-inline-end: -2px;
189
+ height: 22px;
190
+ width: 22px;
191
+ }
192
+ .ids-button ::slotted(span),
193
+ .ids-toggle-button ::slotted(span),
194
+ .ids-menu-button ::slotted(span) {
195
+ font-weight: inherit !important;
196
+ }
197
+ .ids-button:not(.hide-focus).is-active:not([readonly]), .ids-button:not(.hide-focus).is-focused:not([readonly]), .ids-button:not(.hide-focus):focus:not([readonly]), .ids-button:not(.hide-focus):focus-within:not([readonly]),
198
+ .ids-toggle-button:not(.hide-focus).is-active:not([readonly]),
199
+ .ids-toggle-button:not(.hide-focus).is-focused:not([readonly]),
200
+ .ids-toggle-button:not(.hide-focus):focus:not([readonly]),
201
+ .ids-toggle-button:not(.hide-focus):focus-within:not([readonly]),
202
+ .ids-menu-button:not(.hide-focus).is-active:not([readonly]),
203
+ .ids-menu-button:not(.hide-focus).is-focused:not([readonly]),
204
+ .ids-menu-button:not(.hide-focus):focus:not([readonly]),
205
+ .ids-menu-button:not(.hide-focus):focus-within:not([readonly]) {
206
+ border-color: var(--ids-button-tertiary-color-border-focus);
207
+ }
208
+ .ids-button:hover,
209
+ .ids-toggle-button:hover,
210
+ .ids-menu-button:hover {
211
+ color: var(--ids-button-tertiary-color-text-hover);
212
+ background-color: var(--ids-button-tertiary-color-background-hover);
213
+ border-color: var(--ids-button-tertiary-color-border-hover);
214
+ }
215
+ .ids-button[disabled],
216
+ .ids-toggle-button[disabled],
217
+ .ids-menu-button[disabled] {
218
+ color: var(--ids-button-tertiary-color-text-disabled);
219
+ background-color: var(--ids-button-tertiary-color-background-disabled);
220
+ border-color: var(--ids-button-tertiary-color-border-disabled);
221
+ opacity: var(--ids-button-tertiary-opacity-disabled);
222
+ }
223
+ .ids-button:active:not([disabled]),
224
+ .ids-toggle-button:active:not([disabled]),
225
+ .ids-menu-button:active:not([disabled]) {
226
+ background-color: var(--ids-button-tertiary-color-background-pressed);
227
+ border-color: var(--ids-button-tertiary-color-border-pressed);
228
+ color: var(--ids-button-tertiary-color-text-pressed);
229
+ }
230
+ .ids-button.btn-tertiary-destructive,
231
+ .ids-toggle-button.btn-tertiary-destructive,
232
+ .ids-menu-button.btn-tertiary-destructive {
233
+ background-color: var(--ids-button-destructive-tertiary-color-background-default);
234
+ border-color: var(--ids-button-destructive-tertiary-color-border-default);
235
+ color: var(--ids-button-destructive-tertiary-color-text-default);
236
+ }
237
+ .ids-button.btn-tertiary-destructive:not(.hide-focus).is-active, .ids-button.btn-tertiary-destructive:not(.hide-focus).is-focused, .ids-button.btn-tertiary-destructive:not(.hide-focus).focus-within, .ids-button.btn-tertiary-destructive:not(.hide-focus):focus,
238
+ .ids-toggle-button.btn-tertiary-destructive:not(.hide-focus).is-active,
239
+ .ids-toggle-button.btn-tertiary-destructive:not(.hide-focus).is-focused,
240
+ .ids-toggle-button.btn-tertiary-destructive:not(.hide-focus).focus-within,
241
+ .ids-toggle-button.btn-tertiary-destructive:not(.hide-focus):focus,
242
+ .ids-menu-button.btn-tertiary-destructive:not(.hide-focus).is-active,
243
+ .ids-menu-button.btn-tertiary-destructive:not(.hide-focus).is-focused,
244
+ .ids-menu-button.btn-tertiary-destructive:not(.hide-focus).focus-within,
245
+ .ids-menu-button.btn-tertiary-destructive:not(.hide-focus):focus {
246
+ border-color: var(--ids-button-destructive-tertiary-color-border-focus);
247
+ }
248
+ .ids-button.btn-tertiary-destructive:hover,
249
+ .ids-toggle-button.btn-tertiary-destructive:hover,
250
+ .ids-menu-button.btn-tertiary-destructive:hover {
251
+ background-color: var(--ids-button-destructive-tertiary-color-background-hover);
252
+ border-color: var(--ids-button-destructive-tertiary-color-border-hover);
253
+ color: var(--ids-button-destructive-tertiary-color-text-hover);
254
+ }
255
+ .ids-button.btn-tertiary-destructive[disabled],
256
+ .ids-toggle-button.btn-tertiary-destructive[disabled],
257
+ .ids-menu-button.btn-tertiary-destructive[disabled] {
258
+ color: var(--ids-button-destructive-tertiary-color-text-disabled);
259
+ background-color: var(--ids-button-destructive-tertiary-color-background-disabled);
260
+ border-color: var(--ids-button-destructive-tertiary-color-border-disabled);
261
+ }
262
+ .ids-button.btn-primary,
263
+ .ids-toggle-button.btn-primary,
264
+ .ids-menu-button.btn-primary {
265
+ background-color: var(--ids-button-primary-color-background-default);
266
+ border-color: var(--ids-button-primary-color-border-default);
267
+ border: 1px solid var(--ids-button-primary-color-border-default);
268
+ color: var(--ids-button-primary-color-text-default);
269
+ padding-bottom: calc(var(--ids-space-xs) - 2px);
270
+ padding-top: calc(var(--ids-space-xs) - 2px);
271
+ }
272
+ .ids-button.btn-primary:not(.hide-focus).is-active, .ids-button.btn-primary:not(.hide-focus).is-focused, .ids-button.btn-primary:not(.hide-focus).focus-within, .ids-button.btn-primary:not(.hide-focus):focus,
273
+ .ids-toggle-button.btn-primary:not(.hide-focus).is-active,
274
+ .ids-toggle-button.btn-primary:not(.hide-focus).is-focused,
275
+ .ids-toggle-button.btn-primary:not(.hide-focus).focus-within,
276
+ .ids-toggle-button.btn-primary:not(.hide-focus):focus,
277
+ .ids-menu-button.btn-primary:not(.hide-focus).is-active,
278
+ .ids-menu-button.btn-primary:not(.hide-focus).is-focused,
279
+ .ids-menu-button.btn-primary:not(.hide-focus).focus-within,
280
+ .ids-menu-button.btn-primary:not(.hide-focus):focus {
281
+ border-color: var(--ids-button-primary-color-border-focus);
282
+ }
283
+ .ids-button.btn-primary:hover,
284
+ .ids-toggle-button.btn-primary:hover,
285
+ .ids-menu-button.btn-primary:hover {
286
+ background-color: var(--ids-button-primary-color-background-hover);
287
+ border-color: var(--ids-button-primary-color-border-hover);
288
+ }
289
+ .ids-button.btn-primary[disabled],
290
+ .ids-toggle-button.btn-primary[disabled],
291
+ .ids-menu-button.btn-primary[disabled] {
292
+ background-color: var(--ids-button-primary-color-background-disabled);
293
+ border-color: var(--ids-button-primary-color-border-disabled);
294
+ color: var(--ids-button-primary-color-text-disabled);
295
+ opacity: var(--ids-button-primary-opacity-disabled);
296
+ }
297
+ .ids-button.btn-primary:active:not([disabled]),
298
+ .ids-toggle-button.btn-primary:active:not([disabled]),
299
+ .ids-menu-button.btn-primary:active:not([disabled]) {
300
+ background-color: var(--ids-button-primary-color-background-pressed);
301
+ border-color: var(--ids-button-primary-color-border-pressed);
302
+ color: var(--ids-button-primary-color-text-pressed);
303
+ }
304
+ .ids-button.btn-primary-destructive,
305
+ .ids-toggle-button.btn-primary-destructive,
306
+ .ids-menu-button.btn-primary-destructive {
307
+ background-color: var(--ids-button-destructive-color-background-default);
308
+ border-color: var(--ids-button-destructive-color-border-default);
309
+ color: var(--ids-button-destructive-color-text-default);
310
+ }
311
+ .ids-button.btn-primary-destructive:not(.hide-focus).is-active, .ids-button.btn-primary-destructive:not(.hide-focus).is-focused, .ids-button.btn-primary-destructive:not(.hide-focus).focus-within, .ids-button.btn-primary-destructive:not(.hide-focus):focus,
312
+ .ids-toggle-button.btn-primary-destructive:not(.hide-focus).is-active,
313
+ .ids-toggle-button.btn-primary-destructive:not(.hide-focus).is-focused,
314
+ .ids-toggle-button.btn-primary-destructive:not(.hide-focus).focus-within,
315
+ .ids-toggle-button.btn-primary-destructive:not(.hide-focus):focus,
316
+ .ids-menu-button.btn-primary-destructive:not(.hide-focus).is-active,
317
+ .ids-menu-button.btn-primary-destructive:not(.hide-focus).is-focused,
318
+ .ids-menu-button.btn-primary-destructive:not(.hide-focus).focus-within,
319
+ .ids-menu-button.btn-primary-destructive:not(.hide-focus):focus {
320
+ border-color: var(--ids-button-destructive-color-border-focus);
321
+ }
322
+ .ids-button.btn-primary-destructive:hover,
323
+ .ids-toggle-button.btn-primary-destructive:hover,
324
+ .ids-menu-button.btn-primary-destructive:hover {
325
+ background-color: var(--ids-button-destructive-color-background-hover);
326
+ border-color: var(--ids-button-destructive-color-border-hover);
327
+ color: var(--ids-button-destructive-color-text-hover);
328
+ }
329
+ .ids-button.btn-primary-destructive[disabled],
330
+ .ids-toggle-button.btn-primary-destructive[disabled],
331
+ .ids-menu-button.btn-primary-destructive[disabled] {
332
+ background-color: var(--ids-button-destructive-color-background-disabled);
333
+ border-color: var(--ids-button-destructive-color-border-disabled);
334
+ color: var(--ids-button-destructive-color-text-disabled);
335
+ opacity: var(--ids-button-destructive-opacity-disabled);
336
+ }
337
+ @keyframes dot-flashing {
338
+ 0% {
339
+ background-color: #fff;
340
+ }
341
+ 50%, 100% {
342
+ background-color: rgba(255, 255, 255, 0.4);
343
+ }
223
344
  }
224
- :host([label-wrap=ellipsis-no-stretch]) .mm .ids-label-text {
225
- max-width: calc(var(--ids-input-width-30) - 2px - 8px);
345
+ @keyframes dot-flashing-colors {
346
+ 0% {
347
+ background-color: #0B9789;
348
+ }
349
+ 50%, 100% {
350
+ background-color: #1A3362;
351
+ }
226
352
  }
227
- :host([label-wrap=ellipsis-no-stretch]) .md .ids-label-text {
228
- max-width: calc(var(--ids-input-width-40) - 2px - 8px);
353
+ .ids-button .loading-dots,
354
+ .ids-toggle-button .loading-dots,
355
+ .ids-menu-button .loading-dots {
356
+ display: none;
357
+ position: relative;
358
+ flex-direction: row;
359
+ gap: 2px;
360
+ padding-inline-start: 7px;
361
+ padding-inline-end: 3px;
229
362
  }
230
- :host([label-wrap=ellipsis-no-stretch]) .lg .ids-label-text {
231
- max-width: calc(var(--ids-input-width-50) - 2px - 8px);
363
+ .ids-button .loading-dots .dot,
364
+ .ids-toggle-button .loading-dots .dot,
365
+ .ids-menu-button .loading-dots .dot {
366
+ display: inline-flex;
367
+ position: relative;
368
+ width: 3px;
369
+ height: 3px;
370
+ border-radius: 5px;
371
+ background-color: var(--ids-button-ai-color-loading-dot-default);
372
+ color: var(--ids-button-ai-color-loading-dot-default);
373
+ }
374
+ .ids-button.btn-primary-generative-ai,
375
+ .ids-toggle-button.btn-primary-generative-ai,
376
+ .ids-menu-button.btn-primary-generative-ai {
377
+ background: border-box var(--ids-button-ai-color-background-default);
378
+ color: #FFF;
379
+ align-items: center;
380
+ min-width: 34px;
381
+ min-height: 34px;
382
+ }
383
+ .ids-button.btn-primary-generative-ai:hover,
384
+ .ids-toggle-button.btn-primary-generative-ai:hover,
385
+ .ids-menu-button.btn-primary-generative-ai:hover {
386
+ background: border-box var(--ids-button-ai-color-background-hover);
387
+ border-color: var(--ids-button-ai-color-border-hover);
388
+ }
389
+ .ids-button.btn-primary-generative-ai:active, .ids-button.btn-primary-generative-ai.gen-ai-active,
390
+ .ids-toggle-button.btn-primary-generative-ai:active,
391
+ .ids-toggle-button.btn-primary-generative-ai.gen-ai-active,
392
+ .ids-menu-button.btn-primary-generative-ai:active,
393
+ .ids-menu-button.btn-primary-generative-ai.gen-ai-active {
394
+ background: border-box var(--ids-button-ai-color-background-active);
395
+ color: var(--ids-button-ai-color-text-active);
396
+ }
397
+ .ids-button.btn-primary-generative-ai[disabled],
398
+ .ids-toggle-button.btn-primary-generative-ai[disabled],
399
+ .ids-menu-button.btn-primary-generative-ai[disabled] {
400
+ background: border-box var(--ids-button-ai-color-background-disabled);
401
+ border-color: var(--ids-button-ai-color-background-color-disabled);
402
+ }
403
+ .ids-button.btn-primary-generative-ai.color-variant-alternate-formatter, .ids-button.btn-primary-generative-ai.color-variant-alternate-formatter:hover,
404
+ .ids-toggle-button.btn-primary-generative-ai.color-variant-alternate-formatter,
405
+ .ids-toggle-button.btn-primary-generative-ai.color-variant-alternate-formatter:hover,
406
+ .ids-menu-button.btn-primary-generative-ai.color-variant-alternate-formatter,
407
+ .ids-menu-button.btn-primary-generative-ai.color-variant-alternate-formatter:hover {
408
+ color: #FFF;
409
+ min-height: var(--ids-button-formatter-size);
410
+ min-width: 34px;
411
+ }
412
+ .ids-button.btn-primary-generative-ai .loading-dots .dot:nth-child(1),
413
+ .ids-toggle-button.btn-primary-generative-ai .loading-dots .dot:nth-child(1),
414
+ .ids-menu-button.btn-primary-generative-ai .loading-dots .dot:nth-child(1) {
415
+ animation: dot-flashing 1s infinite alternate;
416
+ animation-delay: 0s;
417
+ }
418
+ .ids-button.btn-primary-generative-ai .loading-dots .dot:nth-child(2),
419
+ .ids-toggle-button.btn-primary-generative-ai .loading-dots .dot:nth-child(2),
420
+ .ids-menu-button.btn-primary-generative-ai .loading-dots .dot:nth-child(2) {
421
+ animation: dot-flashing 1s infinite linear alternate;
422
+ animation-delay: 0.5s;
423
+ }
424
+ .ids-button.btn-primary-generative-ai .loading-dots .dot:nth-child(3),
425
+ .ids-toggle-button.btn-primary-generative-ai .loading-dots .dot:nth-child(3),
426
+ .ids-menu-button.btn-primary-generative-ai .loading-dots .dot:nth-child(3) {
427
+ animation: dot-flashing 1s infinite alternate;
428
+ animation-delay: 1s;
429
+ }
430
+ .ids-button.btn-tertiary-generative-ai,
431
+ .ids-toggle-button.btn-tertiary-generative-ai,
432
+ .ids-menu-button.btn-tertiary-generative-ai {
433
+ background: var(--ids-button-ai-color-tertiary-background-default);
434
+ background-clip: text;
435
+ -webkit-text-fill-color: transparent;
436
+ align-items: center;
232
437
  }
233
- :host([label-wrap=ellipsis-no-stretch]) .full .ids-label-text {
234
- max-width: calc(100% - 8px);
438
+ .ids-button.btn-tertiary-generative-ai:hover,
439
+ .ids-toggle-button.btn-tertiary-generative-ai:hover,
440
+ .ids-menu-button.btn-tertiary-generative-ai:hover {
441
+ background: var(--ids-button-ai-color-tertiary-background-hover);
442
+ background-clip: text;
443
+ border-color: transparent;
444
+ -webkit-text-fill-color: transparent;
445
+ }
446
+ .ids-button.btn-tertiary-generative-ai ::slotted(ids-icon[icon=insights-smart-panel]),
447
+ .ids-toggle-button.btn-tertiary-generative-ai ::slotted(ids-icon[icon=insights-smart-panel]),
448
+ .ids-menu-button.btn-tertiary-generative-ai ::slotted(ids-icon[icon=insights-smart-panel]) {
449
+ --ids-button-ai-color-icon-primary: var(--ids-button-ai-color-icon-primary-hover);
450
+ --ids-button-ai-color-icon-secondary: var(--ids-button-ai-color-icon-secondary-hover);
451
+ }
452
+ .ids-button.btn-tertiary-generative-ai:active .ids-button.btn-tertiary-generative-ai.gen-ai-active,
453
+ .ids-button.btn-tertiary-generative-ai:active .ids-toggle-button.btn-tertiary-generative-ai.gen-ai-active,
454
+ .ids-button.btn-tertiary-generative-ai:active .ids-menu-button.btn-tertiary-generative-ai.gen-ai-active,
455
+ .ids-toggle-button.btn-tertiary-generative-ai:active .ids-button.btn-tertiary-generative-ai.gen-ai-active,
456
+ .ids-toggle-button.btn-tertiary-generative-ai:active .ids-toggle-button.btn-tertiary-generative-ai.gen-ai-active,
457
+ .ids-toggle-button.btn-tertiary-generative-ai:active .ids-menu-button.btn-tertiary-generative-ai.gen-ai-active,
458
+ .ids-menu-button.btn-tertiary-generative-ai:active .ids-button.btn-tertiary-generative-ai.gen-ai-active,
459
+ .ids-menu-button.btn-tertiary-generative-ai:active .ids-toggle-button.btn-tertiary-generative-ai.gen-ai-active,
460
+ .ids-menu-button.btn-tertiary-generative-ai:active .ids-menu-button.btn-tertiary-generative-ai.gen-ai-active {
461
+ background: var(--ids-button-ai-color-background-active);
462
+ background-clip: text;
463
+ -webkit-text-fill-color: transparent;
464
+ }
465
+ .ids-button.btn-tertiary-generative-ai[disabled],
466
+ .ids-toggle-button.btn-tertiary-generative-ai[disabled],
467
+ .ids-menu-button.btn-tertiary-generative-ai[disabled] {
468
+ background: var(--ids-button-tertiary-ai-color-background-disabled);
469
+ background-clip: text;
470
+ -webkit-text-fill-color: transparent;
471
+ opacity: var(--ids-button-ai-opacity-disabled);
472
+ }
473
+ .ids-button.btn-tertiary-generative-ai[disabled] ::slotted(ids-icon[icon=insights-smart-panel]),
474
+ .ids-toggle-button.btn-tertiary-generative-ai[disabled] ::slotted(ids-icon[icon=insights-smart-panel]),
475
+ .ids-menu-button.btn-tertiary-generative-ai[disabled] ::slotted(ids-icon[icon=insights-smart-panel]) {
476
+ opacity: var(--ids-button-ai-opacity-disabled);
477
+ }
478
+ .ids-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(1),
479
+ .ids-toggle-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(1),
480
+ .ids-menu-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(1) {
481
+ animation: dot-flashing-colors 1s infinite alternate;
482
+ animation-delay: 0s;
483
+ }
484
+ .ids-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(2),
485
+ .ids-toggle-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(2),
486
+ .ids-menu-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(2) {
487
+ animation: dot-flashing-colors 1s infinite linear alternate;
488
+ animation-delay: 0.5s;
489
+ }
490
+ .ids-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(3),
491
+ .ids-toggle-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(3),
492
+ .ids-menu-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(3) {
493
+ animation: dot-flashing-colors 1s infinite alternate;
494
+ animation-delay: 1s;
495
+ }
496
+ .ids-button.btn-secondary,
497
+ .ids-toggle-button.btn-secondary,
498
+ .ids-menu-button.btn-secondary {
499
+ background-color: var(--ids-button-secondary-color-background-default);
500
+ border-width: var(--ids-button-secondary-border-width);
501
+ border-color: var(--ids-button-secondary-color-border-default);
502
+ color: var(--ids-button-secondary-color-text-default);
503
+ }
504
+ .ids-button.btn-secondary:not(.hide-focus).is-active, .ids-button.btn-secondary:not(.hide-focus).is-focused, .ids-button.btn-secondary:not(.hide-focus).focus-within, .ids-button.btn-secondary:not(.hide-focus):focus,
505
+ .ids-toggle-button.btn-secondary:not(.hide-focus).is-active,
506
+ .ids-toggle-button.btn-secondary:not(.hide-focus).is-focused,
507
+ .ids-toggle-button.btn-secondary:not(.hide-focus).focus-within,
508
+ .ids-toggle-button.btn-secondary:not(.hide-focus):focus,
509
+ .ids-menu-button.btn-secondary:not(.hide-focus).is-active,
510
+ .ids-menu-button.btn-secondary:not(.hide-focus).is-focused,
511
+ .ids-menu-button.btn-secondary:not(.hide-focus).focus-within,
512
+ .ids-menu-button.btn-secondary:not(.hide-focus):focus {
513
+ background-color: var(--ids-button-secondary-color-background-focus);
514
+ border-color: var(--ids-button-secondary-color-border-focus);
515
+ }
516
+ .ids-button.btn-secondary:hover:not([disabled]),
517
+ .ids-toggle-button.btn-secondary:hover:not([disabled]),
518
+ .ids-menu-button.btn-secondary:hover:not([disabled]) {
519
+ background-color: var(--ids-button-secondary-color-background-hover);
520
+ border-color: var(--ids-button-secondary-color-border-hover);
521
+ color: var(--ids-button-secondary-color-text-hover);
522
+ }
523
+ .ids-button.btn-secondary[disabled],
524
+ .ids-toggle-button.btn-secondary[disabled],
525
+ .ids-menu-button.btn-secondary[disabled] {
526
+ background-color: var(--ids-button-secondary-color-background-disabled);
527
+ border-color: var(--ids-button-secondary-color-border-disabled);
528
+ color: var(--ids-button-secondary-color-text-disabled);
529
+ opacity: var(--ids-button-secondary-opacity-disabled);
530
+ }
531
+ .ids-button.btn-secondary:active:not([disabled]),
532
+ .ids-toggle-button.btn-secondary:active:not([disabled]),
533
+ .ids-menu-button.btn-secondary:active:not([disabled]) {
534
+ background-color: var(--ids-button-secondary-color-background-pressed);
535
+ border-color: var(--ids-button-secondary-color-border-pressed);
536
+ color: var(--ids-button-secondary-color-text-pressed);
537
+ }
538
+ .ids-button.color-variant-alternate:hover,
539
+ .ids-toggle-button.color-variant-alternate:hover,
540
+ .ids-menu-button.color-variant-alternate:hover {
541
+ background-color: rgba(0, 0, 0, 0.3);
542
+ }
543
+ .ids-button.color-variant-alternate.ids-trigger-button:not([readonly]):hover,
544
+ .ids-toggle-button.color-variant-alternate.ids-trigger-button:not([readonly]):hover,
545
+ .ids-menu-button.color-variant-alternate.ids-trigger-button:not([readonly]):hover {
546
+ background-color: var(--ids-search-field-header-color-icon-hover);
547
+ }
548
+ .ids-button.color-variant-app-menu:hover,
549
+ .ids-toggle-button.color-variant-app-menu:hover,
550
+ .ids-menu-button.color-variant-app-menu:hover {
551
+ background-color: rgba(255, 255, 255, 0.15);
552
+ }
553
+ .ids-button.color-variant-alternate, .ids-button.color-variant-alternate-formatter,
554
+ .ids-toggle-button.color-variant-alternate,
555
+ .ids-toggle-button.color-variant-alternate-formatter,
556
+ .ids-menu-button.color-variant-alternate,
557
+ .ids-menu-button.color-variant-alternate-formatter {
558
+ color: var(--ids-button-alternate-color-text-default);
559
+ opacity: 0.8;
560
+ }
561
+ .ids-button.color-variant-alternate:not(.hide-focus).is-active, .ids-button.color-variant-alternate:not(.hide-focus).is-focused, .ids-button.color-variant-alternate:not(.hide-focus).focus-within, .ids-button.color-variant-alternate:not(.hide-focus):focus, .ids-button.color-variant-alternate-formatter:not(.hide-focus).is-active, .ids-button.color-variant-alternate-formatter:not(.hide-focus).is-focused, .ids-button.color-variant-alternate-formatter:not(.hide-focus).focus-within, .ids-button.color-variant-alternate-formatter:not(.hide-focus):focus,
562
+ .ids-toggle-button.color-variant-alternate:not(.hide-focus).is-active,
563
+ .ids-toggle-button.color-variant-alternate:not(.hide-focus).is-focused,
564
+ .ids-toggle-button.color-variant-alternate:not(.hide-focus).focus-within,
565
+ .ids-toggle-button.color-variant-alternate:not(.hide-focus):focus,
566
+ .ids-toggle-button.color-variant-alternate-formatter:not(.hide-focus).is-active,
567
+ .ids-toggle-button.color-variant-alternate-formatter:not(.hide-focus).is-focused,
568
+ .ids-toggle-button.color-variant-alternate-formatter:not(.hide-focus).focus-within,
569
+ .ids-toggle-button.color-variant-alternate-formatter:not(.hide-focus):focus,
570
+ .ids-menu-button.color-variant-alternate:not(.hide-focus).is-active,
571
+ .ids-menu-button.color-variant-alternate:not(.hide-focus).is-focused,
572
+ .ids-menu-button.color-variant-alternate:not(.hide-focus).focus-within,
573
+ .ids-menu-button.color-variant-alternate:not(.hide-focus):focus,
574
+ .ids-menu-button.color-variant-alternate-formatter:not(.hide-focus).is-active,
575
+ .ids-menu-button.color-variant-alternate-formatter:not(.hide-focus).is-focused,
576
+ .ids-menu-button.color-variant-alternate-formatter:not(.hide-focus).focus-within,
577
+ .ids-menu-button.color-variant-alternate-formatter:not(.hide-focus):focus {
578
+ border-color: var(--ids-button-formatter-color-border-focus);
579
+ opacity: 1;
580
+ }
581
+ .ids-button.color-variant-alternate:hover, .ids-button.color-variant-alternate-formatter:hover,
582
+ .ids-toggle-button.color-variant-alternate:hover,
583
+ .ids-toggle-button.color-variant-alternate-formatter:hover,
584
+ .ids-menu-button.color-variant-alternate:hover,
585
+ .ids-menu-button.color-variant-alternate-formatter:hover {
586
+ background-color: var(--ids-button-formatter-color-background-hover);
587
+ border-color: transparent;
588
+ color: var(--ids-button-formatter-color-text-hover);
589
+ opacity: 1;
590
+ }
591
+ .ids-button.color-variant-alternate[disabled], .ids-button.color-variant-alternate-formatter[disabled],
592
+ .ids-toggle-button.color-variant-alternate[disabled],
593
+ .ids-toggle-button.color-variant-alternate-formatter[disabled],
594
+ .ids-menu-button.color-variant-alternate[disabled],
595
+ .ids-menu-button.color-variant-alternate-formatter[disabled] {
596
+ background-color: transparent;
597
+ opacity: var(--ids-button-formatter-opacity-disabled);
598
+ }
599
+ .ids-button.color-variant-alternate-formatter,
600
+ .ids-toggle-button.color-variant-alternate-formatter,
601
+ .ids-menu-button.color-variant-alternate-formatter {
602
+ background-color: var(--ids-button-formatter-color-background-default);
603
+ border-color: var(--ids-button-formatter-color-border-default);
604
+ color: var(--ids-button-formatter-color-text-default);
605
+ margin-top: 2px;
606
+ height: var(--ids-button-formatter-size);
607
+ min-width: var(--ids-button-formatter-size);
608
+ }
609
+ .ids-button.color-variant-alternate-formatter:not(.hide-focus).is-active, .ids-button.color-variant-alternate-formatter:not(.hide-focus).is-focused, .ids-button.color-variant-alternate-formatter:not(.hide-focus).focus-within, .ids-button.color-variant-alternate-formatter:not(.hide-focus):focus,
610
+ .ids-toggle-button.color-variant-alternate-formatter:not(.hide-focus).is-active,
611
+ .ids-toggle-button.color-variant-alternate-formatter:not(.hide-focus).is-focused,
612
+ .ids-toggle-button.color-variant-alternate-formatter:not(.hide-focus).focus-within,
613
+ .ids-toggle-button.color-variant-alternate-formatter:not(.hide-focus):focus,
614
+ .ids-menu-button.color-variant-alternate-formatter:not(.hide-focus).is-active,
615
+ .ids-menu-button.color-variant-alternate-formatter:not(.hide-focus).is-focused,
616
+ .ids-menu-button.color-variant-alternate-formatter:not(.hide-focus).focus-within,
617
+ .ids-menu-button.color-variant-alternate-formatter:not(.hide-focus):focus {
618
+ border-color: var(--ids-color-border-focus);
619
+ }
620
+ .ids-button.color-variant-alternate-formatter[disabled],
621
+ .ids-toggle-button.color-variant-alternate-formatter[disabled],
622
+ .ids-menu-button.color-variant-alternate-formatter[disabled] {
623
+ color: var(--ids-button-formatter-color-text-disabled);
624
+ }
625
+ .ids-button.color-variant-alternate-formatter:hover,
626
+ .ids-toggle-button.color-variant-alternate-formatter:hover,
627
+ .ids-menu-button.color-variant-alternate-formatter:hover {
628
+ background-color: var(--ids-button-formatter-color-background-hover);
629
+ color: var(--ids-button-formatter-color-text-hover);
630
+ }
631
+ .ids-button.color-variant-alternate-formatter.is-active,
632
+ .ids-toggle-button.color-variant-alternate-formatter.is-active,
633
+ .ids-menu-button.color-variant-alternate-formatter.is-active {
634
+ color: var(--ids-button-formatter-color-active);
635
+ }
636
+ .ids-button.color-variant-alternate-formatter.ids-menu-button.compact,
637
+ .ids-toggle-button.color-variant-alternate-formatter.ids-menu-button.compact,
638
+ .ids-menu-button.color-variant-alternate-formatter.ids-menu-button.compact {
639
+ padding: var(--ids-space-xxs);
640
+ padding-inline: var(--ids-space-xxs);
641
+ }
642
+ .ids-button.color-variant-alternate-formatter.ids-menu-button.compact.square,
643
+ .ids-toggle-button.color-variant-alternate-formatter.ids-menu-button.compact.square,
644
+ .ids-menu-button.color-variant-alternate-formatter.ids-menu-button.compact.square {
645
+ border-radius: var(--ids-border-radius-xs);
646
+ }
647
+ .ids-button.color-variant-alternate-formatter[editor-action=sourcemode], .ids-button.color-variant-alternate-formatter[editor-action=editormode],
648
+ .ids-toggle-button.color-variant-alternate-formatter[editor-action=sourcemode],
649
+ .ids-toggle-button.color-variant-alternate-formatter[editor-action=editormode],
650
+ .ids-menu-button.color-variant-alternate-formatter[editor-action=sourcemode],
651
+ .ids-menu-button.color-variant-alternate-formatter[editor-action=editormode] {
652
+ --ids-button-icon-width: 54px;
653
+ }
654
+ .ids-button.color-variant-module,
655
+ .ids-toggle-button.color-variant-module,
656
+ .ids-menu-button.color-variant-module {
657
+ color: var(--ids-button-module-color-text-default);
658
+ }
659
+ .ids-button.color-variant-module:not(.square),
660
+ .ids-toggle-button.color-variant-module:not(.square),
661
+ .ids-menu-button.color-variant-module:not(.square) {
662
+ border-radius: var(--ids-button-module-border-radius);
663
+ }
664
+ .ids-button.color-variant-module:hover,
665
+ .ids-toggle-button.color-variant-module:hover,
666
+ .ids-menu-button.color-variant-module:hover {
667
+ background-color: var(--ids-button-module-color-background-hover);
668
+ color: var(--ids-button-module-color-text-hover);
669
+ }
670
+ .ids-button:not(.no-padding),
671
+ .ids-toggle-button:not(.no-padding),
672
+ .ids-menu-button:not(.no-padding) {
673
+ padding-inline: var(--ids-button-padding-inline);
674
+ }
675
+ .ids-button.btn-tertiary, .ids-button.btn-tertiary-destructive,
676
+ .ids-toggle-button.btn-tertiary,
677
+ .ids-toggle-button.btn-tertiary-destructive,
678
+ .ids-menu-button.btn-tertiary,
679
+ .ids-menu-button.btn-tertiary-destructive {
680
+ padding-inline: var(--ids-space-12);
681
+ }
682
+ .ids-button.no-padding,
683
+ .ids-toggle-button.no-padding,
684
+ .ids-menu-button.no-padding {
685
+ padding-inline: var(--ids-space-12);
235
686
  }
236
687
 
237
- :host([label-wrap=wrap-no-stretch]) .xs .ids-label-text {
238
- max-width: calc(var(--ids-input-width-10) - 2px);
688
+ .ids-menu-button.is-active,
689
+ .ids-menu-button.is-active:hover {
690
+ background-color: var(--ids-button-menu-background-color-active);
691
+ color: var(--ids-button-menu-color-text-active);
239
692
  }
240
- :host([label-wrap=wrap-no-stretch]) .sm .ids-label-text {
241
- max-width: calc(var(--ids-input-width-20) - 2px - 8px);
242
- }
243
- :host([label-wrap=wrap-no-stretch]) .mm .ids-label-text {
244
- max-width: calc(var(--ids-input-width-30) - 2px - 8px);
245
- }
246
- :host([label-wrap=wrap-no-stretch]) .md .ids-label-text {
247
- max-width: calc(var(--ids-input-width-40) - 2px - 8px);
693
+
694
+ .ids-menu-button.formatter-width:not(.no-padding):not(.ids-icon-button) {
695
+ padding-inline-start: calc(var(--ids-space-xs) - 1px);
696
+ padding-inline-end: calc(var(--ids-space-xs) - 1px);
248
697
  }
249
- :host([label-wrap=wrap-no-stretch]) .lg .ids-label-text {
250
- max-width: calc(var(--ids-input-width-50) - 2px - 8px);
698
+ .ids-menu-button.formatter-width:not(.formatter-width-percentage) {
699
+ justify-content: normal;
251
700
  }
252
- :host([label-wrap=wrap-no-stretch]) .full .ids-label-text {
253
- max-width: calc(100% - 8px);
701
+ .ids-menu-button.formatter-width:not(.formatter-width-percentage) .ids-icon {
702
+ position: absolute;
703
+ inset-inline-end: var(--ids-space-xxs);
254
704
  }
255
705
 
256
- .ids-input {
706
+ .ids-icon-button {
707
+ box-shadow: var(--ids-shadow-none);
708
+ font-weight: var(--ids-font-weight-normal);
709
+ font-family: var(--ids-font-family-default);
710
+ font-size: var(--ids-font-size-40);
711
+ overflow: hidden;
712
+ padding-bottom: calc(var(--ids-space-xs) - 2px);
713
+ padding-top: calc(var(--ids-space-xs) - 2px);
257
714
  position: relative;
258
- display: block;
259
- margin-block-end: var(--ids-space-sm);
260
- max-width: var(--ids-input-width-full);
261
- /* stylelint-disable-next-line no-duplicate-selectors */
262
- }
263
- .ids-input .field-container {
264
- border: 1px solid;
265
- border-collapse: separate;
266
- border-radius: 2px;
715
+ border: 1px solid transparent;
716
+ background-color: transparent;
717
+ color: var(--ids-button-color-text-default);
718
+ transition: background-color var(--ids-motion-duration) var(--ids-motion-ease), border-color var(--ids-motion-duration) var(--ids-motion-ease), color var(--ids-motion-duration) var(--ids-motion-ease), opacity var(--ids-motion-duration) var(--ids-motion-ease);
719
+ white-space: nowrap;
720
+ display: inline-flex;
721
+ font-weight: var(--ids-button-tertiary-font-weight);
722
+ border-radius: var(--ids-button-radius);
723
+ background-color: var(--ids-button-tertiary-color-background-default);
724
+ border-color: var(--ids-button-tertiary-color-border-default);
725
+ color: var(--ids-button-tertiary-color-text-default);
726
+ padding-inline-start: var(--ids-button-icon-padding);
727
+ padding-inline-end: var(--ids-button-icon-padding);
728
+ padding-block-start: var(--ids-button-icon-padding);
729
+ padding-block-end: var(--ids-button-icon-padding);
730
+ }
731
+ .ids-icon-button, .ids-icon-button::before, .ids-icon-button::after {
267
732
  box-sizing: border-box;
268
- color: inherit;
269
- display: flex;
270
- align-items: center;
271
- margin: var(--ids-space-none);
272
- max-width: var(--ids-input-width-full);
273
- padding: var(--ids-space-none);
274
- position: relative;
275
- resize: none;
276
- text-align: left;
277
- transition: border var(--ids-motion-duration) var(--ids-motion-ease);
278
733
  }
279
- .ids-input .field-container.square {
280
- border-radius: 0;
734
+ .ids-icon-button * {
735
+ pointer-events: none;
281
736
  }
282
- .ids-input:focus-within .ids-input-field, .ids-input.readonly:focus-within .ids-input-field, .ids-input.is-active .ids-input-field {
737
+ .ids-icon-button:focus {
283
738
  outline: none;
284
739
  outline-color: transparent;
285
740
  }
286
- .ids-input:focus-within .field-container, .ids-input.readonly:focus-within .field-container, .ids-input.is-active .field-container {
287
- border-color: var(--ids-input-color-border-focus);
288
- box-shadow: var(--ids-input-color-border-shadow);
289
- }
290
- .ids-input .ids-icon.starting-icon {
291
- margin-inline-start: var(--ids-space-xs);
292
- }
293
- .ids-input .ids-icon.ending-icon {
294
- margin-inline-end: var(--ids-space-xs);
295
- }
296
- .ids-input .ids-input-field {
297
- -webkit-font-smoothing: antialiased;
298
- -moz-osx-font-smoothing: grayscale;
299
- box-sizing: border-box;
300
- background-color: transparent;
301
- border: none;
302
- font-family: var(--ids-font-family-default);
303
- padding-block-start: var(--ids-space-xxs);
304
- padding-block-end: var(--ids-space-xxs);
305
- padding-inline-start: var(--ids-space-12);
306
- padding-inline-end: var(--ids-space-12);
307
- font-size: var(--ids-input-font-size);
308
- width: 100%;
309
- appearance: none;
310
- color: currentColor;
311
- display: inline-block;
312
- height: fit-content;
313
- resize: none;
314
- text-align: left;
315
- text-overflow: ellipsis;
316
- }
317
- .ids-input .ids-input-field:focus-visible {
318
- outline: none;
319
- }
320
- .ids-input .ids-input-field.text-ellipsis {
321
- text-overflow: ellipsis;
741
+ .ids-icon-button:not([disabled]) {
742
+ cursor: var(--ids-cursor-pointer);
322
743
  }
323
- .ids-input .ids-input-field.start {
324
- text-align: start;
744
+ .ids-icon-button span {
745
+ vertical-align: bottom;
325
746
  }
326
- .ids-input .ids-input-field::placeholder {
327
- color: var(--ids-input-color-text-placeholder);
328
- }
329
- .ids-input .ids-input-field.center {
330
- text-align: center;
331
- }
332
- .ids-input .ids-input-field.end {
333
- text-align: end;
334
- }
335
- .ids-input .validation-message {
336
- margin-block-start: var(--ids-space-xxs);
337
- margin-bottom: 0;
338
- }
339
- .ids-input.no-margins, .ids-input.no-margins.compact {
340
- margin: 0;
341
- }
342
- .ids-input.no-margins.field-height-xs, .ids-input.no-margins.compact.field-height-xs {
343
- margin-block-end: 0;
344
- }
345
- .ids-input.no-margins .field-container, .ids-input.no-margins.compact .field-container {
346
- margin-bottom: 0;
347
- }
348
- .ids-input.no-margins .ids-input-field, .ids-input.no-margins.compact .ids-input-field {
349
- margin: 0;
350
- }
351
- .ids-input.no-margins .validation-message, .ids-input.no-margins.compact .validation-message {
352
- margin-bottom: 0;
353
- margin-block-start: var(--ids-space-xxs);
354
- }
355
- .ids-input.no-margins .ids-label-text.empty, .ids-input.no-margins.compact .ids-label-text.empty {
356
- margin: 0;
357
- visibility: hidden;
747
+ .ids-icon-button span.audible {
748
+ clip: rect(0, 0, 0, 0);
358
749
  height: 0;
750
+ line-height: 0;
751
+ min-height: 0;
752
+ overflow: hidden;
753
+ padding: 0;
754
+ position: absolute;
755
+ width: 1px;
359
756
  }
360
- .ids-input.xs .field-container {
361
- width: calc(var(--ids-input-width-10) - 2px);
362
- }
363
- .ids-input.sm .field-container {
364
- width: calc(var(--ids-input-width-20) - 2px);
365
- }
366
- .ids-input.mm .field-container {
367
- width: calc(var(--ids-input-width-30) - 2px);
757
+ .ids-icon-button:not(.ids-icon-button):not(.align-icon-end) ::slotted(ids-icon:not([icon=insights-smart-panel])) {
758
+ margin-inline-end: calc(var(--ids-space-xxs) + 3px);
759
+ }
760
+ .ids-icon-button .ids-icon {
761
+ vertical-align: middle;
368
762
  }
369
- .ids-input.md .field-container {
370
- width: calc(var(--ids-input-width-40) - 2px);
763
+ .ids-icon-button.align-icon-end ::slotted(ids-icon) {
764
+ margin-inline-start: var(--ids-space-xxs);
765
+ }
766
+ .ids-icon-button.content-align-start {
767
+ justify-content: start;
768
+ }
769
+ .ids-icon-button.content-align-end {
770
+ justify-content: end;
771
+ }
772
+ .ids-icon-button.no-margins {
773
+ margin-inline: var(--ids-space-none);
774
+ }
775
+ .ids-icon-button:not(.no-margins) {
776
+ margin: var(--ids-button-alt-margin);
777
+ }
778
+ .ids-icon-button.field-height-xxs:not(.btn-secondary):not(.no-margins) {
779
+ margin-block-start: 3px;
780
+ margin-inline-end: -2px;
781
+ height: 22px;
782
+ width: 22px;
783
+ }
784
+ .ids-icon-button ::slotted(span) {
785
+ font-weight: inherit !important;
786
+ }
787
+ .ids-icon-button:not(.hide-focus).is-active:not([readonly]), .ids-icon-button:not(.hide-focus).is-focused:not([readonly]), .ids-icon-button:not(.hide-focus):focus:not([readonly]), .ids-icon-button:not(.hide-focus):focus-within:not([readonly]) {
788
+ border-color: var(--ids-button-tertiary-color-border-focus);
789
+ }
790
+ .ids-icon-button:hover {
791
+ color: var(--ids-button-tertiary-color-text-hover);
792
+ background-color: var(--ids-button-tertiary-color-background-hover);
793
+ border-color: var(--ids-button-tertiary-color-border-hover);
794
+ }
795
+ .ids-icon-button[disabled] {
796
+ color: var(--ids-button-tertiary-color-text-disabled);
797
+ background-color: var(--ids-button-tertiary-color-background-disabled);
798
+ border-color: var(--ids-button-tertiary-color-border-disabled);
799
+ opacity: var(--ids-button-tertiary-opacity-disabled);
800
+ }
801
+ .ids-icon-button:active:not([disabled]) {
802
+ background-color: var(--ids-button-tertiary-color-background-pressed);
803
+ border-color: var(--ids-button-tertiary-color-border-pressed);
804
+ color: var(--ids-button-tertiary-color-text-pressed);
805
+ }
806
+ .ids-icon-button.btn-tertiary-destructive {
807
+ background-color: var(--ids-button-destructive-tertiary-color-background-default);
808
+ border-color: var(--ids-button-destructive-tertiary-color-border-default);
809
+ color: var(--ids-button-destructive-tertiary-color-text-default);
810
+ }
811
+ .ids-icon-button.btn-tertiary-destructive:not(.hide-focus).is-active, .ids-icon-button.btn-tertiary-destructive:not(.hide-focus).is-focused, .ids-icon-button.btn-tertiary-destructive:not(.hide-focus).focus-within, .ids-icon-button.btn-tertiary-destructive:not(.hide-focus):focus {
812
+ border-color: var(--ids-button-destructive-tertiary-color-border-focus);
813
+ }
814
+ .ids-icon-button.btn-tertiary-destructive:hover {
815
+ background-color: var(--ids-button-destructive-tertiary-color-background-hover);
816
+ border-color: var(--ids-button-destructive-tertiary-color-border-hover);
817
+ color: var(--ids-button-destructive-tertiary-color-text-hover);
818
+ }
819
+ .ids-icon-button.btn-tertiary-destructive[disabled] {
820
+ color: var(--ids-button-destructive-tertiary-color-text-disabled);
821
+ background-color: var(--ids-button-destructive-tertiary-color-background-disabled);
822
+ border-color: var(--ids-button-destructive-tertiary-color-border-disabled);
823
+ }
824
+ .ids-icon-button.btn-primary {
825
+ background-color: var(--ids-button-primary-color-background-default);
826
+ border-color: var(--ids-button-primary-color-border-default);
827
+ border: 1px solid var(--ids-button-primary-color-border-default);
828
+ color: var(--ids-button-primary-color-text-default);
829
+ padding-bottom: calc(var(--ids-space-xs) - 2px);
830
+ padding-top: calc(var(--ids-space-xs) - 2px);
831
+ }
832
+ .ids-icon-button.btn-primary:not(.hide-focus).is-active, .ids-icon-button.btn-primary:not(.hide-focus).is-focused, .ids-icon-button.btn-primary:not(.hide-focus).focus-within, .ids-icon-button.btn-primary:not(.hide-focus):focus {
833
+ border-color: var(--ids-button-primary-color-border-focus);
834
+ }
835
+ .ids-icon-button.btn-primary:hover {
836
+ background-color: var(--ids-button-primary-color-background-hover);
837
+ border-color: var(--ids-button-primary-color-border-hover);
838
+ }
839
+ .ids-icon-button.btn-primary[disabled] {
840
+ background-color: var(--ids-button-primary-color-background-disabled);
841
+ border-color: var(--ids-button-primary-color-border-disabled);
842
+ color: var(--ids-button-primary-color-text-disabled);
843
+ opacity: var(--ids-button-primary-opacity-disabled);
844
+ }
845
+ .ids-icon-button.btn-primary:active:not([disabled]) {
846
+ background-color: var(--ids-button-primary-color-background-pressed);
847
+ border-color: var(--ids-button-primary-color-border-pressed);
848
+ color: var(--ids-button-primary-color-text-pressed);
849
+ }
850
+ .ids-icon-button.btn-primary-destructive {
851
+ background-color: var(--ids-button-destructive-color-background-default);
852
+ border-color: var(--ids-button-destructive-color-border-default);
853
+ color: var(--ids-button-destructive-color-text-default);
854
+ }
855
+ .ids-icon-button.btn-primary-destructive:not(.hide-focus).is-active, .ids-icon-button.btn-primary-destructive:not(.hide-focus).is-focused, .ids-icon-button.btn-primary-destructive:not(.hide-focus).focus-within, .ids-icon-button.btn-primary-destructive:not(.hide-focus):focus {
856
+ border-color: var(--ids-button-destructive-color-border-focus);
857
+ }
858
+ .ids-icon-button.btn-primary-destructive:hover {
859
+ background-color: var(--ids-button-destructive-color-background-hover);
860
+ border-color: var(--ids-button-destructive-color-border-hover);
861
+ color: var(--ids-button-destructive-color-text-hover);
862
+ }
863
+ .ids-icon-button.btn-primary-destructive[disabled] {
864
+ background-color: var(--ids-button-destructive-color-background-disabled);
865
+ border-color: var(--ids-button-destructive-color-border-disabled);
866
+ color: var(--ids-button-destructive-color-text-disabled);
867
+ opacity: var(--ids-button-destructive-opacity-disabled);
868
+ }
869
+ @keyframes dot-flashing {
870
+ 0% {
871
+ background-color: #fff;
872
+ }
873
+ 50%, 100% {
874
+ background-color: rgba(255, 255, 255, 0.4);
875
+ }
371
876
  }
372
- .ids-input.lg .field-container {
373
- width: calc(var(--ids-input-width-50) - 2px);
877
+ @keyframes dot-flashing-colors {
878
+ 0% {
879
+ background-color: #0B9789;
880
+ }
881
+ 50%, 100% {
882
+ background-color: #1A3362;
883
+ }
374
884
  }
375
- .ids-input.full {
376
- display: block;
885
+ .ids-icon-button .loading-dots {
886
+ display: none;
887
+ position: relative;
888
+ flex-direction: row;
889
+ gap: 2px;
890
+ padding-inline-start: 7px;
891
+ padding-inline-end: 3px;
377
892
  }
378
- .ids-input.full .field-container {
379
- width: var(--ids-input-width-full);
893
+ .ids-icon-button .loading-dots .dot {
894
+ display: inline-flex;
895
+ position: relative;
896
+ width: 3px;
897
+ height: 3px;
898
+ border-radius: 5px;
899
+ background-color: var(--ids-button-ai-color-loading-dot-default);
900
+ color: var(--ids-button-ai-color-loading-dot-default);
901
+ }
902
+ .ids-icon-button.btn-primary-generative-ai {
903
+ background: border-box var(--ids-button-ai-color-background-default);
904
+ color: #FFF;
905
+ align-items: center;
906
+ min-width: 34px;
907
+ min-height: 34px;
908
+ }
909
+ .ids-icon-button.btn-primary-generative-ai:hover {
910
+ background: border-box var(--ids-button-ai-color-background-hover);
911
+ border-color: var(--ids-button-ai-color-border-hover);
912
+ }
913
+ .ids-icon-button.btn-primary-generative-ai:active, .ids-icon-button.btn-primary-generative-ai.gen-ai-active {
914
+ background: border-box var(--ids-button-ai-color-background-active);
915
+ color: var(--ids-button-ai-color-text-active);
916
+ }
917
+ .ids-icon-button.btn-primary-generative-ai[disabled] {
918
+ background: border-box var(--ids-button-ai-color-background-disabled);
919
+ border-color: var(--ids-button-ai-color-background-color-disabled);
920
+ }
921
+ .ids-icon-button.btn-primary-generative-ai.color-variant-alternate-formatter, .ids-icon-button.btn-primary-generative-ai.color-variant-alternate-formatter:hover {
922
+ color: #FFF;
923
+ min-height: var(--ids-button-formatter-size);
924
+ min-width: 34px;
925
+ }
926
+ .ids-icon-button.btn-primary-generative-ai .loading-dots .dot:nth-child(1) {
927
+ animation: dot-flashing 1s infinite alternate;
928
+ animation-delay: 0s;
929
+ }
930
+ .ids-icon-button.btn-primary-generative-ai .loading-dots .dot:nth-child(2) {
931
+ animation: dot-flashing 1s infinite linear alternate;
932
+ animation-delay: 0.5s;
933
+ }
934
+ .ids-icon-button.btn-primary-generative-ai .loading-dots .dot:nth-child(3) {
935
+ animation: dot-flashing 1s infinite alternate;
936
+ animation-delay: 1s;
937
+ }
938
+ .ids-icon-button.btn-tertiary-generative-ai {
939
+ background: var(--ids-button-ai-color-tertiary-background-default);
940
+ background-clip: text;
941
+ -webkit-text-fill-color: transparent;
942
+ align-items: center;
380
943
  }
381
- @media (max-width: 360px) {
382
- .ids-input .field-container {
383
- max-width: calc(var(--ids-input-width-30) - 2px);
384
- }
944
+ .ids-icon-button.btn-tertiary-generative-ai:hover {
945
+ background: var(--ids-button-ai-color-tertiary-background-hover);
946
+ background-clip: text;
947
+ border-color: transparent;
948
+ -webkit-text-fill-color: transparent;
949
+ }
950
+ .ids-icon-button.btn-tertiary-generative-ai ::slotted(ids-icon[icon=insights-smart-panel]) {
951
+ --ids-button-ai-color-icon-primary: var(--ids-button-ai-color-icon-primary-hover);
952
+ --ids-button-ai-color-icon-secondary: var(--ids-button-ai-color-icon-secondary-hover);
953
+ }
954
+ .ids-icon-button.btn-tertiary-generative-ai:active .ids-icon-button.btn-tertiary-generative-ai.gen-ai-active {
955
+ background: var(--ids-button-ai-color-background-active);
956
+ background-clip: text;
957
+ -webkit-text-fill-color: transparent;
958
+ }
959
+ .ids-icon-button.btn-tertiary-generative-ai[disabled] {
960
+ background: var(--ids-button-tertiary-ai-color-background-disabled);
961
+ background-clip: text;
962
+ -webkit-text-fill-color: transparent;
963
+ opacity: var(--ids-button-ai-opacity-disabled);
964
+ }
965
+ .ids-icon-button.btn-tertiary-generative-ai[disabled] ::slotted(ids-icon[icon=insights-smart-panel]) {
966
+ opacity: var(--ids-button-ai-opacity-disabled);
967
+ }
968
+ .ids-icon-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(1) {
969
+ animation: dot-flashing-colors 1s infinite alternate;
970
+ animation-delay: 0s;
971
+ }
972
+ .ids-icon-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(2) {
973
+ animation: dot-flashing-colors 1s infinite linear alternate;
974
+ animation-delay: 0.5s;
975
+ }
976
+ .ids-icon-button.btn-tertiary-generative-ai .loading-dots .dot:nth-child(3) {
977
+ animation: dot-flashing-colors 1s infinite alternate;
978
+ animation-delay: 1s;
979
+ }
980
+ .ids-icon-button.btn-secondary {
981
+ background-color: var(--ids-button-secondary-color-background-default);
982
+ border-width: var(--ids-button-secondary-border-width);
983
+ border-color: var(--ids-button-secondary-color-border-default);
984
+ color: var(--ids-button-secondary-color-text-default);
985
+ }
986
+ .ids-icon-button.btn-secondary:not(.hide-focus).is-active, .ids-icon-button.btn-secondary:not(.hide-focus).is-focused, .ids-icon-button.btn-secondary:not(.hide-focus).focus-within, .ids-icon-button.btn-secondary:not(.hide-focus):focus {
987
+ background-color: var(--ids-button-secondary-color-background-focus);
988
+ border-color: var(--ids-button-secondary-color-border-focus);
989
+ }
990
+ .ids-icon-button.btn-secondary:hover:not([disabled]) {
991
+ background-color: var(--ids-button-secondary-color-background-hover);
992
+ border-color: var(--ids-button-secondary-color-border-hover);
993
+ color: var(--ids-button-secondary-color-text-hover);
994
+ }
995
+ .ids-icon-button.btn-secondary[disabled] {
996
+ background-color: var(--ids-button-secondary-color-background-disabled);
997
+ border-color: var(--ids-button-secondary-color-border-disabled);
998
+ color: var(--ids-button-secondary-color-text-disabled);
999
+ opacity: var(--ids-button-secondary-opacity-disabled);
1000
+ }
1001
+ .ids-icon-button.btn-secondary:active:not([disabled]) {
1002
+ background-color: var(--ids-button-secondary-color-background-pressed);
1003
+ border-color: var(--ids-button-secondary-color-border-pressed);
1004
+ color: var(--ids-button-secondary-color-text-pressed);
1005
+ }
1006
+ .ids-icon-button.color-variant-alternate:hover {
1007
+ background-color: rgba(0, 0, 0, 0.3);
1008
+ }
1009
+ .ids-icon-button.color-variant-alternate.ids-trigger-button:not([readonly]):hover {
1010
+ background-color: var(--ids-search-field-header-color-icon-hover);
1011
+ }
1012
+ .ids-icon-button.color-variant-app-menu:hover {
1013
+ background-color: rgba(255, 255, 255, 0.15);
1014
+ }
1015
+ .ids-icon-button.color-variant-alternate, .ids-icon-button.color-variant-alternate-formatter {
1016
+ color: var(--ids-button-alternate-color-text-default);
1017
+ opacity: 0.8;
1018
+ }
1019
+ .ids-icon-button.color-variant-alternate:not(.hide-focus).is-active, .ids-icon-button.color-variant-alternate:not(.hide-focus).is-focused, .ids-icon-button.color-variant-alternate:not(.hide-focus).focus-within, .ids-icon-button.color-variant-alternate:not(.hide-focus):focus, .ids-icon-button.color-variant-alternate-formatter:not(.hide-focus).is-active, .ids-icon-button.color-variant-alternate-formatter:not(.hide-focus).is-focused, .ids-icon-button.color-variant-alternate-formatter:not(.hide-focus).focus-within, .ids-icon-button.color-variant-alternate-formatter:not(.hide-focus):focus {
1020
+ border-color: var(--ids-button-formatter-color-border-focus);
1021
+ opacity: 1;
1022
+ }
1023
+ .ids-icon-button.color-variant-alternate:hover, .ids-icon-button.color-variant-alternate-formatter:hover {
1024
+ background-color: var(--ids-button-formatter-color-background-hover);
1025
+ border-color: transparent;
1026
+ color: var(--ids-button-formatter-color-text-hover);
1027
+ opacity: 1;
385
1028
  }
386
- .ids-input.field-height-xs {
387
- margin-block-end: var(--ids-font-size-20);
1029
+ .ids-icon-button.color-variant-alternate[disabled], .ids-icon-button.color-variant-alternate-formatter[disabled] {
1030
+ background-color: transparent;
1031
+ opacity: var(--ids-button-formatter-opacity-disabled);
388
1032
  }
389
- .ids-input.field-height-xs .icon-dirty {
390
- left: -1px;
391
- top: -1px;
1033
+ .ids-icon-button.color-variant-alternate-formatter {
1034
+ background-color: var(--ids-button-formatter-color-background-default);
1035
+ border-color: var(--ids-button-formatter-color-border-default);
1036
+ color: var(--ids-button-formatter-color-text-default);
1037
+ margin-top: 2px;
1038
+ height: var(--ids-button-formatter-size);
1039
+ min-width: var(--ids-button-formatter-size);
392
1040
  }
393
- .ids-input.field-height-xs .ids-label-text {
394
- font-size: var(--ids-input-label-font-size);
1041
+ .ids-icon-button.color-variant-alternate-formatter:not(.hide-focus).is-active, .ids-icon-button.color-variant-alternate-formatter:not(.hide-focus).is-focused, .ids-icon-button.color-variant-alternate-formatter:not(.hide-focus).focus-within, .ids-icon-button.color-variant-alternate-formatter:not(.hide-focus):focus {
1042
+ border-color: var(--ids-color-border-focus);
395
1043
  }
396
- .ids-input.field-height-xs .ids-input-field {
397
- padding-inline-start: var(--ids-space-xxs);
398
- padding-inline-end: var(--ids-space-xxs);
399
- padding-top: 0;
400
- padding-bottom: 0;
401
- font-size: var(--ids-input-font-size-sm);
402
- height: calc(var(--ids-input-height-10) - 2px);
1044
+ .ids-icon-button.color-variant-alternate-formatter[disabled] {
1045
+ color: var(--ids-button-formatter-color-text-disabled);
403
1046
  }
404
- .ids-input.field-height-xs.no-margin-bottom {
405
- margin-bottom: 0;
1047
+ .ids-icon-button.color-variant-alternate-formatter:hover {
1048
+ background-color: var(--ids-button-formatter-color-background-hover);
1049
+ color: var(--ids-button-formatter-color-text-hover);
406
1050
  }
407
- .ids-input.field-height-xs.no-margin-bottom .field-container,
408
- .ids-input.field-height-xs.no-margin-bottom .ids-input-field {
409
- margin-bottom: 0;
1051
+ .ids-icon-button.color-variant-alternate-formatter.is-active {
1052
+ color: var(--ids-button-formatter-color-active);
410
1053
  }
411
- .ids-input.field-height-sm .ids-input-field {
412
- height: calc(var(--ids-input-height-20) - 2px);
1054
+ .ids-icon-button.color-variant-alternate-formatter.ids-menu-button.compact {
1055
+ padding: var(--ids-space-xxs);
1056
+ padding-inline: var(--ids-space-xxs);
413
1057
  }
414
- .ids-input.field-height-md .ids-input-field {
415
- height: calc(var(--ids-input-height-30) - 2px);
1058
+ .ids-icon-button.color-variant-alternate-formatter.ids-menu-button.compact.square {
1059
+ border-radius: var(--ids-border-radius-xs);
416
1060
  }
417
- .ids-input.field-height-lg .ids-input-field {
418
- height: calc(var(--ids-input-height-40) - 2px);
1061
+ .ids-icon-button.color-variant-alternate-formatter[editor-action=sourcemode], .ids-icon-button.color-variant-alternate-formatter[editor-action=editormode] {
1062
+ --ids-button-icon-width: 54px;
419
1063
  }
420
- .ids-input.compact {
421
- margin-block-end: var(--ids-font-size-20);
1064
+ .ids-icon-button.color-variant-module {
1065
+ color: var(--ids-button-module-color-text-default);
422
1066
  }
423
- .ids-input.compact .icon-dirty {
424
- left: -1px;
425
- top: -1px;
1067
+ .ids-icon-button.color-variant-module:not(.square) {
1068
+ border-radius: var(--ids-button-module-border-radius);
426
1069
  }
427
- .ids-input.compact .ids-label-text {
428
- font-size: var(--ids-input-label-font-size);
1070
+ .ids-icon-button.color-variant-module:hover {
1071
+ background-color: var(--ids-button-module-color-background-hover);
1072
+ color: var(--ids-button-module-color-text-hover);
429
1073
  }
430
- .ids-input.compact .ids-input-field {
431
- padding-inline-start: var(--ids-space-xxs);
432
- padding-inline-end: var(--ids-space-xxs);
433
- padding-top: 0;
434
- padding-bottom: 0;
435
- font-size: var(--ids-input-font-size-sm);
436
- height: calc(var(--ids-input-height-10) - 2px);
1074
+ .ids-icon-button:not(.no-padding) {
1075
+ padding-inline-start: var(--ids-button-icon-padding);
1076
+ padding-inline-end: var(--ids-button-icon-padding);
1077
+ padding-top: var(--ids-button-icon-padding);
1078
+ padding-bottom: var(--ids-button-icon-padding);
437
1079
  }
438
- .ids-input.compact.no-margin-bottom {
439
- margin-bottom: 0;
1080
+ .ids-icon-button:not(.no-padding):not(.ids-trigger-button) {
1081
+ height: var(--ids-button-icon-height);
1082
+ width: var(--ids-button-icon-width);
440
1083
  }
441
- .ids-input.compact.no-margin-bottom .field-container,
442
- .ids-input.compact.no-margin-bottom .ids-input-field {
443
- margin-bottom: 0;
444
- height: calc(var(--ids-input-height-10) - 2px);
1084
+ .ids-icon-button:not(.square) {
1085
+ border-radius: var(--ids-button-radius);
445
1086
  }
446
- .ids-input.color-variant-borderless {
447
- --ids-input-color-border-focus: transparent;
448
- margin: 1px;
1087
+ .ids-icon-button.square {
449
1088
  border-radius: 0;
450
1089
  }
451
- .ids-input.color-variant-borderless input {
452
- font-size: var(--ids-font-size-40);
1090
+ .ids-icon-button .ids-icon {
1091
+ display: block;
1092
+ padding-inline-start: 2px;
1093
+ font-size: 0;
1094
+ padding-block-start: 2px;
453
1095
  }
454
- .ids-input.color-variant-borderless slot[name=trigger-start],
455
- .ids-input.color-variant-borderless slot[name=trigger-end] {
456
- display: flex;
1096
+ .ids-icon-button span.audible {
1097
+ clip: rect(0, 0, 0, 0);
1098
+ height: 0;
1099
+ line-height: 0;
1100
+ min-height: 0;
1101
+ overflow: hidden;
1102
+ padding: 0;
1103
+ position: absolute;
1104
+ width: 1px;
457
1105
  }
458
- .ids-input.color-variant-borderless slot[name=trigger-end] {
459
- padding-inline-end: 3px;
1106
+ .ids-icon-button.no-margins {
1107
+ margin-inline-start: var(--ids-space-none);
1108
+ margin-inline-end: var(--ids-space-none);
460
1109
  }
461
- .ids-input.color-variant-borderless .icon-dirty {
462
- display: none;
1110
+
1111
+ .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus).is-active:not([readonly]), .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus).is-focused:not([readonly]), .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus).focus-within:not([readonly]), .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus):focus:not([readonly]),
1112
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus).is-active:not([readonly]),
1113
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus).is-focused:not([readonly]),
1114
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus).focus-within:not([readonly]),
1115
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus):focus:not([readonly]),
1116
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus).is-active:not([readonly]),
1117
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus).is-focused:not([readonly]),
1118
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus).focus-within:not([readonly]),
1119
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai):not(.hide-focus):focus:not([readonly]) {
1120
+ box-shadow: var(--ids-button-tertiary-shadow-focus);
1121
+ }
1122
+ .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus).is-active, .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus).is-focused, .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus).focus-within, .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus):focus,
1123
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus).is-active,
1124
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus).is-focused,
1125
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus).focus-within,
1126
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus):focus,
1127
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus).is-active,
1128
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus).is-focused,
1129
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus).focus-within,
1130
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate:not(.hide-focus):focus {
1131
+ box-shadow: var(--ids-box-shadow-inverse);
1132
+ }
1133
+ .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus).is-active, .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus).is-focused, .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus).focus-within, .ids-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus):focus,
1134
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus).is-active,
1135
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus).is-focused,
1136
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus).focus-within,
1137
+ .ids-icon-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus):focus,
1138
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus).is-active,
1139
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus).is-focused,
1140
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus).focus-within,
1141
+ .ids-menu-button:not(.btn-primary):not(.btn-secondary):not(.btn-primary-destructive):not(.btn-tertiary-destructive):not(.btn-primary-generative-ai):not(.btn-tertiary-generative-ai).color-variant-alternate-formatter:not(.hide-focus):focus {
1142
+ box-shadow: var(--ids-shadow-20);
1143
+ }
1144
+ .ids-button.btn-tertiary-destructive:not(.hide-focus).is-active, .ids-button.btn-tertiary-destructive:not(.hide-focus).is-focused, .ids-button.btn-tertiary-destructive:not(.hide-focus).focus-within, .ids-button.btn-tertiary-destructive:not(.hide-focus):focus,
1145
+ .ids-icon-button.btn-tertiary-destructive:not(.hide-focus).is-active,
1146
+ .ids-icon-button.btn-tertiary-destructive:not(.hide-focus).is-focused,
1147
+ .ids-icon-button.btn-tertiary-destructive:not(.hide-focus).focus-within,
1148
+ .ids-icon-button.btn-tertiary-destructive:not(.hide-focus):focus,
1149
+ .ids-menu-button.btn-tertiary-destructive:not(.hide-focus).is-active,
1150
+ .ids-menu-button.btn-tertiary-destructive:not(.hide-focus).is-focused,
1151
+ .ids-menu-button.btn-tertiary-destructive:not(.hide-focus).focus-within,
1152
+ .ids-menu-button.btn-tertiary-destructive:not(.hide-focus):focus {
1153
+ box-shadow: var(--ids-button-destructive-tertiary-shadow-focus);
1154
+ }
1155
+ .ids-button.btn-primary:not(.hide-focus).is-active, .ids-button.btn-primary:not(.hide-focus).is-focused, .ids-button.btn-primary:not(.hide-focus).focus-within, .ids-button.btn-primary:not(.hide-focus):focus,
1156
+ .ids-icon-button.btn-primary:not(.hide-focus).is-active,
1157
+ .ids-icon-button.btn-primary:not(.hide-focus).is-focused,
1158
+ .ids-icon-button.btn-primary:not(.hide-focus).focus-within,
1159
+ .ids-icon-button.btn-primary:not(.hide-focus):focus,
1160
+ .ids-menu-button.btn-primary:not(.hide-focus).is-active,
1161
+ .ids-menu-button.btn-primary:not(.hide-focus).is-focused,
1162
+ .ids-menu-button.btn-primary:not(.hide-focus).focus-within,
1163
+ .ids-menu-button.btn-primary:not(.hide-focus):focus {
1164
+ box-shadow: var(--ids-button-primary-shadow-focus);
1165
+ }
1166
+ .ids-button.btn-primary.color-variant-alternate:not(.hide-focus).is-active, .ids-button.btn-primary.color-variant-alternate:not(.hide-focus).is-focused, .ids-button.btn-primary.color-variant-alternate:not(.hide-focus).focus-within, .ids-button.btn-primary.color-variant-alternate:not(.hide-focus):focus,
1167
+ .ids-icon-button.btn-primary.color-variant-alternate:not(.hide-focus).is-active,
1168
+ .ids-icon-button.btn-primary.color-variant-alternate:not(.hide-focus).is-focused,
1169
+ .ids-icon-button.btn-primary.color-variant-alternate:not(.hide-focus).focus-within,
1170
+ .ids-icon-button.btn-primary.color-variant-alternate:not(.hide-focus):focus,
1171
+ .ids-menu-button.btn-primary.color-variant-alternate:not(.hide-focus).is-active,
1172
+ .ids-menu-button.btn-primary.color-variant-alternate:not(.hide-focus).is-focused,
1173
+ .ids-menu-button.btn-primary.color-variant-alternate:not(.hide-focus).focus-within,
1174
+ .ids-menu-button.btn-primary.color-variant-alternate:not(.hide-focus):focus {
1175
+ box-shadow: 0 0 0 2px var(--ids-color-primary-70), 0 0 0 3px var(--ids-color-text-on-primary);
1176
+ }
1177
+ .ids-button.btn-primary-destructive:not(.hide-focus).is-active, .ids-button.btn-primary-destructive:not(.hide-focus).is-focused, .ids-button.btn-primary-destructive:not(.hide-focus).focus-within, .ids-button.btn-primary-destructive:not(.hide-focus):focus,
1178
+ .ids-icon-button.btn-primary-destructive:not(.hide-focus).is-active,
1179
+ .ids-icon-button.btn-primary-destructive:not(.hide-focus).is-focused,
1180
+ .ids-icon-button.btn-primary-destructive:not(.hide-focus).focus-within,
1181
+ .ids-icon-button.btn-primary-destructive:not(.hide-focus):focus,
1182
+ .ids-menu-button.btn-primary-destructive:not(.hide-focus).is-active,
1183
+ .ids-menu-button.btn-primary-destructive:not(.hide-focus).is-focused,
1184
+ .ids-menu-button.btn-primary-destructive:not(.hide-focus).focus-within,
1185
+ .ids-menu-button.btn-primary-destructive:not(.hide-focus):focus {
1186
+ box-shadow: 0 0 0 2px var(--ids-color-background-default), 0 0 0 3px var(--ids-color-error-default);
1187
+ }
1188
+ .ids-button.btn-secondary:not(.hide-focus).is-active, .ids-button.btn-secondary:not(.hide-focus).is-focused, .ids-button.btn-secondary:not(.hide-focus).focus-within, .ids-button.btn-secondary:not(.hide-focus):focus,
1189
+ .ids-icon-button.btn-secondary:not(.hide-focus).is-active,
1190
+ .ids-icon-button.btn-secondary:not(.hide-focus).is-focused,
1191
+ .ids-icon-button.btn-secondary:not(.hide-focus).focus-within,
1192
+ .ids-icon-button.btn-secondary:not(.hide-focus):focus,
1193
+ .ids-menu-button.btn-secondary:not(.hide-focus).is-active,
1194
+ .ids-menu-button.btn-secondary:not(.hide-focus).is-focused,
1195
+ .ids-menu-button.btn-secondary:not(.hide-focus).focus-within,
1196
+ .ids-menu-button.btn-secondary:not(.hide-focus):focus {
1197
+ box-shadow: var(--ids-button-secondary-shadow-focus);
1198
+ }
1199
+ .ids-button.btn-primary-generative-ai:not(.hide-focus).is-active, .ids-button.btn-primary-generative-ai:not(.hide-focus).is-focused, .ids-button.btn-primary-generative-ai:not(.hide-focus).focus-within, .ids-button.btn-primary-generative-ai:not(.hide-focus):focus,
1200
+ .ids-icon-button.btn-primary-generative-ai:not(.hide-focus).is-active,
1201
+ .ids-icon-button.btn-primary-generative-ai:not(.hide-focus).is-focused,
1202
+ .ids-icon-button.btn-primary-generative-ai:not(.hide-focus).focus-within,
1203
+ .ids-icon-button.btn-primary-generative-ai:not(.hide-focus):focus,
1204
+ .ids-menu-button.btn-primary-generative-ai:not(.hide-focus).is-active,
1205
+ .ids-menu-button.btn-primary-generative-ai:not(.hide-focus).is-focused,
1206
+ .ids-menu-button.btn-primary-generative-ai:not(.hide-focus).focus-within,
1207
+ .ids-menu-button.btn-primary-generative-ai:not(.hide-focus):focus {
1208
+ box-shadow: var(--ids-button-ai-shadow-focus);
1209
+ border-color: transparent;
463
1210
  }
464
- .ids-input.color-variant-borderless .validation-message {
465
- display: none;
1211
+ .ids-button.btn-tertiary-generative-ai:not(.hide-focus).is-active, .ids-button.btn-tertiary-generative-ai:not(.hide-focus).is-focused, .ids-button.btn-tertiary-generative-ai:not(.hide-focus).focus-within, .ids-button.btn-tertiary-generative-ai:not(.hide-focus):focus,
1212
+ .ids-icon-button.btn-tertiary-generative-ai:not(.hide-focus).is-active,
1213
+ .ids-icon-button.btn-tertiary-generative-ai:not(.hide-focus).is-focused,
1214
+ .ids-icon-button.btn-tertiary-generative-ai:not(.hide-focus).focus-within,
1215
+ .ids-icon-button.btn-tertiary-generative-ai:not(.hide-focus):focus,
1216
+ .ids-menu-button.btn-tertiary-generative-ai:not(.hide-focus).is-active,
1217
+ .ids-menu-button.btn-tertiary-generative-ai:not(.hide-focus).is-focused,
1218
+ .ids-menu-button.btn-tertiary-generative-ai:not(.hide-focus).focus-within,
1219
+ .ids-menu-button.btn-tertiary-generative-ai:not(.hide-focus):focus {
1220
+ box-shadow: var(--ids-button-tertiary-ai-shadow-focus);
1221
+ border-color: var(--ids-button-ai-color-icon-secondary-hover);
466
1222
  }
467
- .ids-input.color-variant-borderless .field-container {
1223
+
1224
+ .ids-modal-button:not(.ids-modal-icon-button) {
1225
+ box-shadow: var(--ids-shadow-none);
1226
+ font-weight: var(--ids-font-weight-normal);
1227
+ font-family: var(--ids-font-family-default);
1228
+ font-size: var(--ids-font-size-40);
1229
+ overflow: hidden;
1230
+ padding-bottom: calc(var(--ids-space-xs) - 2px);
1231
+ padding-top: calc(var(--ids-space-xs) - 2px);
1232
+ position: relative;
1233
+ border: 1px solid transparent;
468
1234
  background-color: transparent;
469
- border-color: transparent !important;
470
- }
471
- .ids-input.color-variant-borderless:focus-within .field-container {
472
- box-shadow: none;
473
- }
474
- .ids-input.color-variant-borderless.ids-input.field-height-lg .ids-input-field {
475
- padding-inline: calc(var(--ids-space-sm) - 2px);
476
- }
477
- .ids-input.color-variant-borderless.ids-input.field-height-md .ids-input-field {
478
- padding-inline: calc(var(--ids-space-12) - 2px);
479
- }
480
- .ids-input.color-variant-borderless.ids-input.field-height-sm .ids-input-field {
481
- padding-inline: calc(var(--ids-space-xs) - 2px);
1235
+ color: var(--ids-button-color-text-default);
1236
+ transition: background-color var(--ids-motion-duration) var(--ids-motion-ease), border-color var(--ids-motion-duration) var(--ids-motion-ease), color var(--ids-motion-duration) var(--ids-motion-ease), opacity var(--ids-motion-duration) var(--ids-motion-ease);
1237
+ white-space: nowrap;
1238
+ padding-block-start: var(--ids-space-12);
1239
+ padding-block-end: var(--ids-space-12);
1240
+ display: block;
1241
+ font-weight: var(--ids-font-weight-semibold);
1242
+ justify-content: center;
1243
+ height: 100%;
1244
+ width: 100%;
482
1245
  }
483
- .ids-input.color-variant-borderless.ids-input.field-height-xs .ids-input-field {
484
- font-size: var(--ids-data-grid-font-size-sm);
485
- padding-inline: var(--ids-space-xxxs);
1246
+ .ids-modal-button:not(.ids-modal-icon-button), .ids-modal-button:not(.ids-modal-icon-button)::before, .ids-modal-button:not(.ids-modal-icon-button)::after {
1247
+ box-sizing: border-box;
486
1248
  }
487
- .ids-input.color-variant-borderless.ids-input.field-height-xs slot[name=trigger-end] {
488
- padding-inline-end: 0;
1249
+ .ids-modal-button:not(.ids-modal-icon-button) * {
1250
+ pointer-events: none;
489
1251
  }
490
- .ids-input.color-variant-borderless.ids-input.field-height-xxs .ids-input-field {
491
- font-size: var(--ids-data-grid-font-size-sm);
492
- padding-inline: var(--ids-space-xxxxs);
1252
+ .ids-modal-button:not(.ids-modal-icon-button):focus {
1253
+ outline: none;
1254
+ outline-color: transparent;
493
1255
  }
494
- .ids-input.color-variant-borderless.ids-input.field-height-xxs slot[name=trigger-end] {
495
- padding-inline-end: 0;
1256
+ .ids-modal-button:not(.ids-modal-icon-button):not([disabled]) {
1257
+ cursor: var(--ids-cursor-pointer);
496
1258
  }
497
- .ids-input.color-variant-in-cell {
498
- margin: 1px;
1259
+ .ids-modal-button:not(.ids-modal-icon-button) span {
1260
+ vertical-align: bottom;
499
1261
  }
500
- .ids-input.color-variant-in-cell input {
501
- font-size: var(--ids-font-size-40);
1262
+ .ids-modal-button:not(.ids-modal-icon-button) span.audible {
1263
+ clip: rect(0, 0, 0, 0);
1264
+ height: 0;
1265
+ line-height: 0;
1266
+ min-height: 0;
1267
+ overflow: hidden;
1268
+ padding: 0;
1269
+ position: absolute;
1270
+ width: 1px;
502
1271
  }
503
- .ids-input.color-variant-in-cell .validation-message {
504
- display: none;
1272
+ .ids-modal-button:not(.ids-modal-icon-button):not(.ids-icon-button):not(.align-icon-end) ::slotted(ids-icon:not([icon=insights-smart-panel])) {
1273
+ margin-inline-end: calc(var(--ids-space-xxs) + 3px);
505
1274
  }
506
- .ids-input.color-variant-in-cell.ids-input.field-height-lg .ids-input-field {
507
- padding-inline: 11px;
508
- height: 40px;
1275
+ .ids-modal-button:not(.ids-modal-icon-button) .ids-icon {
1276
+ vertical-align: middle;
509
1277
  }
510
- .ids-input.color-variant-in-cell.ids-input.full .field-container {
511
- margin-inline: 3px;
512
- width: initial;
1278
+ .ids-modal-button:not(.ids-modal-icon-button).align-icon-end ::slotted(ids-icon) {
1279
+ margin-inline-start: var(--ids-space-xxs);
513
1280
  }
514
- .ids-input.color-variant-in-cell.ids-input.field-height-md .ids-input-field {
515
- padding-inline: 6px;
516
- height: 30px;
1281
+ .ids-modal-button:not(.ids-modal-icon-button).content-align-start {
1282
+ justify-content: start;
517
1283
  }
518
- .ids-input.color-variant-in-cell.ids-input.field-height-sm .ids-input-field {
519
- padding-inline: 4px;
520
- height: 27px;
1284
+ .ids-modal-button:not(.ids-modal-icon-button).content-align-end {
1285
+ justify-content: end;
521
1286
  }
522
- .ids-input.color-variant-in-cell.ids-input.field-height-sm.full .field-container {
523
- margin-inline: 2px;
1287
+ .ids-modal-button:not(.ids-modal-icon-button).no-margins {
1288
+ margin-inline: var(--ids-space-none);
524
1289
  }
525
- .ids-input.color-variant-in-cell.ids-input.field-height-xs .ids-input-field {
526
- padding-inline: 1px;
527
- height: 24px;
1290
+ .ids-modal-button:not(.ids-modal-icon-button):not(.no-margins) {
1291
+ margin: var(--ids-button-alt-margin);
528
1292
  }
529
- .ids-input.color-variant-in-cell.ids-input.field-height-xs.full .field-container {
530
- margin-inline: 1px;
1293
+ .ids-modal-button:not(.ids-modal-icon-button).field-height-xxs:not(.btn-secondary):not(.no-margins) {
1294
+ margin-block-start: 3px;
1295
+ margin-inline-end: -2px;
1296
+ height: 22px;
1297
+ width: 22px;
531
1298
  }
532
- .ids-input.color-variant-module-nav {
533
- margin-block-end: 0;
534
- transform: background-color var(--ids-motion-duration) var(--ids-motion-ease), border-color var(--ids-motion-duration) var(--ids-motion-ease), color var(--ids-motion-duration) var(--ids-motion-ease);
1299
+ .ids-modal-button:not(.ids-modal-icon-button) ::slotted(span) {
1300
+ font-weight: inherit !important;
535
1301
  }
536
- .ids-input.color-variant-module-nav .field-container {
537
- border-radius: var(--ids-module-nav-common-border-radius);
538
- border: var(--ids-module-nav-input-border-width) solid transparent;
1302
+ .ids-modal-button:not(.ids-modal-icon-button).btn-primary {
1303
+ background-color: var(--ids-modal-color-background);
1304
+ color: var(--ids-modal-button-color-default);
539
1305
  }
540
- .ids-input.color-variant-module-nav input {
541
- background-color: transparent;
542
- color: inherit;
1306
+ .ids-modal-button:not(.ids-modal-icon-button).btn-primary:not(.hide-focus).is-active, .ids-modal-button:not(.ids-modal-icon-button).btn-primary:not(.hide-focus).is-focused, .ids-modal-button:not(.ids-modal-icon-button).btn-primary:not(.hide-focus).focus-within, .ids-modal-button:not(.ids-modal-icon-button).btn-primary:not(.hide-focus):focus {
1307
+ box-shadow: var(--ids-modal-shadow-focus);
543
1308
  }
544
- .ids-input.color-variant-module-nav input::placeholder {
545
- color: var(--ids-module-nav-search-input-placeholder-text-color);
1309
+ .ids-modal-button:not(.ids-modal-icon-button).btn-primary:hover {
1310
+ color: var(--ids-modal-button-color-hover);
546
1311
  }
547
- .ids-input.color-variant-module-nav input:active {
548
- color: var(--ids-module-nav-search-input-text-color);
1312
+ .ids-modal-button:not(.ids-modal-icon-button).btn-primary[disabled] {
1313
+ opacity: var(--ids-button-primary-opacity-disabled);
549
1314
  }
550
- .ids-input.color-variant-module-nav:not([class*=field-height-]) {
551
- height: var(--ids-module-nav-search-wrapper-height);
1315
+ .ids-modal-button:not(.ids-modal-icon-button).btn-secondary, .ids-modal-button:not(.ids-modal-icon-button).btn-tertiary {
1316
+ background-color: var(--ids-modal-color-background);
1317
+ color: var(--ids-modal-button-secondary-color-default);
552
1318
  }
553
- .ids-input.color-variant-module-nav:not([class*=field-height-]) input {
554
- height: var(--ids-module-nav-search-input-height);
1319
+ .ids-modal-button:not(.ids-modal-icon-button).btn-secondary:not(.hide-focus).is-active, .ids-modal-button:not(.ids-modal-icon-button).btn-secondary:not(.hide-focus).is-focused, .ids-modal-button:not(.ids-modal-icon-button).btn-secondary:not(.hide-focus).focus-within, .ids-modal-button:not(.ids-modal-icon-button).btn-secondary:not(.hide-focus):focus, .ids-modal-button:not(.ids-modal-icon-button).btn-tertiary:not(.hide-focus).is-active, .ids-modal-button:not(.ids-modal-icon-button).btn-tertiary:not(.hide-focus).is-focused, .ids-modal-button:not(.ids-modal-icon-button).btn-tertiary:not(.hide-focus).focus-within, .ids-modal-button:not(.ids-modal-icon-button).btn-tertiary:not(.hide-focus):focus {
1320
+ box-shadow: var(--ids-modal-shadow-focus);
555
1321
  }
556
- .ids-input:not([class*=color-variant-]) .field-container:not(:focus-within) {
557
- background-color: var(--ids-input-color-background-default);
558
- border-color: var(--ids-input-color-border-default);
559
- color: var(--ids-input-color-text-default);
1322
+ .ids-modal-button:not(.ids-modal-icon-button).btn-secondary:hover, .ids-modal-button:not(.ids-modal-icon-button).btn-tertiary:hover {
1323
+ color: var(--ids-modal-button-secondary-color-hover);
560
1324
  }
561
- .ids-input:not([class*=color-variant-]).readonly .field-container.error, .ids-input:not([class*=color-variant-]).readonly .field-container.error:hover, .ids-input:not([class*=color-variant-]).readonly.hover .field-container.error, .ids-input:not([class*=color-variant-]).readonly.hover .field-container.error:hover, .ids-input:not([class*=color-variant-]).readonly.focus-within .field-container.error, .ids-input:not([class*=color-variant-]).readonly.focus-within .field-container.error:hover {
562
- border-color: var(--ids-color-error-default);
563
- color: var(--ids-color-error-default);
1325
+ .ids-modal-button:not(.ids-modal-icon-button).btn-secondary[disabled], .ids-modal-button:not(.ids-modal-icon-button).btn-tertiary[disabled] {
1326
+ background-color: var(--ids-button-secondary-color-border-disabled);
1327
+ border-color: var(--ids-button-secondary-color-border-disabled);
564
1328
  }
565
- .ids-input:not([class*=color-variant-]).readonly:not(.readonly-background):not(.bg-transparent) .field-container, .ids-input:not([class*=color-variant-]).readonly:not(.readonly-background):not(.bg-transparent).hover .field-container, .ids-input:not([class*=color-variant-]).readonly:not(.readonly-background):not(.bg-transparent).focus-within .field-container {
566
- background-color: var(--ids-input-color-background-readonly);
1329
+ .ids-modal-button:not(.ids-modal-icon-button):focus {
1330
+ z-index: 1;
567
1331
  }
568
- .ids-input:not([class*=color-variant-]).disabled .field-container, .ids-input:not([class*=color-variant-]).disabled:hover .field-container, .ids-input:not([class*=color-variant-]).disabled:focus-within .field-container {
569
- border-color: var(--ids-input-color-border-disabled);
570
- color: var(--ids-input-color-text-disabled);
571
- opacity: var(--ids-input-disabled-opacity);
572
- -webkit-text-fill-color: var(--ids-input-color-text-disabled);
1332
+
1333
+ .ids-modal-icon-button {
1334
+ padding: var(--ids-space-xs);
573
1335
  }
574
- .ids-input:not([class*=color-variant-]).bg-transparent .field-container, .ids-input:not([class*=color-variant-]).bg-transparent.readonly .field-container, .ids-input:not([class*=color-variant-]).bg-transparent.disabled .field-container {
575
- background-color: transparent;
1336
+
1337
+ .btn-swipe-action-left,
1338
+ .btn-swipe-action-right {
1339
+ display: block;
1340
+ padding: 0 var(--ids-space-xs) var(--ids-space-xs);
1341
+ height: 100%;
1342
+ margin: 0;
1343
+ white-space: inherit;
1344
+ width: 85px;
576
1345
  }
577
- .ids-input:not([class*=color-variant-]).bg-transparent:focus-within .field-container {
578
- background-color: transparent;
1346
+ .btn-swipe-action-left ::slotted(ids-icon),
1347
+ .btn-swipe-action-right ::slotted(ids-icon) {
1348
+ display: block;
579
1349
  }
580
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container {
581
- border-color: var(--ids-input-color-border-hover);
582
- }
583
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .alert,
584
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .alert:hover,
585
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .warning,
586
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .warning:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert,
587
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover,
588
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning,
589
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:hover {
590
- border-color: var(--ids-input-color-border-alert-default);
591
- color: var(--ids-input-color-text-alert-default);
592
- }
593
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .alert:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .alert.is-active,
594
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .alert:hover:focus-within,
595
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .alert:hover.is-active,
596
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .warning:focus-within,
597
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .warning.is-active,
598
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .warning:hover:focus-within,
599
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .warning:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert.is-active,
600
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover:focus-within,
601
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover.is-active,
602
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:focus-within,
603
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning.is-active,
604
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:hover:focus-within,
605
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:hover.is-active {
606
- border-color: var(--ids-input-color-border-alert-default);
607
- box-shadow: var(--ids-input-shadow-alert-focus) 0 0 3px 2px;
608
- }
609
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .alert[disabled],
610
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .alert:hover[disabled],
611
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .warning[disabled],
612
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .warning:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert[disabled],
613
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .alert:hover[disabled],
614
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning[disabled],
615
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .warning:hover[disabled] {
616
- border-color: var(--ids-input-color-border-alert-disabled);
617
- color: var(--ids-input-color-text-alert-disabled);
618
- }
619
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error,
620
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error,
621
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error:hover {
622
- border-color: var(--ids-input-color-border-error-default);
623
- color: var(--ids-input-error-color-text-error-default);
624
- }
625
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error.field-container:not(:focus-within),
626
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:hover.field-container:not(:focus-within), .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error.field-container:not(:focus-within),
627
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error:hover.field-container:not(:focus-within) {
628
- border-color: var(--ids-input-color-border-error-default);
629
- color: var(--ids-input-error-color-text-error-default);
630
- }
631
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error.is-active,
632
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:hover:focus-within,
633
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error.is-active,
634
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error:hover:focus-within,
635
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error:hover.is-active {
636
- border-color: var(--ids-input-color-border-error-default);
637
- box-shadow: var(--ids-input-color-shadow-error-focus) 0 0 3px 2px;
638
- }
639
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error[disabled],
640
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .field-container.error:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error[disabled],
641
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .field-container.error:hover[disabled] {
642
- border-color: var(--ids-input-color-border-error-disabled);
643
- color: var(--ids-input-color-border-error-disabled);
644
- }
645
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .info,
646
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .info:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info,
647
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:hover {
648
- border-color: var(--ids-input-color-border-info-default);
649
- color: var(--ids-input-color-text-info-default);
650
- }
651
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .info:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .info.is-active,
652
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .info:hover:focus-within,
653
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .info:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info.is-active,
654
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:hover:focus-within,
655
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:hover.is-active {
656
- border-color: var(--ids-input-color-border-info-default);
657
- box-shadow: var(--ids-input-shadow-info-focus) 0 0 3px 2px;
658
- }
659
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .info[disabled],
660
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .info:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info[disabled],
661
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .info:hover[disabled] {
662
- border-color: var(--ids-input-color-border-info-disabled);
663
- color: var(--ids-input-color-text-info-disabled);
664
- }
665
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .success,
666
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .success:hover, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success,
667
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:hover {
668
- border-color: var(--ids-input-color-border-success-default);
669
- color: var(--ids-input-color-text-success-default);
670
- }
671
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .success:focus-within, .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .success.is-active,
672
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .success:hover:focus-within,
673
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .success:hover.is-active, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:focus-within, .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success.is-active,
674
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:hover:focus-within,
675
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:hover.is-active {
676
- border-color: var(--ids-input-color-border-success-default);
677
- box-shadow: var(--ids-input-shadow-success-focus) 0 0 3px 2px;
678
- }
679
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .success[disabled],
680
- .ids-input:not([class*=color-variant-]):hover:not(.readonly):not(.disabled):not(:focus):not(:focus-within) .success:hover[disabled], .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success[disabled],
681
- .ids-input:not([class*=color-variant-]):hover.readonly.readonly-background .success:hover[disabled] {
682
- border-color: var(--ids-input-color-border-success-disabled);
683
- color: var(--ids-input-color-text-success-disabled);
684
- }
685
- .ids-input:not([class*=color-variant-]).is-active .field-container, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container {
686
- border-color: var(--ids-input-color-border-focus);
687
- }
688
- .ids-input:not([class*=color-variant-]).is-active .alert,
689
- .ids-input:not([class*=color-variant-]).is-active .alert:hover,
690
- .ids-input:not([class*=color-variant-]).is-active .warning,
691
- .ids-input:not([class*=color-variant-]).is-active .warning:hover, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .alert,
692
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .alert:hover,
693
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .warning,
694
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .warning:hover {
695
- border-color: var(--ids-input-color-border-alert-default);
696
- color: var(--ids-input-color-text-alert-default);
697
- }
698
- .ids-input:not([class*=color-variant-]).is-active .alert:focus-within, .ids-input:not([class*=color-variant-]).is-active .alert.is-active,
699
- .ids-input:not([class*=color-variant-]).is-active .alert:hover:focus-within,
700
- .ids-input:not([class*=color-variant-]).is-active .alert:hover.is-active,
701
- .ids-input:not([class*=color-variant-]).is-active .warning:focus-within,
702
- .ids-input:not([class*=color-variant-]).is-active .warning.is-active,
703
- .ids-input:not([class*=color-variant-]).is-active .warning:hover:focus-within,
704
- .ids-input:not([class*=color-variant-]).is-active .warning:hover.is-active, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .alert:focus-within, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .alert.is-active,
705
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .alert:hover:focus-within,
706
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .alert:hover.is-active,
707
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .warning:focus-within,
708
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .warning.is-active,
709
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .warning:hover:focus-within,
710
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .warning:hover.is-active {
711
- border-color: var(--ids-input-color-border-alert-default);
712
- box-shadow: var(--ids-input-shadow-alert-focus) 0 0 3px 2px;
713
- }
714
- .ids-input:not([class*=color-variant-]).is-active .alert[disabled],
715
- .ids-input:not([class*=color-variant-]).is-active .alert:hover[disabled],
716
- .ids-input:not([class*=color-variant-]).is-active .warning[disabled],
717
- .ids-input:not([class*=color-variant-]).is-active .warning:hover[disabled], .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .alert[disabled],
718
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .alert:hover[disabled],
719
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .warning[disabled],
720
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .warning:hover[disabled] {
721
- border-color: var(--ids-input-color-border-alert-disabled);
722
- color: var(--ids-input-color-text-alert-disabled);
723
- }
724
- .ids-input:not([class*=color-variant-]).is-active .field-container.error,
725
- .ids-input:not([class*=color-variant-]).is-active .field-container.error:hover, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error,
726
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error:hover {
727
- border-color: var(--ids-input-color-border-error-default);
728
- color: var(--ids-input-error-color-text-error-default);
729
- }
730
- .ids-input:not([class*=color-variant-]).is-active .field-container.error.field-container:not(:focus-within),
731
- .ids-input:not([class*=color-variant-]).is-active .field-container.error:hover.field-container:not(:focus-within), .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error.field-container:not(:focus-within),
732
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error:hover.field-container:not(:focus-within) {
733
- border-color: var(--ids-input-color-border-error-default);
734
- color: var(--ids-input-error-color-text-error-default);
735
- }
736
- .ids-input:not([class*=color-variant-]).is-active .field-container.error:focus-within, .ids-input:not([class*=color-variant-]).is-active .field-container.error.is-active,
737
- .ids-input:not([class*=color-variant-]).is-active .field-container.error:hover:focus-within,
738
- .ids-input:not([class*=color-variant-]).is-active .field-container.error:hover.is-active, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error:focus-within, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error.is-active,
739
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error:hover:focus-within,
740
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error:hover.is-active {
741
- border-color: var(--ids-input-color-border-error-default);
742
- box-shadow: var(--ids-input-color-shadow-error-focus) 0 0 3px 2px;
743
- }
744
- .ids-input:not([class*=color-variant-]).is-active .field-container.error[disabled],
745
- .ids-input:not([class*=color-variant-]).is-active .field-container.error:hover[disabled], .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error[disabled],
746
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .field-container.error:hover[disabled] {
747
- border-color: var(--ids-input-color-border-error-disabled);
748
- color: var(--ids-input-color-border-error-disabled);
749
- }
750
- .ids-input:not([class*=color-variant-]).is-active .info,
751
- .ids-input:not([class*=color-variant-]).is-active .info:hover, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .info,
752
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .info:hover {
753
- border-color: var(--ids-input-color-border-info-default);
754
- color: var(--ids-input-color-text-info-default);
755
- }
756
- .ids-input:not([class*=color-variant-]).is-active .info:focus-within, .ids-input:not([class*=color-variant-]).is-active .info.is-active,
757
- .ids-input:not([class*=color-variant-]).is-active .info:hover:focus-within,
758
- .ids-input:not([class*=color-variant-]).is-active .info:hover.is-active, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .info:focus-within, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .info.is-active,
759
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .info:hover:focus-within,
760
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .info:hover.is-active {
761
- border-color: var(--ids-input-color-border-info-default);
762
- box-shadow: var(--ids-input-shadow-info-focus) 0 0 3px 2px;
763
- }
764
- .ids-input:not([class*=color-variant-]).is-active .info[disabled],
765
- .ids-input:not([class*=color-variant-]).is-active .info:hover[disabled], .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .info[disabled],
766
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .info:hover[disabled] {
767
- border-color: var(--ids-input-color-border-info-disabled);
768
- color: var(--ids-input-color-text-info-disabled);
769
- }
770
- .ids-input:not([class*=color-variant-]).is-active .success,
771
- .ids-input:not([class*=color-variant-]).is-active .success:hover, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .success,
772
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .success:hover {
773
- border-color: var(--ids-input-color-border-success-default);
774
- color: var(--ids-input-color-text-success-default);
775
- }
776
- .ids-input:not([class*=color-variant-]).is-active .success:focus-within, .ids-input:not([class*=color-variant-]).is-active .success.is-active,
777
- .ids-input:not([class*=color-variant-]).is-active .success:hover:focus-within,
778
- .ids-input:not([class*=color-variant-]).is-active .success:hover.is-active, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .success:focus-within, .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .success.is-active,
779
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .success:hover:focus-within,
780
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .success:hover.is-active {
781
- border-color: var(--ids-input-color-border-success-default);
782
- box-shadow: var(--ids-input-shadow-success-focus) 0 0 3px 2px;
783
- }
784
- .ids-input:not([class*=color-variant-]).is-active .success[disabled],
785
- .ids-input:not([class*=color-variant-]).is-active .success:hover[disabled], .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .success[disabled],
786
- .ids-input:not([class*=color-variant-]).is-active:hover.readonly.readonly-background .success:hover[disabled] {
787
- border-color: var(--ids-input-color-border-success-disabled);
788
- color: var(--ids-input-color-text-success-disabled);
789
- }
790
- .ids-input:not([class*=color-variant-]):hover:not(.disabled).readonly.readonly-background.color-variant-alternate-formatter .field-container {
791
- border-color: var(--ids-data-grid-filter-input-color-border-hover);
792
- }
793
- .ids-input:not([class*=color-variant-]) .alert,
794
- .ids-input:not([class*=color-variant-]) .alert:hover,
795
- .ids-input:not([class*=color-variant-]) .warning,
796
- .ids-input:not([class*=color-variant-]) .warning:hover {
797
- border-color: var(--ids-input-color-border-alert-default);
798
- color: var(--ids-input-color-text-alert-default);
799
- }
800
- .ids-input:not([class*=color-variant-]) .alert:focus-within, .ids-input:not([class*=color-variant-]) .alert.is-active,
801
- .ids-input:not([class*=color-variant-]) .alert:hover:focus-within,
802
- .ids-input:not([class*=color-variant-]) .alert:hover.is-active,
803
- .ids-input:not([class*=color-variant-]) .warning:focus-within,
804
- .ids-input:not([class*=color-variant-]) .warning.is-active,
805
- .ids-input:not([class*=color-variant-]) .warning:hover:focus-within,
806
- .ids-input:not([class*=color-variant-]) .warning:hover.is-active {
807
- border-color: var(--ids-input-color-border-alert-default);
808
- box-shadow: var(--ids-input-shadow-alert-focus) 0 0 3px 2px;
809
- }
810
- .ids-input:not([class*=color-variant-]) .alert[disabled],
811
- .ids-input:not([class*=color-variant-]) .alert:hover[disabled],
812
- .ids-input:not([class*=color-variant-]) .warning[disabled],
813
- .ids-input:not([class*=color-variant-]) .warning:hover[disabled] {
814
- border-color: var(--ids-input-color-border-alert-disabled);
815
- color: var(--ids-input-color-text-alert-disabled);
816
- }
817
- .ids-input:not([class*=color-variant-]) .field-container.error,
818
- .ids-input:not([class*=color-variant-]) .field-container.error:hover {
819
- border-color: var(--ids-input-color-border-error-default);
820
- color: var(--ids-input-error-color-text-error-default);
821
- }
822
- .ids-input:not([class*=color-variant-]) .field-container.error.field-container:not(:focus-within),
823
- .ids-input:not([class*=color-variant-]) .field-container.error:hover.field-container:not(:focus-within) {
824
- border-color: var(--ids-input-color-border-error-default);
825
- color: var(--ids-input-error-color-text-error-default);
826
- }
827
- .ids-input:not([class*=color-variant-]) .field-container.error:focus-within, .ids-input:not([class*=color-variant-]) .field-container.error.is-active,
828
- .ids-input:not([class*=color-variant-]) .field-container.error:hover:focus-within,
829
- .ids-input:not([class*=color-variant-]) .field-container.error:hover.is-active {
830
- border-color: var(--ids-input-color-border-error-default);
831
- box-shadow: var(--ids-input-color-shadow-error-focus) 0 0 3px 2px;
832
- }
833
- .ids-input:not([class*=color-variant-]) .field-container.error[disabled],
834
- .ids-input:not([class*=color-variant-]) .field-container.error:hover[disabled] {
835
- border-color: var(--ids-input-color-border-error-disabled);
836
- color: var(--ids-input-color-border-error-disabled);
837
- }
838
- .ids-input:not([class*=color-variant-]) .info,
839
- .ids-input:not([class*=color-variant-]) .info:hover {
840
- border-color: var(--ids-input-color-border-info-default);
841
- color: var(--ids-input-color-text-info-default);
842
- }
843
- .ids-input:not([class*=color-variant-]) .info:focus-within, .ids-input:not([class*=color-variant-]) .info.is-active,
844
- .ids-input:not([class*=color-variant-]) .info:hover:focus-within,
845
- .ids-input:not([class*=color-variant-]) .info:hover.is-active {
846
- border-color: var(--ids-input-color-border-info-default);
847
- box-shadow: var(--ids-input-shadow-info-focus) 0 0 3px 2px;
848
- }
849
- .ids-input:not([class*=color-variant-]) .info[disabled],
850
- .ids-input:not([class*=color-variant-]) .info:hover[disabled] {
851
- border-color: var(--ids-input-color-border-info-disabled);
852
- color: var(--ids-input-color-text-info-disabled);
853
- }
854
- .ids-input:not([class*=color-variant-]) .success,
855
- .ids-input:not([class*=color-variant-]) .success:hover {
856
- border-color: var(--ids-input-color-border-success-default);
857
- color: var(--ids-input-color-text-success-default);
858
- }
859
- .ids-input:not([class*=color-variant-]) .success:focus-within, .ids-input:not([class*=color-variant-]) .success.is-active,
860
- .ids-input:not([class*=color-variant-]) .success:hover:focus-within,
861
- .ids-input:not([class*=color-variant-]) .success:hover.is-active {
862
- border-color: var(--ids-input-color-border-success-default);
863
- box-shadow: var(--ids-input-shadow-success-focus) 0 0 3px 2px;
864
- }
865
- .ids-input:not([class*=color-variant-]) .success[disabled],
866
- .ids-input:not([class*=color-variant-]) .success:hover[disabled] {
867
- border-color: var(--ids-input-color-border-success-disabled);
868
- color: var(--ids-input-color-text-success-disabled);
869
- }
870
- .ids-input.color-variant-alternate .field-container {
871
- border-color: var(--ids-input-header-color-border);
872
- color: var(--ids-input-header-color-text-default);
873
- background-color: var(--ids-input-header-color-background);
874
- border-bottom: 1px solid var(--ids-input-header-color-border);
1350
+ .btn-swipe-action-left:hover, .btn-swipe-action-left:focus,
1351
+ .btn-swipe-action-right:hover,
1352
+ .btn-swipe-action-right:focus {
875
1353
  box-shadow: none;
876
- }
877
- .ids-input.color-variant-alternate:focus-within .field-container {
878
- border-color: var(--ids-input-color-border-focus);
879
- box-shadow: var(--ids-input-color-border-shadow);
880
- }
881
- .ids-input.color-variant-alternate .ids-input-field {
882
- color: var(--ids-input-header-color-text-default);
883
- }
884
- .ids-input.color-variant-alternate .ids-input-field::placeholder {
885
- color: var(--ids-input-header-color-text-placeholder);
886
- }
887
- .ids-input.color-variant-alternate.readonly-background .ids-input-field::placeholder {
888
- color: var(--ids-input-header-color-text-placeholder);
889
- }
890
- .ids-input.color-variant-alternate-formatter .field-container {
891
- background-color: var(--ids-data-grid-filter-input-color-background);
892
- border-color: var(--ids-data-grid-filter-input-color-border-default);
893
- color: var(--ids-data-grid-filter-input-color-text-default);
894
- }
895
- .ids-input.color-variant-alternate-formatter:hover.readonly.readonly-background .field-container, .ids-input.color-variant-alternate-formatter:hover:not(.readonly):not(.disabled) .field-container {
896
- border-color: var(--ids-data-grid-filter-input-color-border-hover);
897
- }
898
- .ids-input.color-variant-alternate-formatter:focus-within .field-container, .ids-input.color-variant-alternate-formatter:focus-within:hover .field-container {
899
- border-color: var(--ids-data-grid-filter-input-color-border-focus);
900
- }
901
- .ids-input.color-variant-alternate-formatter:focus-within .ids-input-field {
902
- box-shadow: var(--ids-input-color-border-shadow);
903
- }
904
- .ids-input.color-variant-alternate-formatter.disabled .ids-input.color-variant-alternate-formatter.disabled:hover .field-container {
905
- border-color: var(--ids-data-grid-filter-input-color-border-disabled);
906
- color: var(--ids-data-grid-filter-input-color-text-disabled);
907
- }
908
- .ids-input.color-variant-alternate-formatter.readonly:not(.readonly-background):not(.bg-transparent) .field-container {
909
- background-color: var(--ids-data-grid-filter-input-color-background-readonly);
910
- border-color: var(--ids-data-grid-filter-input-color-border-readonly);
911
- color: var(--ids-data-grid-filter-input-color-text-readonly);
912
- }
913
- .ids-input.color-variant-alternate-formatter .ids-input-field::placeholder {
914
- color: var(--ids-data-grid-filter-input-color-text-placeholder);
915
- }
916
- .ids-input.color-variant-app-menu .field-container {
917
- color: var(--ids-input-color-text-app-menu);
918
- }
919
- .ids-input.color-variant-list-builder .field-container {
920
- background-color: transparent;
921
- color: var(--ids-list-builder-input-text-color);
922
- border: 0;
923
- }
924
- .ids-input.color-variant-module-nav {
925
- color: var(--ids-module-nav-search-input-text-color);
926
- /* stylelint-disable-next-line no-duplicate-selectors */
927
- }
928
- .ids-input.color-variant-module-nav .field-container {
929
- background-color: transparent;
930
1354
  border-color: transparent;
931
- color: inherit;
932
1355
  }
933
- .ids-input.color-variant-module-nav .ids-input-field {
934
- background-color: transparent;
935
- color: inherit;
1356
+
1357
+ .ids-button:not(.no-margins).btn-swipe-action-left,
1358
+ .ids-button:not(.no-margins).btn-swipe-action-right {
1359
+ margin: 0;
936
1360
  }
937
- .ids-input.color-variant-module-nav .ids-input-field::placeholder {
938
- color: var(--ids-module-nav-search-input-placeholder-text-color);
1361
+
1362
+ .btn-swipe-action-left {
1363
+ border-start-end-radius: 0;
1364
+ border-end-end-radius: 0;
1365
+ background-color: var(--ids-swipe-action-color-background-left);
1366
+ color: var(--ids-swipe-action-color-text-left);
939
1367
  }
940
- .ids-input.color-variant-module-nav .ids-input-field:active {
941
- color: var(--ids-module-nav-search-input-text-color);
1368
+ .btn-swipe-action-left:active {
1369
+ background-color: var(--ids-swipe-action-color-background-left-active);
1370
+ color: var(--ids-swipe-action-color-text-left-active);
942
1371
  }
943
- .ids-input.color-variant-module-nav.has-clearable .btn-clear {
944
- margin-inline-end: 5px;
1372
+ .btn-swipe-action-left:hover {
1373
+ background-color: var(--ids-swipe-action-color-background-left-hover);
1374
+ color: var(--ids-swipe-action-color-text-left-hover);
945
1375
  }
946
- .ids-input.color-variant-module-nav:hover .field-container {
947
- background-color: var(--ids-module-nav-item-hover-bg-color);
1376
+
1377
+ .btn-swipe-action-right {
1378
+ border-start-start-radius: 0;
1379
+ border-end-start-radius: 0;
1380
+ background-color: var(--ids-swipe-action-color-background-right);
1381
+ color: var(--ids-swipe-action-color-text-right);
948
1382
  }
949
- .ids-input.color-variant-module-nav:hover .ids-input-field::placeholder {
950
- color: var(--ids-module-nav-search-input-placeholder-text-color);
1383
+ .btn-swipe-action-right:active {
1384
+ background-color: var(--ids-swipe-action-color-background-right-active);
1385
+ color: var(--ids-swipe-action-color-text-right-active);
951
1386
  }
952
- .ids-input.color-variant-module-nav:hover .ids-input-field {
953
- color: var(--ids-module-nav-input-text-color);
1387
+ .btn-swipe-action-right:hover {
1388
+ background-color: var(--ids-swipe-action-color-background-right-hover);
1389
+ color: var(--ids-swipe-action-color-text-right-hover);
954
1390
  }
955
- .ids-input.color-variant-module-nav:focus-within .field-container, .ids-input.color-variant-module-nav.readonly:focus-within .ids-input.color-variant-module-nav.is-active .field-container {
956
- background-color: var(--ids-module-nav-input-focus-bg-color);
957
- border-color: var(--ids-module-nav-item-selected-text-color);
958
- box-shadow: none;
1391
+
1392
+ .ids-icon-button.gen-ai-active:not(.no-animation) ::slotted(ids-icon[icon=insights-smart-panel]),
1393
+ .ids-button.gen-ai-active:not(.no-animation) ::slotted(ids-icon[icon=insights-smart-panel]) {
1394
+ display: none;
959
1395
  }
960
- .ids-input.color-variant-module-nav:focus-within .ids-input-field::placeholder, .ids-input.color-variant-module-nav.readonly:focus-within .ids-input.color-variant-module-nav.is-active .ids-input-field::placeholder {
961
- color: var(--ids-module-nav-search-input-focused-placeholder-text-color);
1396
+ .ids-icon-button.gen-ai-active:not(.no-animation) .loading-dots,
1397
+ .ids-button.gen-ai-active:not(.no-animation) .loading-dots {
1398
+ display: flex;
962
1399
  }
963
- .ids-input.color-variant-module-nav:focus-within .ids-input-field, .ids-input.color-variant-module-nav.readonly:focus-within .ids-input.color-variant-module-nav.is-active .ids-input-field {
964
- color: var(--ids-module-nav-input-text-color);
1400
+
1401
+ .ids-icon-button.gen-ai-active .loading-dots {
1402
+ padding-inline-start: 3px;
1403
+ padding-inline-end: 2px;
1404
+ padding-block-start: 7px;
1405
+ padding-block-end: 8px;
965
1406
  }
966
1407
 
967
- .caps-lock-indicator {
968
- padding-inline-start: 8px;
969
- padding-inline-end: 8px;
1408
+ .ids-button ::slotted(ids-icon:not(:first-child)),
1409
+ .ids-toggle-button ::slotted(ids-icon:not(:first-child)),
1410
+ .ids-menu-button:not(.ids-icon-button) ::slotted(ids-icon:not(:first-child)),
1411
+ .ids-modal-button:not(.ids-icon-button) ::slotted(ids-icon:not(:first-child)) {
1412
+ margin-inline-start: 5px;
1413
+ margin-inline-end: 0;
1414
+ }
1415
+ .ids-button .ids-icon:last-child,
1416
+ .ids-button span + span:not(.audible),
1417
+ .ids-button span:not(.audible):last-child,
1418
+ .ids-toggle-button .ids-icon:last-child,
1419
+ .ids-toggle-button span + span:not(.audible),
1420
+ .ids-toggle-button span:not(.audible):last-child,
1421
+ .ids-menu-button:not(.ids-icon-button) .ids-icon:last-child,
1422
+ .ids-menu-button:not(.ids-icon-button) span + span:not(.audible),
1423
+ .ids-menu-button:not(.ids-icon-button) span:not(.audible):last-child,
1424
+ .ids-modal-button:not(.ids-icon-button) .ids-icon:last-child,
1425
+ .ids-modal-button:not(.ids-icon-button) span + span:not(.audible),
1426
+ .ids-modal-button:not(.ids-icon-button) span:not(.audible):last-child {
1427
+ padding-inline-start: 5px;
970
1428
  }
971
1429
 
972
- .is-uppercase {
973
- text-transform: uppercase;
1430
+ .ids-modal-button ::slotted(ids-icon:not(:first-child)) {
1431
+ padding: var(--ids-space-xxxs);
974
1432
  }
975
1433
 
976
- .highlight {
977
- font-weight: var(--ids-font-weight-bold);
1434
+ :host(:not([show-loading-indicator=true])) ::slotted(.slot-loading-indicator) {
1435
+ display: none;
978
1436
  }
979
1437
 
980
- .ids-input-field[type=number]::-webkit-inner-spin-button,
981
- .ids-input-field[type=number]::-webkit-outer-spin-button {
982
- appearance: none;
1438
+ :host([show-loading-indicator=true]) ::slotted(ids-loading-indicator) {
1439
+ margin-top: 3px;
1440
+ margin-bottom: 3px;
983
1441
  }
984
1442
 
985
- .ids-input-field::-webkit-caps-lock-indicator {
1443
+ :host([show-loading-indicator=true][loading-indicator-only=true]) ::slotted(*:not(.slot-loading-indicator)) {
986
1444
  visibility: hidden;
987
1445
  }
988
1446
 
989
- :host ids-popup[type=dropdown] {
990
- width: 100%;
991
- max-width: var(--ids-input-width-40);
1447
+ :host([show-loading-indicator=true]:not([loading-indicator-only=true])) ::slotted(.slot-loading-indicator) {
1448
+ margin-inline-start: 6px;
992
1449
  }
993
1450
 
994
- :host([size=xs]) ids-popup[type=dropdown] {
995
- max-width: var(--ids-input-width-10);
1451
+ :host([show-loading-indicator=true]:not([loading-indicator-only=true]):is([appearance=primary], [appearance=secondary], [appearance=primary-destructive]))::part(button) {
1452
+ padding-inline-start: 20px;
1453
+ padding-inline-end: 12px;
1454
+ }
1455
+ :host([show-loading-indicator=true]:not([loading-indicator-only=true]):is([appearance=primary], [appearance=secondary], [appearance=primary-destructive])) ::slotted(.slot-loading-indicator) {
1456
+ margin-inline-start: 10px;
996
1457
  }
997
1458
 
998
- :host([size=sm]) ids-popup[type=dropdown] {
999
- max-width: var(--ids-input-width-20);
1459
+ :host([loading-indicator-only=true]) ::slotted(.slot-loading-indicator) {
1460
+ position: absolute;
1461
+ margin-inline-start: auto;
1462
+ margin-inline-end: auto;
1463
+ left: 0;
1464
+ right: 0;
1000
1465
  }
1001
1466
 
1002
- :host([size=mm]) ids-popup[type=dropdown] {
1003
- max-width: var(--ids-input-width-30);
1467
+ :host(ids-toggle-button) {
1468
+ --ids-button-tertiary-color-background-hover: var(--ids-button-toggle-color-background-hover-default);
1469
+ --ids-button-tertiary-color-text-hover: var(--ids-button-toggle-color-text-hover-default);
1004
1470
  }
1005
1471
 
1006
- :host([size=md]) ids-popup[type=dropdown] {
1007
- max-width: var(--ids-input-width-40);
1472
+ :host(ids-toggle-button[pressed]) {
1473
+ --ids-button-tertiary-color-text-default: var(--ids-button-toggle-color-text-pressed-default);
1008
1474
  }
1009
1475
 
1010
- :host([size=lg]) ids-popup[type=dropdown] {
1011
- max-width: var(--ids-input-width-50);
1476
+ :host(ids-toggle-button[color=orange]) {
1477
+ --ids-button-tertiary-color-background-hover: var(--ids-button-toggle-color-background-hover-orange);
1478
+ --ids-button-tertiary-color-text-hover: var(--ids-button-toggle-color-text-hover-orange);
1012
1479
  }
1013
1480
 
1014
- :host([size=full]) ids-popup[type=dropdown] {
1015
- max-width: var(--ids-input-width-full);
1481
+ :host(ids-toggle-button[pressed][color=orange]) {
1482
+ --ids-button-tertiary-color-text-default: var(--ids-button-toggle-color-text-pressed-orange);
1016
1483
  }
1017
1484
 
1018
- :host(:not([show-loading-indicator=true])) ::slotted(.slot-loading-indicator) {
1019
- display: none;
1485
+ :host(ids-toggle-button[color=red]) {
1486
+ --ids-button-tertiary-color-background-hover: var(--ids-button-toggle-color-background-hover-red);
1487
+ --ids-button-tertiary-color-text-hover: var(--ids-button-toggle-color-text-hover-red);
1020
1488
  }
1021
1489
 
1022
- :host([show-loading-indicator=true]) {
1023
- pointer-events: none;
1490
+ :host(ids-toggle-button[pressed][color=red]) {
1491
+ --ids-button-tertiary-color-text-default: var(--ids-button-toggle-color-text-pressed-red);
1024
1492
  }
1025
- :host([show-loading-indicator=true]) ::slotted(ids-loading-indicator) {
1026
- margin-top: 3px;
1027
- margin-bottom: 3px;
1493
+
1494
+ :host button {
1495
+ --ids-button-icon-height: 32px;
1496
+ --ids-button-icon-width: 32px;
1497
+ height: auto;
1498
+ width: auto;
1028
1499
  }
1029
- :host([show-loading-indicator=true]) ::slotted(ids-trigger-button[slot=trigger-end]) {
1030
- display: none;
1500
+
1501
+ :host([compact]) .ids-trigger-button.ids-icon-button,
1502
+ :host([field-height=xs]) .ids-trigger-button.ids-icon-button,
1503
+ :host([field-height=sm]) .ids-trigger-button.ids-icon-button {
1504
+ padding: var(--ids-space-none);
1031
1505
  }
1032
- :host([show-loading-indicator=true]) ::slotted(.slot-loading-indicator) {
1033
- margin-inline-end: 12px;
1034
- margin-inline-start: 8px;
1506
+ :host([compact]) .ids-trigger-button.ids-icon-button:not(.square),
1507
+ :host([field-height=xs]) .ids-trigger-button.ids-icon-button:not(.square),
1508
+ :host([field-height=sm]) .ids-trigger-button.ids-icon-button:not(.square) {
1509
+ border-radius: var(--ids-trigger-field-button-border-radius);
1035
1510
  }
1036
1511
 
1037
- :host([show-loading-indicator=true][field-height=xs]) ::slotted(.slot-loading-indicator) {
1038
- margin-inline-start: 4px;
1039
- margin-inline-end: 4px;
1512
+ :host([field-height=xs]) .ids-trigger-button.ids-icon-button {
1513
+ margin-inline-end: 3px;
1040
1514
  }
1041
1515
 
1042
- :host([show-loading-indicator=true][field-height=sm]) ::slotted(.slot-loading-indicator) {
1043
- margin-inline-end: 8px;
1044
- margin-inline-start: 4px;
1516
+ :host([field-height=sm]) .ids-trigger-button.ids-icon-button {
1517
+ margin-inline-end: 6px;
1045
1518
  }
1046
1519
 
1047
- ::slotted(.audible) {
1048
- clip: rect(0, 0, 0, 0);
1049
- height: 0;
1050
- line-height: 0;
1051
- min-height: 0;
1052
- overflow: hidden;
1053
- padding: 0;
1054
- position: absolute;
1055
- width: 1px;
1520
+ :host(.expand-button),
1521
+ .expand-button {
1522
+ margin-top: -3px;
1523
+ height: var(--ids-button-height);
1524
+ width: var(--ids-button-width);
1056
1525
  }
1057
1526
 
1058
- :host([part=trigger-field]) {
1059
- justify-content: flex-start;
1527
+ .ids-trigger-button {
1528
+ align-items: center;
1529
+ background-color: transparent;
1530
+ display: flex;
1531
+ color: var(--ids-trigger-field-icon-color);
1532
+ justify-content: center;
1060
1533
  }
1061
-
1062
- .ids-trigger-field {
1063
- justify-content: inherit;
1534
+ .ids-trigger-button.ids-icon-button {
1535
+ padding: var(--ids-space-xxs);
1536
+ inset-inline-start: -2px;
1064
1537
  }
1065
- .ids-trigger-field.compact .field-container {
1066
- height: var(--ids-input-height-10);
1538
+ .ids-trigger-button.ids-icon-button[disabled] {
1539
+ color: var(--ids-trigger-field-color-text-disabled);
1540
+ }
1541
+ .ids-trigger-button.ids-icon-button[readonly] {
1542
+ color: var(--ids-trigger-field-color-text-disabled);
1543
+ opacity: var(--ids-button-tertiary-opacity-disabled);
1544
+ }
1545
+ .ids-trigger-button.ids-icon-button[readonly]:hover {
1546
+ cursor: default;
1547
+ background-color: transparent;
1548
+ border-color: transparent;
1549
+ }
1550
+ .ids-trigger-button.style-inline {
1551
+ border: 0;
1552
+ padding: var(--ids-space-none);
1553
+ border-radius: var(--ids-trigger-field-button-border-radius-inline);
1554
+ margin: var(--ids-space-none);
1555
+ }
1556
+ .ids-trigger-button.style-inline.ids-icon-button {
1557
+ padding: var(--ids-space-none);
1067
1558
  }
1068
- .ids-trigger-field .field-container.square,
1069
- .ids-trigger-field .filter-container.square {
1559
+ .ids-trigger-button.style-inline.square {
1070
1560
  border-radius: 0;
1071
1561
  }
1072
-
1073
- .ids-trigger-field-slot-trigger-start,
1074
- ::slotted(*[slot=trigger-start]:first-of-type:not([inline]):not([compact]):not([field-height=xs])) {
1075
- margin-inline-start: var(--ids-trigger-field-button-margin-start);
1562
+ .ids-trigger-button.style-inline.field-height-xs, .ids-trigger-button.style-inline.field-height-xs.compact {
1563
+ height: calc(var(--ids-input-height-10) - 2px);
1564
+ width: calc(var(--ids-input-height-10) - 2px);
1076
1565
  }
1077
-
1078
- .ids-trigger-field-slot-trigger-end,
1079
- ::slotted(*[slot=trigger-end]:last-of-type:not([inline]):not([compact]):not([field-height=xs])) {
1080
- margin-inline-end: var(--ids-trigger-field-button-margin);
1566
+ .ids-trigger-button.style-inline.field-height-sm {
1567
+ height: calc(var(--ids-input-height-20) - 2px);
1568
+ width: calc(var(--ids-input-height-20) - 2px);
1081
1569
  }
1082
-
1083
- ::slotted(*[slot=trigger-end].xs) {
1084
- --ids-trigger-field-button-margin: 2px;
1085
- width: 24px;
1570
+ .ids-trigger-button.style-inline.field-height-md {
1571
+ height: calc(var(--ids-input-height-30) - 2px);
1572
+ width: calc(var(--ids-input-height-30) - 2px);
1086
1573
  }
1087
-
1088
- .ids-input.color-variant-alternate-formatter:focus-within .field-container {
1089
- box-shadow: var(--ids-trigger-field-shadow-focus);
1574
+ .ids-trigger-button.style-inline.field-height-lg {
1575
+ height: calc(var(--ids-input-height-40) - 2px);
1576
+ width: calc(var(--ids-input-height-40) - 2px);
1090
1577
  }
1091
- .ids-input.color-variant-alternate-formatter:focus-within .ids-input-field {
1092
- box-shadow: none;
1578
+ .ids-trigger-button.style-inline.compact, .ids-trigger-button.style-inline.field-height-sm.compact, .ids-trigger-button.style-inline.field-height-md.compact, .ids-trigger-button.style-inline.field-height-lg.compact {
1579
+ height: calc(var(--ids-input-height-10) - 2px);
1093
1580
  }
1094
-
1095
- .field-container.collapsed .btn-clear {
1096
- display: none;
1581
+ .ids-trigger-button.inline-end {
1582
+ border-inline-start: 1px solid;
1097
1583
  }
1098
-
1099
- :host(:not([collapsed])) ::slotted(ids-trigger-button.expand-button) {
1100
- display: none;
1584
+ .ids-trigger-button.inline-start {
1585
+ border-inline-end: 1px solid;
1101
1586
  }
1102
-
1103
- :host([collapsed]) ::slotted(ids-trigger-button.expand-button) {
1104
- display: block;
1587
+ .ids-trigger-button.inline-start:not(.btn-secondary):not(.no-margins) {
1588
+ margin: 0;
1589
+ }
1590
+ .ids-trigger-button.color-variant-alternate-formatter {
1591
+ padding: var(--ids-space-xxxs);
1592
+ }
1593
+ .ids-trigger-button.inherit-color {
1594
+ color: currentColor;
1105
1595
  }